CSS의 중요부분만 집중
DISPLAY 속성
태그들마다 display 속성 존재
이 속성이 어떻게 화면을 구성하게되는지를 결정
4가지 속성 존재
- Block
- Inline
- Inline-block
- None
block
태그에는 모두 부모가 존재. 그부모의 최대한의 넓이를 가져가면서 블럭모양을 가짐.
Inline
한줄 내에 일정부분만 가져가는 형식. 오른쪽으로 쌓임
Inline-block : 블럭모양으로 Inline처럼 오른쪽으로 쌓임
none : 아무것도 없음. html상으로는 있지만 화면상으로는 존재 x
Visibility 속성
hidden : none은 그냥 child 1이 왼쪽으로 이동하는 방면 hidden 은 계속 오른쪽에 존재. 보이지만 않을뿐 존재
Size 속성
responsive : 반응형으로 만들어야함.
px : 부모가 어떻게 되든 관심없음. 그냥 무조건 100px
em : 부모가 커지면 같이 커짐. 부모값을 따라감. 문제는 부모가 여러개 있을 때 발생
부모1, 부모2가 2배씩 커지면 자신은 4배나 커짐.
rem : 거의 모든곳에 사용. 부모가 커지든 작아지든 가만히 있지만 root httml의 폰트 사이즈가 커지면 그 크기만큼 따라감. 1rem = 16px
% : 바로 부모위의 영향만 받음
화이팅