display 속성
display는 요소(element) 의 종류를 선택하는 속성이다.
html에서 요소는 한가지만 갖는다.
대부분의 요소는 inline 요소 혹은 block 요소를 가지고 있다
(그 외: inline, block, inline-block, flex, list-item none...)
inline display 특징
-다른 요소들과 같은 줄에 머무르려고 하는 성향
-가로의 길이는 필요한 만큼만 차지하는 성향
다음 요소들은 기본 display 값이 inline입니다.
<span>
<a>
<b>
<i>
<img>
<button>
block display 특징
-새로운 줄에 가려고 하는 성향
-가로의 길이를 최대한 많이 차지하려고 하는 성향
다음 요소들은 기본 display 값이 block입니다.
<div>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<p>
<nav>
<ul>
<li>
아래의 코드를 보자
style(css)를 통해 display 속성을 바꿀 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display class</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.inline {
display: inline;
}
.block {
display: block;
}
</style>
</head>
<body>
<!--block display-->
<div>
hello <p>world</p>
</div>
<!--inline display-->
<p>hello <i>world</i></p>
<!--display: inline을 통해 바뀜-->
<div>
hello <p class="inline">world</p>
</div>
<!--display: block 통해 바뀜-->
<p>hello <i class="block">world</i></p>
</body>
</html>
이코드의 결과물은 아래와 같다
hello
world
hello world
hello world
hello
world
Author And Source
이 문제에 관하여(display 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bjls00/Codeit1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)