2020-07-21

1. Background-image

:CSS속성은 요소의 배경이미지를 한 개 이상 지정할 수 있다. 여러개의 배경 이미지는 서로의 위에 쌓이며, 맨 처음 지정한 이미지가 제일 위에(사용자에게 가깝게) 위치한다.

이미지 속성에 따라서도 서로의 위 아래에 놓인다.

-테두리(위)

-배경이미지(중간)

-background-color(아래)

지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도, background-color는 반드시 지정해준다. 네트워크가 좋지 못해서 해당이미지를 볼수 없을경우, 배경색으로 대체하여 텍스트나 컨텐츠를 구분지어 볼 수 있도록 하기 위함이다.

• background-position: x이동값 y이동값; (%단위,px단위 등으로 입력해준다.) 또는 left, right, top, center등의 값을 입력해 줄 수 있으며, right 45% bottom 45%등 기준점의 위치도 한번에 정해줄 수 있다.

2. Vertical-align

:inline요소 또는 table-cell box에서의 텍스트 수직 정렬 속성.

vertical-align: baseline, sub, super, text-top, text-bottom, middle, top, bottom, 10em, 4px, inherit, initial, unset;등의 요소를 지정해 줄 수있다. 주로 text-align(가로방향으로의 가운데정렬)과 함께 세로방향 가운데정렬로 middle값을 많이 넣어준다. text-align은 요소를 포함하는 컨테이너에 지정해주는 속성이지만 vertical-align은 해당 요소에 직접적으로 적용하는 속성이다.

#### 참고####

​ <inline의 구조>

inline요소는 대부분 baseline에서부터 시작된다. 따라서 baseline과 bottom-line사이의 공간은 여백으로 존재하는 경우가 많고 이로인해서 margin과 padding을 주지 않았는데 1px정도의 작은 부분이 추가로 공간을 차지하는 경우가 있다. 이를 해결하기 위해서 vertical-align을 bottom으로 움직여서 해결하거나, display:block으로 속성을 변경하면 해당 여백이 사라진다.

빨간색 원 부분이 baseline과 bottom-line의 여백이다.

3. 부모요소 밖으로 자식요소의 margin이 나가는 현상

위의 그림과 같이 내부에 포함된, 자식요소의 margin이 부모요소 밖으로 나가는 현상이다. 모던 레이아웃(flex)에서는 자동으로 조절이 되어서 1번과 같이 조절이 되지만, 고전적으로 사용하는 레이아웃 방식에는 부모요소의 경계를 명확히 지정해 주는 방법을 사용해야 한다.(padding을 1px이상 또는, border를 1px이상으로 지정해서 margin이 나가는 것을 막아준다.)

아래에서 유형별로 이해하기

마진겹침

:normal flow인 block요소간의 margin이 상쇄되는 현상. 인접한 block요소의 margin-top과 margin-bottom이 둘 중 큰 값으로 combine/collapse 된다. float나 absolute된 block요소의 마진은 상쇄되지 않는다.

• 부모 block요소의 margin-top과 first-child block요소의 margin-top이 상쇄되는 현상.(부모요소의 border, padding 값 등 경계를 구분 지어주는 요소가 없어서 firstchild의 margin-top과 부모요소의 margin-top이 겹쳐져서 부모요소밖으로 margin-top이 적용되는 현상)(last-child의 margin-bottom과 부모요소의 margin-bottom도 마찬가지로 겹침현상 발생.)

  

• 부모 block요소의 border값을 1px으로 설정해서 경계를 구분해 주면 first-child의 margin-top이 부모요소 안으로 포함된다.(부모의 margin-top과의 상쇄 해제) (last-child의 margin-bottom과 부모요소의 margin-bottom도 마찬가지로 겹침 해제되었다.)

  

• 위와같은 마진겹침 현상은 normal flow인 block요소 간에만 발생한다.

  아래의 예시는 inline-block과 block요소간의 관계이다. inline-block의 margin-bottom을 100px. block요소의 margin-top도 100px을 설정해 주었으나, margin겹침 없이 두 box의 위아래 총 margin값이 200px로 적용된 모습이다.

  

4. <dl>,<dt>,<dd>태그 + 선형화구조(with 수업내용)

수업내용을 중심으로 정리하기

위의 블록요소를 구조화하면 아래와 같이 할 수 있다.

기본적인 구조인 heading태그와 p태그를 이용할 수도 있지만, 위의 요소특성을 보면 dl,dt,dd를 이용하는 것이 의미론적으로 더 좋은 시멘틱 구조라고 할 수 있다. 위의 요소는 웹표준 이라는 용어를 설명하는 정의적인 의미를 가지고 있다. 따라서 해당 용어의 내용에 해당되는 w3c 이미지와 텍스트 들을 dd로써 describe해준다. web표준이란? 요소는 용어의 제목에 해당하므로 dt에 넣고 1개 이상의 dt와 dd만을 자식요소로 가질 수 있는 dl안에 넣어주는 것이다.

html5.2에서 최신화된 내용에서는 dt와 dd를 div로 묶어 줄 수 있으나, 조건이 있다.

위와 같이 div는 dt와 dd만을 묶음으로 하여 존재하여야 하고, 여러개의 요소를 정의하고 설명하기 위해서는 div-div를 형제요소로 배치하여야 한다.

dl dt dd는 a태그로 전체를 한번에 묶어줄 수 없기 때문에 편의를 위해서 이 태그를 사용하지 않고 div로 전체를 구역화 하고 한번에 a태그 설정하는 경우가 있으나, 번거롭더라도 시멘틱구조를 위해서 각각 링크를 걸어주자.