문서의 이전 판입니다!
목차
CSS Display
- description : CSS Display Property, Block-level Elements, Inline Elements
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-15
Source of the article
The display Property
display속성은 레이아웃을 조절하는 가장 중요한 CSS 속성입니다.
display속성은 한 요소의 표시 여부와 표시 방법을 지정합니다.
모든 HTML 요소들은 타입에 따른 기본 display 값을 가지고 있습니다. 대부분의 요소들의 기본 display 값은 block 또는 inline입니다.
Block-level Elements
블록 레벨 요소는 항상 새로운 줄에서 시작하고 사용 가능한 화면의 전체 너비를 차지합니다.
블록 레벨 값을 가지는 요소들
- <div>
- <h1> ~ <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Elements
인라인 요소는 새로운 줄에서 시작하지 않고 필요한 만큼만 차지합니다.
인라인 값을 가지는 요소들
- <span>
- <a>
- <img>
Display: none;
display: none속성은 일반적으로 자바스크립트와 함께 사용되어 요소들을 삭제하고 다시 만들지 않고 숨기고 표시합니다.
<script>요소는 기본 값으로 display: none;을 가집니다.
Override The Default Display Value (기본 디스플레이 값 무시하기)
언급한 것처럼, 모든 요소에는 기본 디스플레이 값이 있습니다. 그러나 이것을 무시할 수 있습니다.
인라인 요소를 블록 요소로 또는 그 반대로 변경하는 것이, 해당 웹 페이지를 특정 방식으로 보이게 하고 웹 표준을 준수하는 데에 유용할 수 있습니다.
일반적인 예제는 가로 메뉴에 대해 인라인 <li> 요소들을 만드는 것입니다
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display</title> <style> li { display: inline; /* <li>는 블록요소이나 이 속성이 인라인요소로 변경해준다.*/ } /* 인라인 요소로 변경되어 한 라인에 링크 3개가 나타난다 */ </style> </head> <body> <p>Display a list of links as a horizontal menu:</p> <ul> <li><a href="https://www.w3schools.com/html/default.asp" target="_blank">HTML</a></li> <li><a href="https://www.w3schools.com/css/default.asp" target="_blank">CSS</a></li> <li><a href="https://www.w3schools.com/js/default.asp" target="_blank">Javascript</a></li> </ul> </body> </html>
Note: 한 요소의 디스플레이 속성을 설정하면 요소의 종류가 아니라 해당 요소의 표시 방법만 변경됩니다.
따라서 display: block속성을 가진 인라인 요소는 내부에 다른 블럭 요소를 가질 수 없습니다.
아래의 예제는 블럭 요소로서의 요소들을 표시합니다.
<file html>
<style>
span {
display: block;
}
</style>
</code>
====예제====
<file html>
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>inline element changed as block element</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>A display property with a value of "block" results in</span><span>a line break between the two elements</span>
</body>
</html>
</file>
