[Mini Project] 홈페이지 만들기(0326)

HTML 이미지 경로 - 절대경로와 상대경로

절대경로 : 이미지의 절대적인 경로로 지정하는 방식.
예시.

<img src="이미지 URL"> 또는 
<img src="c:home\images\tree00.gif">

절대경로는 고유한 경로이다. 위의 예처럼 http://가 포함되어 있는 절대경로는 경로명만(웹브라우저 주소) 입력해도 그 이미지가 나온다. 보통 홈페이지 제작시 자신의 컴퓨터에서 HTML 문서를 만들고 이를 FTP를 통해서 웹서버에 일괄적으로 올리는데 이런 경우, 절대경로로 이미지를 삽입했다면 모두 고쳐줘야 하는 불편함이 있다.
그래서 일반적으로 절대경로보다는 상대경로를 이용해서 이미지를 삽입하는게 좋다.

1-2. 상대경로
상대경로는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식하는 방법이다.
이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지, 하위 폴더에 있는지를 따져보고 경로를 지정해줘야 한다. 먼저 HTML 문서와 이미지 파일이 같은 폴더에 저장되어 있다면 이미지 파일명만 적어주면 된다.
그러나 다른 폴더에 있다면 이 다른폴더의 위치를 지정해주는 방법을 이해해야 한다. 하위폴더로 이동하는 방법은 하위폴더명을 적어주고 슬래쉬(/)를 입력해주면 된다.
예를 들어, html 문서는 index.html이라고 하고, 이미지 파일명은 logo.jpg라고 가정했을때.
index.html파일이 c:home 폴더에 위치하고 있고 logo.jpg 파일은 c:home 폴더의 하위폴더인 images 폴더에 위치하고 있으면
<.img src="images/logo.jpg">와 같이 지정하면 된다. 현재 폴더의 하위폴더인 images 폴더에 logo.jpg 파일이 위치하고 있다는 표시이다.

상위폴더로 이동하는 방업은 ../ 이와 같이 표현한다.
index.html 파일이 c:home\doc 폴더에 위치하고있고 logo.jpg 파일은 c:home\images 폴더에 위치하고 있으면
<.img scr="../images/logo.jpg"> 이와 같이 지정한다.
../ 를 통하여 일단 상위폴더로 나간다음(c:\home 폴더) 다시 images 폴더로 들어가는 것.
출처 : http://www.homejjang.com/03/html.php/img_path.php

이미지 정렬(align)

<.img> 태그에 align 속성을 사용하면 이미지와 텍스트의 배치를 바꿀 수 있다.

<p><img src="예시.jpg" align="top">align="top"</p>
<p><img src="예시.jpg" align="middle">align="middle"</p>
<p><img src="예시.jpg" align="bottom">aling="bottom"</p>

이미지와 텍스트의 자연스러운 배치를 위해서 많이 사용하는 align 속성값은 left와 right이다. 이미지와 텍스트의 여백을 조정하려면 추가적으로 vspace와 hspace 속성을 사용하면 된다.
vspace는 vertical space, hspace는 horizon space의 약자이다.

출처 : http://www.homejjang.com/03/html.php/img_align.php

CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기

1. 이미지 비율 유지
   이미지의 비율을 유지하면서 크기 조정을 하는 방법은 이미지의 너비와 높이 둘 중 어느 하나를 auto 값을 유지한 채로 크기 조정을 하는 것이다. 흔히 반응형 이미지에 사용되는 방법은 아래와 같다.

   img {
   max-width: 100%;
   height: auto;
   }

반응형 이미지의 너비를 자유롭게 조정하기 위해서 이를 감싸는 컨테이너를 추가해주고 적절한 너비를 부여하면 아래와 같다.

html

<div class="thumbnail-wrapper">
  <img src="xxx">
</div>

css
.thumbnail-wrapper {
width: 25%;
}
img {
max-width: 100%;
height: auto;
}

위의 코드의 경우, 이미지 원본의 비율을 유지하기 위해 너비만 부여했기에 이미지는 각각의 통일되지 못한 높이를 가지고 있게 된다.
또한 유동적인 너비를 갖도록 % 너비 값을 부여했으나 높이는 그럴 수 없다.

일반적으로 고정된 높이 값을 부여하고 넘치는 부분을 자른기 위해선 아래와 같다.

.thunbnail-wrapper {
width: 25%;
height: 200px;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}

유동적인 너비에는 대응하지 못하는 결과를 초래하므로 추천되지 않는 방법이다. 컨테이너 또한 일정한 비율 유지가 필요함을 알게 된다.

! 컨테이너 비율 유지
컨테이너의 비율 유지를 위해 사용되는 기법은 2009년 Creating Intrinsic Ratios for Video에 기고된 내용을 이해하는 것이 핵심이다.

"퍼센테이지(%, 백분율)은 컨테이너 블럭의 너비를 참조한다."

익히 알다시피, 퍼센테이지 단위는 부모 요소를 기준으로 계산되어 진다. 의외인 것은 자식 요소의 수직적인 패딩 값도 부모 요소의 너비에 영향을 받는다는 것이다. 이 특징을 이용하여 상, 하 어느 방향의 패딩값을 이용해서 특정 비율을 유지하는 컨테이너를 만들 수 있다.

html

<div class="thumbnail-wrapper">
  <div class="thumnail">
    <img src="xxx">
  </div>
</div>

css
.thumbnail-wrapper {
width: 25%;
}
.thumbnail {
position: relative;
padding-top: 100%; / 1:1 rato /
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
height: auto;
}

이는 각각의 높이를 가지고 있는 이미지들을 absolute 포지셔닝을 통해 문서의 흐름에서 제외시켜 이미지의 높이가 컨테이너의 높이에 영향을 줄 수 없게 만들고 새로 추가된 .thumbnail 요소의 상단 패딩값으로 높이를 조절하게 만든다.
즉, 상단 패딩값 만큼만 이미지가 노출되고 나머지 넘치는 부분은 잘리게 되어 컨테이너는 일정한 비율을 유지하게 되며 유동적인 너비 변화에 대응한다.

출처 : https://webdir.tistory.com/487

컨테이닝 블록의 모든것 :

https://developer.mozilla.org/ko/docs/Web/CSS/All_About_The_Containing_Block
요소의 크기와 위치는 컨테이닝 블록(containing block)의 영향을 받곤 합니다. 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨 조상의 콘텐츠 영역이지만, 항상 그런 것은 아닙니다.

사용자 에이전트(브라우저 등)는 문서를 그릴 때 모든 요소에 대해 상자(박스)를 생성합니다. 각각의 상자는 아래의 네 가지 영역으로 나눠집니다.

1. 콘텐츠 영역
2. 안쪽 여백(패딩) 영역
3. 테두리 영역
4. 바깥 여백(마진) 영역

많은 개발자들은 요소의 컨테이닝 블록이 언제나 부모 요소의 콘텐츠 영역이라고 생각하지만, 사실 꼭 그렇지는 않습니다.
어떤 항목이 컨테이닝 블록을 결정짓나 알아보겠습니다.

컨테이닝 블록의 효과
컨테이닝 블록을 결정하는 요인에 뭐가 있는지 알아보기 전에, 애초에 컨테이닝 블록이 무슨 상관인지 알아두는게 유용합니다.
요소의 크기와 위치는 컨테이닝 블록의 영향을 자주 받습니다. 백분율 값을 사용한 width, height, padding, margin 속성의 값과 절대적 위치(absolute나 fixed 등)로 설정된 요소의 오프셋 속성 값은 자신의 컨테이닝 블록으로부터 계산됩니다.

!컨테이닝 블록 식별
컨테이닝 블록의 식별 과정은 position 속성에 따라 완전히 달라집니다.

1. position 속성이 static, relative, sticky 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 블록 컨테이너, 또는 가장 가까우면서 서식 맥락을 형성하는 조상 요소(table, flex, grid, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다.
2. position 속성이 absolute인 경우, 컨테이닝 블록은 position 속성 값이 static이 아닌(fixed, absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역입니다.
3. position 속성이 fixed인 경우, 컨테이닝 블록은 뷰포트나 페이지 영역(페이지로 나뉘는 매체인 경우) 입니다.
4. position 속성이 absolute나 fixed인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨에닝 블록이 될 수도
   있습니다.
   ㄱ. transform 이나 perspective 속성이 none이 아님.
   ㄴ. will-change 속성이 transform이나 perspective임.
   ㄷ. filter 속성이 none임.
   ㄹ. contain 속성이 paint 임.

!컨테이닝 블록으로부터 백분율 값 계산하기.
특정 속성의 값이 백분율이라면 그 계산값은 요소의 컨테이닝 블록에 의해 결정됩니다. 이렇게 동작하는 속성으로 박스 모델 속성과 오프셋 속성이 있습니다.

1. height, top, bottom 속성은 컨테이닝 블록의 height를 사용해 백분율을 계산합니다.
   컨테이닝 블록의 height가 콘텐츠의 크기에 따라 달라질 수 있고, 컨테이닝 블록의 position이 relative거나 static이면 계산값은 0이 됩니다.
2. width, left, right, padding, margin 속성은 컨테이닝 블록의 width를 사용해 백분율을 계산합니다.

예제.

html 코드

<body>
  <section>
    <p>문단입니다!</p>
  <section>
</body>

예제 1. 다음 예제에서 문단은 정적 위치를 가지고, 가장 가까운 블록 컨테이너는 <.section>이므로 문단의 컨테이닝 블록도 <.section>입니다.

body {
background: beige;
}
section {
display: block;
width: 400px;
height: 160px;
background: lightgray;
}
p {
width: 50%
height: 25%
margin: 5%
padding: 5%
background: cyan;
}

CSS 포지션(position) :

https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1

포지션이란 이름처럼 태그들의 위치를 결정하는 CSS입니다.

• static
  일단 모든 태그들은 처음엔 position: static 상태입니다.(따로 작성하지 않아도 됨) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임

• relative
  여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다.
  이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.
  각각의 태그가 기존 static이었을 떄의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동했습니다.
  relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동합니다.

• absolute
  relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

• fixed
  홈페이지에서 어떤 메뉴는 항상 특정 위치에 고정되어 있다. 스크롤을 내려도 그 자리에 계속있다. 바로 포지션이 fixed로 설정되어 있기 때문

CSS 텍스트에 형광펜 효과주기 : mark 태그

<mark>텍스트에 형광펜!</mark>