CSS에서 가장 중요하고 가장 많이 실수하는 부분이라고 하는 display 속성에 대하여 알아보자!
① inline → span, a, em, br, b, strong, mark, video
<style>
span {
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
</style>
<span>SPAN</span>
- 전후 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
(한줄에 여러 개 배치)
** width와 height 속성을 가질 수 없다
** 상하 마진을 가질 수 없다 (but 패딩은 가능)
② block → div, table, header, nav, footer, section, article, aside, p, bolockquote, ul, ol, li, td, th, form, hr, h1~h6
<style>
div {
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
</style>
<h1>H1 hello</h1>
<div>DIV</div>
<p>Page</p>
- 한줄에 한개만 배치가 된다
- 기본 너비값은 100% (100%일 경우엔 굳이 witdh: 100%를 할 필요가 없다!!)
- 크기값을 가질 수 있다
- 상하좌우 마진이 있다(패딩 가능)
③ inline-block → img, input, button, font-awesome
<style>
span {
display: inline-block;
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
</style>
<a>hello</a>
<span>SPAN</span>
<em>EM</em>
- 한줄에 여러개 배치가 된다
- 기본 너비값은 컨텐츠의 너비값이다
- 크기값을 가질 수 있다
- 상하좌우 마진이 있다(패딩 가능)
** display: inline-block으로 지정해주어야 한다
* inline-block을 이용하면 여러개의 엘리먼트를 한줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다!
오늘은 display속성에 대해 알아봤다!
다른 건 몰라도 display 속성은 꼭 외우고 사용하면 실수가 없을 것이다!
헷갈리겠지만
display: inline은 텍스트 처럼
display: block은 쌓이는 상차처럼 생각하면 더 쉽다!!
'웹 > CSS' 카테고리의 다른 글
[코딩 공부_24] CSS Selector, 가상 셀렉터 (0) | 2021.03.09 |
---|---|
[코딩 공부_23] CSS, 복합 셀렉터에 대해 알아보자 (0) | 2021.03.08 |
[코딩 공부_21] CSS, 폰트 적용 3가지 방법 (0) | 2021.03.08 |
[코딩 공부_20] CSS, 절대단위와 상대단위 (0) | 2021.03.07 |
[코딩 공부_19] CSS, 글자에 적용하는 스타일들 (0) | 2021.03.05 |
댓글