-
기본 div, span 성질
- div element는 content없어도 css로 width, height, background-color를 주면 웹에 등장!
- span은 css로 꾸며줘도 content가 있어야만 화면에서 볼 수 있다.
-
div에 display:inline
div element에 display:inline을 하면 span처럼 inline element가 된다.
그래서 content가 없으면 화면에서 볼 수 없다.
- div에 display:inline-block;
div를 display:inline-block;으로 바꿔주면 화면 크기에 따라 상자 배열이 바뀐다.
화면 크기가 클 때는 저렇게 일렬로 있지만, 화면이 작아지면 뒤에 div 박스들이 아래줄로 내려간다.
-
기본 span 크기
span과 같은 inline 요소는 content의 길이에 따라 크기가 변한다.
- span에 display:inline-block;
그런데 이렇게 display를 inline-block으로 바꿔주면
content의 길이에 상관 없이 위에서 지정해준 width, height 크기만큼 박스가 생긴다.
-
div를 inline으로 span을 block으로
default로 block인 div에 inline을 적용해주면 span처럼
default로 inline인 span에 block을 적용해주면 div처럼!
강의 필기
'CSS > learned_it_today' 카테고리의 다른 글
nth-child Pseudo Selector (0) | 2020.07.01 |
---|---|
Targeted Selector (0) | 2020.07.01 |
Flexbox (0) | 2020.05.27 |
Position: static, relative, absolute, fixed, sticky (0) | 2020.05.27 |
CSS Buttons (0) | 2020.05.24 |