티스토리 뷰

[개발]프로그래밍/css3

[css3] display - 화면 배치 방법 결정

좋은 블로그 2021. 4. 22. 10:40
1. 개념
display - 화면 배치 방법 결정
display는 블록 요소와 인라인 요소의 서로 속성으로 변경할 수 있음
블록 요소 : 해당하는 태그를 사용했을 때 혼자 한 줄을 차지하는 요소
너비,마진,패딩을 이용해서 크기나 위치를 지정하려면 이 요소를 사용해야 함
<p>,<h1~6>,<ul>,<ol>,<div>,<blockquote>,<form>,<hr>,<table>,<fieldset>
인라인 요소 : 해당 태그를 사용할 때 줄을 차지않고 나머지 공간에 다른 태그가 올 수 있는 요소
<img>,<ojbect>,<br>,<sub>,<sup>,<span>,<input>,<textarea>,<label>,<button>
※ 자주 사용되는 속성

속성

설명

block

img,span 등과 같은 인라인 요소를 블록 요소로 지정

inline

p,hr 등과 같은 블록 요소를 인라인 요소로 지정

inline-block

inline으로만 너비,마진,패딩 등이 제대로 적용되지 않아
inline이면서도 블록 요소를 사용하는 것을 지정

none

화면에서 표시하지 않음
2. 태그
display
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<style>
li
{
padding : 20px ;
border : 1px solid #000 ;
}
</style>
<body>
1
<div>
<img src = "monitor.png" > <img src = "monitor.png" >
</div>
2
<div>
<img src = "monitor.png" style =' display : block ;' > <img src = "monitor.png" style =' display : block ;' >
</div>
3
<ul>
<li><img src = "monitor.png" ></li>
<li><img src = "monitor.png" ></li>
</ul>
4
<ul>
<li style =' display : inline ' > <img src = "monitor.png" ></li>
<li style =' display : inline ' > <img src = "monitor.png" ></li>
</ul>
5
<ul>
<li style =' display : inline-block ' > <img src = "monitor.png" ></li>
<li style =' display : inline-block ' > <img src = "monitor.png" ></li>
</ul>
</body>
</html>
결과 화면
display 사용 예제
코드 설명
1
img src = "monitor.png" ;
첫번째를 보게되면 div 요소는 한 줄을 차지하는 블록 요소이고 img는 인라인 요소입니다.
그래서 div들끼리는 한줄씩 차지하게 되고 특별한 값 설정이 없으면 이미지는 2개의 모니터가 붙어서 나오게 됩니다.
2
display : block ;
인라인 요소가 되는 img에 display:block를 설정하게 되면 한줄씩 차지하게 됩니다.
3
li img src = "monitor.png" ;
li는 블록 요소입니다.
하나의 블록 요소 안에 인라인 요소 한개가 들어가 있기에 한 줄을 다 차지하고 있습니다.
그리고 블록 요소는 패딩,마진, 너비와 같은 속성이 정확하게 적용이 되기 때문에 이미지 주변에 20px의 패딩이 있습니다.
4
li style = display : inline ;
블록요소인 li에 display:inline을 주었습니다.
모니터 이미지가 한줄로 보이는 것을 알 수 있습니다.
하지만 inline은 제대로 된 패딩 값을 정확하게 지정하지 못하고 있습니다.
5
li style = display : inline-block ;
4번에서의 정확하게 적용되지 않는 패딩을 적용하고자 inline-block으로 display를 지정합니다.
그러면 겉은 인라인 이지만 안은 block 요소가 되어 제대로 표현을 할 수 있습니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] border-width - 테두리 두께 지정  (0) 2021.04.26
[css3] border-style - 테두리 스타일 지정  (0) 2021.04.23
[css3] width,height - 박스 모델의 너비와 높이  (0) 2021.04.21
[css3] radial-gradient - 원형 그라데이션  (0) 2021.04.20
[css3] linear-gradient - 선형 그라데이션  (0) 2021.04.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday