1. DISPLAY 속성
태그들마다 display 속성이 존재함!
1-1. Block 속성
부모태그의 100% 너비를 모두 가져가면서 블록 모양의 형태를 갖고 있는 것!
높이는 따로 설정하지 않는 이상, 기본 설정 값 혹은 내용물에 맞춰 설정됨.
child 가 여러개면 아래로 쌓임
1-2. Inline 속성
글씨가 있다 -> 글씨의 높이 만큼만. 한 줄 내의 일정 부분만 갖고가게 됨.
child 가 여러개면 오른쪽으로 쌓임
1-3. Inline-block
블록인데도 불구하고 인라인처럼 오른쪽으로 쌓이는 형식으로 구성된 블록.
1-4. None
존재하지 않음.
html 태그 상에서는 존재하지만, 브라우저에 시각화되는 과정에서는 아무것도 없우
2. Visibility 속성 (시각화 속성)
2-1. Hidden 속성
display의 none 과는 다름.
None 속성은 None 이 될 경우 아예 없는 것처럼 적용됨. (다른 블럭이 그 자리를 차지 가능)
Hidden 속성은 hidden 이 될 경우에도 존재하긴 함. (다른 블럭이 그 자리를 차지 못함)
3. SIZE 속성
3-1. px
부모가 어떻게 되든 관심이 없음.
차일드의 필셀은 무조건 지정한대로만 동작함.
3-2. em
부모의 폰트사이즈가 커지면, 차일드의 폰트사이즈가 그 배율대로 따라감.
근데 부모가 여러개 있을 때... 그 배율을 다 곱해서 따라감..
예를들어 부모가 2배 커지고 그 부모가 2배 커지면 >> child는 4배 커짐.. 미쳤나
3-3. rem
이걸 사용하는 걸 추천.
root HTML 에 기본적으로 적용되어 있는 폰트 사이즈가 존재하는데,
이 값에 앵커링 되어 있음!
부모의 폰트사이즈에는 영향을 받지 않지만, root HTML 의 사이즈에 영향을 받음!
1rem = 16px 에 해당함. 브라우저 기본이 16px이어서.
3-4. %
rem 과 %만 사용하는걸 추천
바로 위의 부모의 사이즈에만 영향을 받음.