CSS(SCSS) - Display(출력 특성)

1) Display

• 요소의 화면 출력 특성을 지정하는 것을 말한다. 즉, 결과적으로 어떻게 보여지는지에 대한 특성이라는 뜻이다.

display 전체 기본 값)

• block : Box(상자 : 레이아웃) 요소 (예 : div)
• inline : 글자(text) 요소 (예 : span)
• inline-block : 글자 + 상자 요소
• flex : 플렉스 박스(1차원 레이아웃)
• grid : 그리드(2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐
• 기타 : table, table-row, table-cell

각 요소에 이미 지정되어 있는 값)

• block : Box(상자 : 레이아웃) 요소 : 블럭(block) 요소는 가로, 세로 값을 가질 수 있다.
• inline : 글자(text) 요소
• inline-block : 글자 + 상자 요소

따로 지정해서 사용하는 값)

• flex : 플렉스 박스(1차원 레이아웃)
• grid : 그리드(2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐

Test Code

1) HTML 에서 span 태그(인라인 요소)의 클래스 선택자인 helloText에 가로 너비를 지정해주려고 한다. 이때, 사용해야 하는 속성과 값은 무엇인가?

.helloText {
  display: block;
  width: 120px;
  height: 30px;
  background-color: royalblue;
  color: white;
  font-size: 20px;
}

• 해설 : span 태그는 block 요소가 아닌 인라인 요소이기 때문에 별도로 가로 너비를 지정해줄 수 없지만, display 속성에 block을 넣어주면, span 태그와 같은 인라인 요소 태그들에도 인위적으로 가로 너비를 지정해줘서 사용할 수 있다.

결과 값)

• 다음과 같이 사진에 이런 결과가 나왔다. 그 이유는 display 속성의 block 요소를 사용했고 width를 120px로 설정했더니 a 태그를 포함한 span 태그와 같은 인라인 요소에도 가로 너비를 지정해줄 수 있게 된것이다.