display 속성
- 웹페이지 상에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치 되는지를 결정하는 속성.
-display 속성이 inline으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됨.
예) <span> 태그, <a> 태그
-display 속성이 block으로 지정된 요소는 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지함.
예) <div> 태그, <p> 태그, <hn> 태그
-display 속성이 inline-block으로 지정된 요소는 한 줄에 다른 요소들과 나란히 배치됨.
inline에선 사용이 불가능한 width, height, margin, padding 속성의 상하 간격 지정이 가능해짐.
https://seungwoohong.tistory.com/23
[CSS] display - block과 inline 그리고 inline-block
안녕하세요. 오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다. 먼저 display property에서 간단히 설명하면 display는 화면이 렌더링..
seungwoohong.tistory.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
width: 100%; /* 가로폭 */
height: 50px; /* 세로폭 */
background-color: #D4F4FA;
list-style-type: none; /* 점을 제거하는 속성 */
}
ul li a {
color: #5D5D5D; /* a 태그의 글자(텍스트) 글자 색상 */
text-decoration: none; /* a 태그의 글자 밑에 있는 밑줄 제거 */
}
ul li {
display: inline-block;
margin: 10px 100px;
padding: 5px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">사업영역</a></li>
<li><a href="#">제품문의</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</body>
</html>
inline 요소이므로 한 줄로 배치
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.block img {
display: block;
}
</style>
</head>
<body>
<div class="block">
<img src="images/car1.gif">
<img src="images/car1.gif">
<img src="images/car1.gif">
</div>
<div>
<img src="images/car1.gif" width="250">
<img src="images/car1.gif" width="250">
<img src="images/car1.gif" width="250">
</div>
</body>
</html>
위 이미지 세개는 block 설정으로 지정하여 한줄에 하나씩,
하래 세 이미지는 inline 속성이므로 한줄에 다 들어간 것을 볼 수 있다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] shadow 속성 (text-shadow, box-shadow) (0) | 2021.10.31 |
|---|---|
| [CSS] Border 속성 (+border-radius 속성) (0) | 2021.10.31 |
| [CSS] margin, padding (CSS에서의 여백) (0) | 2021.10.29 |
| [CSS] 폰트 지정 (0) | 2021.10.27 |
| [CSS] CSS 특징과 기본 개념, CSS 스타일 지정 방법 (0) | 2021.10.27 |
댓글