css에서 배워야 할 핵심적인 개념

DISPLAY 속성

1. DISPLAY : block

태그에는 모두 부모가 존재하는데, 부모의 최대한의 너비를 모두 가져가면서 블록 모양을 가져가는 속성
높이는 따로 설정하지 않는 이상 기본적으로 설정된 값 혹은 그 내용물의 맞춰서 크기가 맞춰진다.

children 태그가 여러개라면 아래로 쌓이는 형태

2. DISPLAY : inline

글씨의 높이만큼만 한 줄(가로 라인)내에 일정 부분만 가져가는 형식으로 구축을 하게 되는 속성

children 태그가 여러개라면 옆으로 쌓이는 형태

3. DISPLAY : inline-block

block 인데도 불구하고 inline 처럼 오른쪾으로 쌓이는 형태

4. DISPLAY : None

html 태그 상에서 존재하긴 하지만 브라우저에 시각화 되는 과정에서는 아무것도 없는것으로 처리

※ Display : None 과 Visibility : Hidden 의 차이
시각화 속성

display가 None으로 바뀌었다면 차일드가 아예 없는 것처럼 반응을 한다.

Visibility의 속성

1. Visibility : Hidden

display : none으로 설정된 자식이 아예 없어진 후에 차일드가 없는 것처럼 반응을 한다.

다시 Display : inline-block 속성을 가지고 있다고 하고

child 2가 hidden 속성을 가지게 된다면

그냥 보이지만 않을뿐 존재하긴 하는 것처럼 표현이 된다.

이런 식으로 구현하고 싶다면 Visibility 속성을 만져야 하고 아예 없애려면 display : none 을 통해 아예 없애야 한다.

SIZE 속성

html 내부에 있는 태그들의 모양 크기 너비 높이 등을 설정하면서 그것들의 사이즈를 설정해줄 수 있는 척도가 다음과 같이 px, em, rem, % 4가지가 있다.

rem을 거의 모든 곳에 사용해서 html을 구축할 것이다.

크기를 신경쓰는 이유?
우리가 만들려는 사이트를 반응형으로 만들어야 한다.
반응형이란 html 태그들이 데스크탑 사이즈에서 볼 수 있고, 작은 모바일 사이즈에서도 볼 수 있기 때문에 각각의 크기가 어떻게 변하는지에 대한 통제력을 가지고 있어야되므로 반응형 떄문에 사이즈를 주의깊게 봐야 한다.

1. PX

픽셀은 부모가 커지던 작아지던 무조건 설정된 px값 대로 화면상에 표현하도록 한다.

2. em

부모의 폰트 사이즈가 커진 대로 자식의 폰트 사이즈가 따라가는 형식



그런데 em 단위를 사용하지 않는 이유는 부모가 여러 개 존재할 때 문제가 발생
-> 두 부모의 폰트 사이즈가 모두 2배씩 커졌다면 자식 폰트 사이즈는 총 4배 증가하게 된다.

3. rem

어디서든 존재하는 문서인 root html 문서가 존재하는데 이 root html에 기본적으로 적용되어있는 폰트 사이즈가 16px로 존재하고 이 값에 고정 되어있다.

바로 위에 있는 부모의 폰트 사이즈가 커지던 작아지던 영향받지 않는다.

그런데 만약 root html의 폰트 사이즈가 24px로 커지게 되면, 이 크기가 변한 만큼 자식 폰트 사이즈가 따라간다.

요약