자자. 어려운거 들어가시겠다.
CSS에서 가장 이해하기 어려웠던 display 속성에 대해 "자세하게" 알아보겠다.
일단 CSS에서 display 속성이 중요한 이유는
=> 요소의 배치와 동작 방식을 정의하여 웹 페이지의 레이아웃과 디자인을 결정하는 핵심 역할을 하기 때문이다.
display 속성은 요소가 다른 요소와 어떻게 상호작용하는지를 제어한다.
display 속성에는 어떤 키워드들이 있는지 정리해봤다.
| 키워드 | 설명 |
|---|---|
| none | 태그를 화면에서 감추기 |
| block | 태그를 블록 형식으로 지정 |
| inline | 태그를 인라인 형식으로 지정 |
| inline-block | 태그를 인라인-블록 형식으로 지정 |
뭐... 이건 너무나도 간단한 키워드들이고
코드로 이해해보려 한다.
display: block; (2)
- block(div,nav,article,section의 기본값/너비는 최대화, 한 줄을 무조건 혼자 쓴다),
- inline-block(너비 최소화, 한 줄에 최대한 여러개)
float: left; (2)
position: absolute; (3)
flex: start; (4)
폰트의 기본값은 검은색,
display:block은 div, section의 기본값(한 줄을 무조건 혼자 씀)
웹페이지 재료 3요소
HTML, CSS, JS
div>section tab -> 자동완성
div에 칠하던지 경계를 치던지 눈에 보이게
새창에서 띄우기 target="_blank"
강제 줄바꿈
div
nav
section
article
-> display:block
a href=""
-> inline
br
-> 닫는 태그가 없음 : br, hr, img, input
뭘 의미하는지? 자식을 가질 수 없다(자식이 있으려면 감싸야함)
a[href="#"][a="abcd"]{abc} tab
div+nav(nav가 div의 인접동생)
div > a : div의 자식인 a
div a : div의 후손 a
margin : 바깥쪽여백
padding : 안쪽여백
text-align: 해당 영역(section) 안에 글자를 가운데정렬
section은 기본값이 block인데 section을 가운데에 정렬할 수 없음(이미 꽉채워져있으니까) - 영역정렬이 아님, 글자 가운데 정렬임
inline-block에는 margin-left auto, margin-right auto 못씀
글자는 스스로 정렬할 수 없어 부모에게 말해서 정렬해야함
text-align의 기본값 : inherit
