디스플레이(display)
display 알고 가기
1.사람이 태어날 때부터 머리카락과 눈알을 가지고 태어나는 것 처럼 태그도 기본적으로 너비, 높이, 배경색, 뭔지모를 display도 가지고 태어난다.
2. display는 사람의 성별처럼 정체성을 나타내는 속성이라고 생각하면 된다.
- block : 정체성을 가진 것들은 width가 기본값으로 작동할 때 100%로 작동한다.
ex) width: auto = 100%- auto = 100%는 위에 있는 태그 너비를 전부 가져오겠다는 의미를 가진다.
- div태그는 block이라는 정체성을 가지고 있다.
block정체성을 가진 태그들은 너비가 기본값(auto)일 때 100%로 작동하게 된다.
width: auto = 100%라는 의미는 위에 있는 엘리먼트 너비를 그대로 사용하겠다는 의미를 가지는데, 이 코드펜에서 div위에 엘리먼트는 body이고 body는 화면크기만 하기 때문에 div도 그대로 크기를 가져와서 화면 너비만큼 나오는 것이다.- display의 종류
none | contents | block | inline | inline-block | table | table-cell
**block과 inline 요소의 개념을 잡는 것은 html 마크업 요소에서 가장 중요하다
div 크기 원인 codepen
block의 특징
- bolck요소들은 크기가 아무리 작아도 한줄에 하나씩 배치된다.
- width가 기본값일때 즉 auto일때 100%로 작동한다.
- a, span, img, ::before, ::after, 텍스트관련 태그를 제외하곤 전부 block요소이다.
관련개념
- 100% -> 상위 엘리먼트만큼 크기를 가지겠다.
block 특징 codepen
inline의 특징
- 한 줄에 같이 배치된다.
- 브라우저에서 텍스트취급 당한다.
→ 상위엘리먼트 너비가 좁으면 줄바꿈된다.
→ 너비,높이 속성을 사용할 수 없다. - inline 요소 대표태그는 5가지 정도이고, 텍스트에 관련된 태그들은 대부분 inline요소이다.
→ a, span, img, ::before, ::after
inline 특징 codepen
block과 inline이 구분되어 있는 이유
- 레이아웃을 구성할 때 네이버 로그인창처럼 한 줄에 하나씩 배치되는 레이아웃도 있어야하고,
한 줄에 같이 배치되는 레이아웃도 있어야하기 때문에 구분되어있는 것이다.
1,2) div 태그안에 텍스트 넣어 사용한 block 형태의 display
3) block 한줄에 '아이디 찾기' , | , '비밀번호 찾기', |, '회원가입' 이 한줄로 표시
→ 한 줄에 같이 배치되는 레이아웃
inline-block 요소 특징
- 한 줄에 같이 배치된다.
- inline요소와 다르게 너비, 높이 커스텀이 가능하다.
- 브라우저에 텍스트취급 당한다.
- 너비가 기본값일때 즉, auto일 때 0으로 작동한다.
관련개념
- auto = 0 → 풍선처럼 안쪽요소크기에 따라서 크기를 가지겠다.
- heigth: 0; → 높이가 없다라는 의미를 가진다.
inline-block 요소 특징
정리
- block
- width : auto = 100%
- 한 줄에 "하나씩" 배치
- 너비, 높이 커스텀 "가능"
- 브라우저에서 "도형"취급
- inline
- width : auto = 0
- 한 줄에 "여러개" 배치
- 너비, 높이 커스텀 "불가능"
- 브라우저에서 "텍스트"취급
- inline-block
- width : auto = 0
- 한 줄에 "여러개" 배치
- 너비, 높이 커스텀 "가능"
- 브라우저에서 "텍스트"취급
이해해버려라!