wiki:css:css_note:css_display
문서의 이전 판입니다!
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
인라인 요소는 새로운 줄에서 시작하지 않고 필요한 만큼만 차지합니다.
인라인 값을 가지는 요소들
- * <a> * <img>
======Display: none; ======display: none속성은 일반적응로 자바스크립트와 함께 사용되어 요소들을 삭제하고 다시 만들지 않고 숨기고 표시합니다.
<script>요소는 기본 값으로display: none;을 가집니다.
======Override The Default Display Value (기본 디스플레이 값 무시하기)====== 언급한 것처럼, 모든 요소에는 기본 디스플레이 값이 있습니다. 그러나 이것을 무시할 수 있습니다.
인라인 요소를 블록 요소로 또는 그 반대로 변경하는 것이 해당 웹 페이지를 특정 방식으로 보이게 하고 웹 표준을 준수하는 데에 유용할 수 있습니다.
일반적인 예제는 가로 메뉴에 대해 인라인 <li> 요소들을 만드는 것입니다:
====예제==== <code 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>Display</title> <style> li { display: inline; } </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> </code>
Note: 한 요소의 디스플레이 속성을 설정하면 요소의 종류가 아니라 해당 요소의 표시 방법만 변경됩니다.
따라서display: block속성을 가진 인라인 요소는 내부에 다른 블럭 요소를 가질 수 없습니다.
아래의 예제는 블럭 요소로서의 요소들을 표시합니다.
====예제==== <code 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> A display property with a value of “block” results ina line break between the two elements </body> </html> </code>
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_display.1615767393.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
