네이버 부스트캠프 및 칸 아카데미 강의 관련 정리해봅니다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하고 나아가 SCSS, 관련 애니메이션 등 확장적인 기능에 대하여 학습하고자 합니다.

레이아웃

Display

요소가 기본적으로 가지고 있는 display 값에 따라 블록 레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정됩니다.
이 외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재합니다.

• inline
• block
• inline-block : inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐
  * height 나 width 등과 같은 박스모델 속성을 적용가능
  * inline와 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 됨

display와 box model의 관계

실제로는 inline 요소의 padding/border는 좌/우뿐만 아니라 상/하에도 적용이 되지만, 상/하 padding/border는 line-box에는 영향을 주지 못하기 때문에 부모 요소의 박스에 반영되지 않습니다.

Visibility

요소의 화면 표시 여부를 지정하는 속성입니다. 실제 렌더링은 되며 시각적으로 숨기는 역할을 할 때 사용합니다.

display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

• visible: 화면에 표시
• hidden: 화면에 표시되지 않음(공간은 차지함)
• collapse: 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능)

Float & Clear

float 속성은 요소를 보통의 흐름에서 벗어나 독자적인 공간 위에 배치되게 됩니다. 주변 텍스트나 인라인 요소가 주위를 감싸게 되는 것이 특징입니다. float을 이용하면 주변 요소들과 더욱 자연스럽게 배치될 수 있지만, floating 되지 않은 주변 요소들에도 영향을 주기 때문에 잘 이해하고 사용해야 합니다. 대부분 요소의 display 값을 블록으로 변경합니다. (display 값 변경 예외: inline-table, flex 등)

• none: float 시키지 않음(default)
• left: 좌측으로 float 시킴
• right: 우측으로 float 시킴

floating 요소는 주변 요소들의 배치에도 영향을 줍니다. 그러므로 가끔 주변 요소들이 의도하지 않은 대로 나타날 수 있는데, 부모요소보다 자식요소가 더 커져 이를 침범하는 형태로 나타납니다. 주로 after 가상선택자와 clear, overflow 속성을 활용하여 이를 해결합니다.

1. float 속성을 적용한 요소의 부모요소에 가상요소 ::after를 사용하여 clear를 수행

   nav::after { 
   	content: ''; 
   	dispaly: table/block; 
   	clear: both 
   }```

2. float를 가진 요소의 부모 요소에 overflow: hidden 또는 overflow: auto를 적용
   overflow: auto 사용시 자식의 너비가 부모의 너비보다 크다면 가로 스크롤바가 생김
   overflow: hidden의 경우 넘치는 부분이 잘리기 때문에 사용하지 않는것이 좋음

Position

요소의 레이아웃을 설정으로 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다. position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset에 대해서도 알아야 합니다.

* absolute는 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다.

Offset

top | bottom | left | right: auto | length, % | initial | inherit;

padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값이 계산됩니다.
그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어집니다.

Z-index

요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다. 레이아웃 구성에 있어서 이를 생각하며 배치를 해야합니다.
position 값이 static이 아닌 경우 지정가능하며, 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓입니다.
부모가 z-index 값이 있을 경우 부모 안에서만 의미있으며, 큰 값이 가장 위쪽에 배치합니다.(음수 사용 가능)

Q&A

Q. float된 지점들이 부모 엘리먼트의 height에 맞춰지지 않는 문제를 어떻게 해결하나요?

• A. 비어있는 콘텐츠('')의 div에 clear: both를 적용하면, 부모 엘리먼트를 float하여 clear 할 수 있다. (content가 필수)

Q. translate는 엘리먼트의 z축 방향 위치를 변경할 수 있다? position:absolute와 활용법은?

• A. X, Y 축만 변경이 가능하며, absolute를 이용하여 부모요소 속에서 레이어 정렬에 활용할 수 있다. 따라서, 요소의 width와 height, offset, translate을 이용하여 가운데 정렬이 가능하다.

Q. overflow: hidden이 새로운 block을 생성하나요?

• A. overflow 속성은 콘텐츠의 크기가 콘텐츠의 할당된 영역을 초과할 때 콘텐츠를 처리합니다. 영역을 넘어간 컨텐츠를 visible, hidden, scroll 혹은 auto(viewport의 default)로 지정하여 처리할 수 있습니다.