article과 section 언제 쓰이는가?
article
•
독립적인 콘텐츠에 사용된다
•
Facebook에서 뜨는 알 수 있는 사람이나
광고와 같이 다른 페이지에서 재사용할 수 있는 독립적인 콘텐츠에 사용하자
•
쉽게 생각해서, 페이지의 흐름을 따라가다가 갑자기 나타나는 콘텐츠 즉, 필수적이지 않은 콘텐츠로 생각하자
ex) 위젯, 다크 모드에 사용이 많이된다
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가 생성되면 다음과 같은 작용을 합니다.
1.
내부, 외부 float을 해제한다
2.
마진 컬랩싱 (margin collapsing) 현상을 막는다
position 과 transform
potition
•
span이 inline 요소이여서
transform:translate는 inline요소에서 작동을 안함
•
position: absolute를 주면 block요소로 바뀌어서 잘 작동하는데
이를 오해하고 position 과 transform을 같이 사용해야한다고 오해하는 경우가 있음
transform
•
브러우저안에 있는 요소가 이동화면 리페인팅 리플로우가 일어나지만
리페인팅 리플로우를 일으키지않음
•
CPU 대신 GPU를 사용해 웹 브라우저가 애니메이션을 수행할 수 있도록 할 수 있다
덕분에 CPU에 과부하가 걸리지 않고 브라우저에서 렌더링 속도가 빨라진다
aside
•
HTML 문서에서 본문(content)과는 관계가 덜한 부가적인(side) 콘텐츠를 표시할 때 사용된다
small
•
저작권을 표기하는 글을 작성할 때 사용한다
copy right에 사용된다
nav
•
사이트의 주 네비게이션을 말한다
밀고싶은 주 서비스를 묵는 링크들이 들어가야함
