TIL) 0325 재현쌤의 HTML, CSS 특강

1. article과 section 구분

1) article

• 독립적으로 존재할 수 있는 구획, 다른 페이지에서 느닷없이 나와도 괜찮다.
• 네이버 페이지를 예로 들자면, 메인 페이지가 아닌 다른 페이지에 있어도 이상하지 않은 것
  (보통 위젯 같은 것을 만들 때 article로 만든다. 날씨 위젯, 다크모드로 보기 위젯 등)
  
  

2) section

• 연관성 있는 문서의 구획을 나누고자 할 때
• 쿠팡 페이지를 예로 들자면, 오늘의 발견, 오늘의 쇼핑제안, 오늘의 판매자 특가 등과 같이 연관성 있으면 section을 쓴다.
  
  - ⭐️ 다른 페이지에서 '오늘의 쇼핑 제안' 이 나오면 article로 해도 괜찮은지 => 전체적인 맥락에서 판단하면 된다. 만약에 기획서가 나왔을 때, '오늘의 쇼핑 제안'이 다른 페이지에서도 나온다면 article로 묶어도 괜찮겠다고 스스로 판단하면 된다.

---

2. margin-collapsing

1) 예제로 이해해보기

2) margin-collapsing 해결법

• container 요소에 overflow: hidden;
  : 부모 요소에 overflow: hidden을 주면 자식 요소가 부모 요소 범위 밖으로 나가지 못하게 된다. 부모의 밖으로 나가지 못한 자식요소는 부모 요소 안에서만 있게 된다.

• container 요소에 display: inline-block;
  : 이 때 inline-block을 사용하면 div.parent와 div.other사이에 간격이 생기는 것을 볼 수 있는데 이는 vertical-align때문이다. vertical-align: top같은 것으로 해결할 수 있다.

  • vertical-align이란 인라인 요소 안에서 인라인 요소들 끼리의 수직정렬을 맞춘다.

• container 요소에 border 주기

• container 요소에 display: flow-root;
  : flow-root는 모바일의 경우 ios(==safari) 13버전 부터 사용할 수 있다. (ios를 업데이트 하지 않으면, safari도 업데이트 되지 않는다.)
  

3) BFC (Block Formatting Context)

• 웹페이지 화면에 CSS를 랜더링하는 과정의 한 부분으로, block 레벨 요소들이나 float된 요소들이 서로 상호작용 하여 화면에 보여지게 되는 방법(block formatting)을 결정하는 구역(context)을 말한다.
  => 간단하게 'BFC가 생성되면 내부, 외부 float을 해제하고, 마진컬랩싱현상을 막는다' 라고만 알고 있으면 된다.

---

3. Position과 Transform

1) position

• 요소의 위치를 옮기는 방법

2) postion: relative

• 자기 자신의 위치에서 움직인다.

3) position: absolute

• 부모의 position 속성이 static이 아닌 가장 가까운 부모를 기준으로 움직인다.

• position: absolute는 요소의 display 속성이 block으로 바꾼다.

• top, bottom, left, right없이 position: absolute만 주면 움직이지 않는다. 대신 요소가 제자리에서 뜬다. => 따라서 요소를 제자리에서 띄우고 싶을 때는 position: absolute를 쓴다.

4) transform: translate()

• 요소를 움직이고 싶을 때는 transform: translate()가 더 효율적이다. position은 top, left, right, bottom까지 다 써야하기 때문이다.

• 인라인 요소를 transform을 사용해 움직이고 싶을 때는, display를 block으로 바꿔줘야한다. position을 absolute로 바꾸면 block요소가 되기 때문에 움직인다. (🔥그래서 trasnform: translate()은 position: absolute랑 같이 사용해야 작동한다고 생각하는 사람이 많다🔥)

• animation을 구현해야할 때 요소의 위치를 움직여야한다면, position보다는 transform: translate을 이용하는 게 낫다.

  • transform은 reflow, repaint를 일으키지 않는다.

    • reflow: 레이아웃 변경 시 영향 받는 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업

    • repaint: reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 스타일 변경시에는 reflow 과정을 생략한 repaint 작업만 수행한다.

  • transform은 GPU를 사용한다. GPU를 사용하면 transform 속성을 이용하는 요소의 렌더링 속도가 빨라진다. (왜? cpu는 하는 일이 많아서 바쁨 / GPU는 그래픽카드의 중앙처리 장치로 그래픽적인 요소를 표현하는데에 특화되어있는 칩)