CSS Layout - The display Property

The display property is the most important CSS property for controlling layout.

 

display 속성은 layout을 제어하는데 가장 중요한 css 속성이다.

 

 

 

The display Property

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

 

display 속성은 요소가 어떻게 보여지는데 명시한다.

 

모든 html 요소는 요소의 타입에 따라서 기본적인 display 값을 가진다.

대부분의 요소들의 기본적인 display value는 검정색이거나, inline이다.

 

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

 

block-level 요소는 항상 새로운 줄로 시작하고, 이용가능한 전체의널이를 구성한다.

(이것이 할수 있는만큼 왼쪽과 오른쪽으로 쭉 뻣는)

 

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

 

인라인 요소

인라인요소는 새로운 줄로 시작하지 않고, 필요한 만큼만 넓이를 차지한다.

 

이것은 단락안에 span 인라인 요소이다.

인라인 요소의 예

 

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

The <script> element uses display: none; as default. 

 

displaty: none; 란건 일번적으로 새로 만들거나, 지우는 것 없이 요소를 숨기거나 보여주기 위해 자바스크립트로 사용되어진다.

만일 너가 이것이 어떻게 저장되어지는지 알고 싶다면, 마지막 페이지의 예시를 봐라?

 

<script>요소는 기본적으로 display:none을 사용한다.

 

 

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

 

기본적인 display 값 덮어쓰기

 

언급했다싶이, 모든 요소는 기본적인 display 값을 가진다. 그러나, 너는 이것을 덮어쓸 수 있다.

inline 요소를 block요소로 바꾸거나, vice versa 요소로 바꾸는 것은 한페이지의 외관을 특별하게 만드는데 유용하다.

그리고 여전히 웹의 기준을 따른다.

인라인 요소인 <li> 를 수평적인 menus로 바꾸는 일반적인 예이다.

 

 

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

 

오직 하나의 요소만 display 속성을 설정하는 것은 그 요소를 어떻게 보여줄지 바꾸는 것이지, 요소의 종류를 바꾸는 것이 아니다. 그래서 display:block; 를 가진 inline 요소는 내부의 다른 block 요소를 가지는 것을 허용하지 않는다.

 

Hide an Element - display:none or visibility:hidden?

 

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:

 

display 속성을 none으로 설정함으로써 요소를 숨기는 것은 가능하다.

요소는 숨겨질 것이고, 페이지는 요소가 거기에 없는 것처럼 보여질 것이다.

 

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

 

visibility:hidden; 속성 도한 요소를 숨긴다.

하지만, 요소는 여전히 그 전처럼 같은 공간을 차지할 것이다. 요소는 숨겨졌지만, 여전히 layout에 영향을 미치고 있다.