css 에서 배워야할 핵심적인 개념
C ascading
S tyle
S heet
DISPLAY 속성
DISPLAY : block
태그에는 모두 부모가 존재하는데, 부모의 최대한의 너비를 모두 가져가면서 블록 모양을 가져가는 속성
높이는 따로 설정하지 않는 이상 기본적으로 설정된 값 혹은 그 내용물의 맞춰서 크기가 맞춰진다.
- children 태그가 여러개라면 아래로 쌓이는 형태
DISPLAY : inline
글씨의 높이만큼만 한 줄(가로 라인)내에 일정 부분만 가져가는 형식으로 구축을 하게 되는 속성
- children 태그가 여러개라면 옆으로 쌓이는 형태
DISPLAY : inline-block
block 인데도 불구하고 inline 처럼 오른쪾으로 쌓이는 형태
DISPLAY : None
html 태그 상에서 존재하긴 하지만 브라우저에 시각화 되는 과정에서는 아무것도 없는것으로 처리
Display : None 과 Visibility : Hidden 의 차이
시각화 속성
DISPLAY : None
display 가 None 으로 바뀌었다면 차일드가 아예 없는 것처럼 반응을 한다.
display : none 으로 설정된 자식이 아예 없어진 후에
차일드가 없는것처럼 반응을 한다.
Visibility : Hidden
다시 Display : inline-block 속성을 가지고 있다고 하고
child 2 가 hidden 속성을 가지게 된다면
그냥 보이지만 않을 뿐 존재하긴 하는 것처럼 표현이 된다
이런식으로 구현하고 싶다면 Visibility 속성을 만져야 하고 아예 없애려면은 display : none 을 통해 아예 없애야한다.
이런식으로 Display : None 과 Visibility : Hidden 은 다음과 같은 차이가 있다.
SIZE 속성
html 내부에 있는 태그들의 모양 크기 너비 높이 등을 설정하면서 그것들의 사이즈를 설정해줄 수 있는 척도가 다음과같이 px, em, rem, % 4가지가 있다.
rem 을 거의 모든 데에 사용해서 html 을 구축할 것이다.
크기를 신경쓰는 이유?
우리가 만들려는 사이트를 반응형으로 만들어야 한다.
반응형이란 html 태그들이 데스크탑 사이즈에서 볼수있고, 작은 모바일 사이즈에서도 볼수있기 떄문에 각각의 크기가 어떻게 변하는지에 대한 통제력을 가지고 있어되므로 반응형 떄문에 사이즈를 주의깊게 봐야한다.
SIZE 속성 - PX
픽셀은 부모가 커지던 작아지던 무조건 설정된 px 값 대로 화면상에 표현하도록
SIZE 속성 - em
부모의 폰트 사이즈가 커진 대로 자식의 폰트 사이즈가 따라가는 형식
그런데 em 단위를 사용하지 않는 이유는 부모가 여러개가 존재할 떄 문제가 발생
-> 두 부모의 폰트 사이즈가 모두 2배씩 커졌다면 자식 폰트 사이즈는 총 4배 증가하게 된다.
SIZE 속성 - rem
어디서든 존재하는 문서 root html 문서가 존재하는데 이 root html 에 기본적으로 적용되어있는 폰트 사이즈가 16px 로 존재하고 이 값에 앵커링 되어있다.
바로 위에 있는 부모의 폰트 사이즈가 커지던 작아지던 영향받지 않는다.
그런데 만약에 root html 의 폰트 사이즈가 24px 로 커지게 되면, 이 크기가 변한 만큼 자식 폰트 사이즈가 따라간다.
요약
