반응형
display
1) inline: width와 height를 가질 수 없다.
2) inline-block: width와 height를 가질수 있고, element가 옆으로 오게한다.
단점: margin, padding을 주지않아도 요소간의 빈 공간이 자동으로 생긴다.
반응형 디자인을 반영하지 않기 때문에, 창크기가 다르면, 요소들이 다르게 보일 수 있다.
3) block: width와 height를 가질 수 있고, element가 아래로 온다.(각 요소옆에 아무것도 안온다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{ /* div 태그에 스타일 적용 */
background-color: teal; /*백그라운드 초록색 적용 */
width: 50px; /*너비(가로) 50 픽셀 */
height: d0px; /*높이(세로) 50 픽셀 */
}
.a {display: inline;} /* a 클래스는 display가 inline */
.b {display: inline;} /* b 클래스도 display가 inline */
.c {display: inline-block;} /* c 클래스는 display가 inline-block */
.d {display: block;} /* d 클래스는 display가 block */
</style>
</head>
<body>
<!-- inline은 width나 height를 가질 수 없어 아무것도 표시되지 않음 -->
<div class="a"></div>
<!-- inline이라 width나 height가 없지만 문자에 style 적용 -->
<div class="b">b</div>
<!-- inline-block은 요소가 옆으로오며, margin, padding 외 공백이 나온다. -->
<div class="c">c</div>
<!-- block은 한 줄을 다 차지해서 옆에 아무것도 안온다. -->
<div class="d">d</div>
</body>
</html>결과
반응형
'Front-End > CSS' 카테고리의 다른 글
| [CSS] 선택자(Selectors)와 조합(Combinators) (0) | 2020.10.15 |
|---|---|
| [CSS] States (active, focus, hover, visited, focus-within) (2) | 2020.10.14 |
| [CSS] position (static, fixed, relative, absolute) (0) | 2020.10.12 |
| [CSS] 가상 선택자(Pseudo selector) 개념, 예시 (0) | 2020.10.10 |
| [CSS] flexbox (display: flex) (0) | 2020.10.09 |