(주말특강:재현님) 태그의 용도 && Margin Collapsing

---

📚 What is TIL?

article과 section 언제 쓰이는가?

article

독립적인 콘텐츠에 사용된다 Facebook에서 뜨는 알 수 있는 사람이나 광고와 같이 다른 페이지에서 재사용할 수 있는 독립적인 콘텐츠에 사용하자

💡 쉽게 생각해서, 페이지의 흐름을 따라가다가 갑자기 나타나는 콘텐츠 즉, 필수적이지 않은 콘텐츠로 생각하자
💡 위젯, 다크 모드에 사용이 많이된다

section

특정 관계에 있는 콘텐츠를 구분하는 데 사용된다

💡 쉽게 구별하는 방법이 없을까?

🔎 한 애플리케이션 내에서 다른 페이지를 사용하거나 다른 서비스로 콘텐츠를 가져올 때
 이상하게 보이는지 여부를 판단하는 것이 좋다

Margin Collapsing

부모요소 안에서 자식의 위치를 다르게 주려고 줬는데
부모요소의 위치가 밀린경우도 Margin Collapsing이다

🔎 border을 주거나 inline-block을 적용하면 Margin Collapsing을 해결할 수 있다

⚠️ 그러나 inline-block을 사용할 때 요소 하단에 여백이 나타나는 문제가 발생할 수 있다
 inline-block이 inline 요소이고 기준선으로 인해 간격이 나타나기 때문이다

여러가지 해결방법

✔️ 컨테이너 요소에 overflow:hidden주기
✔️ inline-block 주기
✔️ border 주기
✔️ display: flow-root 주기 (원래 블록레벨요소의 성질을 헤지지않고 부작용없이 젤 깔끔하게 해결이가능)

⚠️ 폰대응에 대해서 고려하는 상황을 가정했을 때
 만약 flow-root는 최소 ios13버전까지 쓸 수 있는 속성인데
 ios13 에 포함되어있지 않은 iphone6까지 대응하겠다 이러면 flow-root를 쓰지못한다

display: flow-root 의 원리

display: flow-root는 BFC를 생성한다

BFC 다시한번 알고가자..!

Block Formatting Context

웹 페이지에서 CSS를 렌더링하는 프로세스의 일부로,
block 레벨 요소들이나 float 된 요소들이 서로 상호작용 하여
화면에 보여지게 되는 방법(block formatting)을 결정하는 구역(context)을 말한다

BFC가 생성되면?

🔎 내부, 외부 float을 해제한다
🔎 마진 컬랩싱 (margin collapsing) 현상을 막는다

position 과 transform

potition

span이 inline 요소이여서
transform:translate는 inline요소에서 작동을 안함

⚠️ position: absolute를 주면 block요소로 바뀌어서 잘 작동하는데
 이를 오해하고 position 과 transform을 같이 사용해야한다고 오해하는 경우가 있음 (그게 바로나!)

transform

브러우저안에 있는 요소가 이동화면 리페인팅 리플로우가 일어나지만 리페인팅 리플로우를 일으키지않음

🔎 CPU 대신 GPU를 사용해 웹 브라우저가 애니메이션을 수행할 수 있도록 할 수 있다
🔎 CPU에 과부하가 걸리지 않고 브라우저에서 렌더링 속도가 빨라진다

---

🔗 TIP

aside

HTML 문서에서 본문(content)과는 관계가 덜한 부가적인(side) 콘텐츠를 표시할 때 사용된다

small

저작권을 표기하는 글을 작성할 때 사용한다
copy right에 사용된다

nav

사이트의 주 네비게이션을 말한다
밀고싶은 주 서비스를 묵는 링크들이 들어가야함

---

✨ Today is …

과제 완성..!

종찬님의 마지막 과제를 완성했다..!
저번 과제와 틀이 거의 비슷해서
종찬님이 풀이해주신 코드를 많이 참고해서
다시 처음부터 끝까지 구현하고 난 후에 과제를 해보니 수월했다

저번보다 더 부드럽게 반응형 페이지를 만들었지만
아쉬운 점은 애니메이션 효과를 준다고 자스를 건드리다보니
setTimeout 함수끼리 중첩이 많아졌다…

url