특강 주제

• 시멘틱 태그 - 시멘틱 태그를 사용할 때 어떻게 결정해야 할까?
• 마진 컬랩싱 현상 / 마진과 패딩의 사용에 관하여
• position & transform

▶ margin

▷ 요소와 요소 사이 간격(margin), 부모와 자식 사이 간격(padding)을 기억하자.

└ 이러면 마진병합때문에 스트레스 받을 일이 없다!

▶ 마진병합 현상을 해결하는 방법

1. 부모 요소에 overflow 속성 값을 적용.

2. 부모 요소에 display: inline-block 값을 적용.

3. 부모 요소에 border 값을 적용.

4. 부모 요소에 display 속성으로 flow-root을 사용. (IE 지원 불가)

💥 그러나 한계가 있다!
overflow: hidden 속성을 사용하면 요소 잘림 현상이 발생할 수 있음.
inline-block을 사용하면 요소의 넓이가 컨텐츠 크기로 한정 됨.
border 값을 적용하면 원치 않는 선이 생김.

👉 따라서 flow-root를 사용하는 것이 가장 깔끔하다.

▶ flow-root

▷ flow-root는 BFC(Block Formatting Context)를 생성해 마진 병합 현상을 막는다.

💡 그렇다면 BFC는 무엇일까?
웹페이지 화면에 CSS를 랜더링하는 과정의 한 부분. block 레벨 요소나 float 된 요소가 이 과정에 포함된다.

✨ BFC가 생성되면 이런 작용을 해요
1. 내부, 외부 float을 해제한다.
2. 마진 컬랩싱 (margin collapsing) 현상을 막는다.

▶ tag

▷ section은 주제의 통일성이 있는 구역에 사용한다.

▷ aside는 광고 영역처럼 main 영역의 내용과 연관이 없는 경우, 또는 사이드바와 같은 형태의 UI에서 많이 사용한다.

▷ figure는 이미지-이미지 설명이 붙어있는 영역을 시맨틱하게 나타낼 때 사용한다.

▷ cite>는 출처 표기에 사용한다.

▷ small은 덧붙임 글 요소를 표현할 때 사용한다(저작권, 법률 표기 등의 작은 텍스트).

▷ time은 날짜나 시간을 나타낼 때 사용한다. span이나 p 대신 해당 태그를 사용하자.

▷ nav에 담는 건 사이트의 주 네비게이션이다. 사이트가 밀고 싶어하는, 주된 서비스를 묶는 링크가 들어가야 한다.

▶ position

▷ relative는 자기자신에게 상대적이다. 자신의 위치를 기준으로 이동한다.

▷ absolute는 부모에게 포지션 속성이 없을 때 뷰포트를 기준으로 삼는다.

└ absolute 속성이 적용되면 display: block이 된다.

└ relative 등의 속성 없이 absolute만 쓰는 경우는? → 요소를 띄울 때

▶ transform

▷ transform은 position보다 효율적이다. (top, bottom 등의 추가 코드 없이 transform은 한 줄로 끝낼 수 있다)

💥 주의할 점!
등의 inline 요소에 transform을 사용하면 움직이지 않는다.
움직이지 않는다는 이유로 간혹 position:absolute를 쓰는 경우도 있는데 더더욱 안 된다!
(absolute와 함께 적용해야 움직인다는 오해는 금물)

👉 display: block 또는 display: inline-block을 적용하자

▷ 애니메이션을 위해 요소의 위치를 옮길 때 position보다 translate를 쓰는 게 좋다.

💡 애니메이션 효과에 translate가 더 적절한 이유
👉 브라우저의 내부 요소가 이동하면 기본적으로 reflow & repaint가 일어난다.
이동하는 요소의 부모나 형제, 자식의 위치가 변하지 않았는지 브라우저가 계산하는 과정이 필요하다는 이야기. 그러나 transform은 애초에 reflow&repaint를 일으키지 않게 설계되었다.

👉 위와 같은 연산은 cpu가 담당하는데, cpu는 기본적으로 하는 일이 많고 바쁘다.
transform을 사용하면 cpu 대신 gpu가 역할을 대신한다. gpu는 그래픽카드에 들어있는 중앙처리장치로 그래픽을 전문적으로 처리하기 때문에 훨씬 빠르게 작업을 처리할 수 있다. 그래서 애니메이션이 더욱 쾌적하게 구동된다.