가치투자자

[CSS] display 본문

Programming/HTML, CSS

[CSS] display

미주민 2023. 6. 3. 19:03
728x90
반응형

 display 속성 

브라우저에서 각 요소들을 어떻게 배치할지에 따라 디자인뿐만 아니라 사용성도 달라진다. 사용자들이 자주 찾는 기능들이 눈에 잘 띄는 곳에 깔끔하게 배치되어 있어야 편리하다고 느끼고 그 서비스를 더 자주 쓸 것이기 때문이다.

이와 관련하여 대표적으로 사용되는 css 속성인 display에 대해 살펴보고자 한다.

 

 1. display란? 

 display 는 레이아웃에서 요소들을 어떻게 보여줄지 결정해주는 프로퍼티(속성)다.

display 속성을 사용하기 위한 문법은 다음과 같다.

display: 속성값;

 

모든 요소는 기본적으로 display 속성을 가지고 있으며, 각 요소들이 가진 기본 속성값에 따라 배치가 된다.

display의 대표적 속성값에는 다음과 같은 것이 있다.

 

  • block : block 레벨 요소로 설정
  • inline : inline 레벨 요소로 설정
  • inline-block : inline-blick 레벨 요소로 설정
  • none : 요소를 보이지 않게 설정

어떤 속성값을 가지냐에 따라 배치가 달라지므로, 속성값에 대해 자세히 알아보자.

 

728x90

 

 2. display-outside 

레이아웃은 요소들 간의 관계다. A라는 요소가 있을 때, A의 주위에 어떤 요소를 둘지, 또 A의 내부 요소들은 어떻게 배치할지에 대한 이야기다. 이때 A의 바깥, 즉 주위에 어떻게 다른 요소들을 어떻게 배치할지에 대해 먼저 살펴보자.

 

2-1. block 레벨 요소

 block 레벨 요소 는 block 속성을 가지는 요소로, 해당 요소가 있는 줄의 모든 너비를 차지한다.

이러한 block 레벨 요소의 특징은 다음과 같다.

 

  • 항상 새로운 줄(라인)에 배치된다.

  • 기본적으로 width = 100% 속성을 가진다.

  • width, height, margin, padding 속성을 지정할 수 있다.

  • block 레벨 요소 내에 inline 레발 요소를 포함할 수 있다.
  • block 속성을 기본값으로 가지는 요소

    : div 태그, h1 ~ h6 태그, p 태그, ol 태그, ul 태그, li 태그, hr 태그, table 태그, form 태그

 

아래의 예시를 보면, 각 block 레벨 요소가 각 줄의 너비를 꽉 채우고 있는 것을 알 수 있다.

 

예시>

<head>
  <style>
    div:nth-child(odd) { background-color: #6ADAFD }
    div:nth-child(even) { background-color: #FFEEC2 }
  </style>
</head>
<body>
  <div>block1</div>
  <div>block2</div>
  <div>block3</div>
  <div>block4</div>
</body>

 

출력 결과>

block1
block2
block3
block4

 

 

2-2. inline 레벨 요소

 inline 레벨 요소 는 inline 속성을 가지는 요소로, 해당 내용의 영역만 차지한다.

이러한 inline 레벨 요소의 특징은 다음과 같다.

 

  • 요소들이 한 줄에 나란히 배치된다.

  • content(내용)의 너비만큼만 width를 차지한다.

  • width, height, margin-top, margin-bottom 속성을 지정할 수 없다.

    - content의 크기만큼 공간을 차지하기 때문

    - 상, 하 여백은 line-height로 지정한다

  • inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, space가 4px로 자동 지정된다.

  • inline 속성을 기본값으로 가지는 요소

    : span 태그, a 태그, strong 태그, img 태그, br 태그, input 태그, select 태그, textarea 태그, button 태그

 

아래의 예시를 보면, 각 inline 레벨 요소가 각 내용의 영역과 padding만큼만 차지하고 있는 것을 알 수 있다.

 

예시>

<head>
  <style>
    span {
      padding: 10px;
      background-color: #FC6969;
      color: white;
    }
  </style>
</head>
<body>
  <span>Inline1</span>
  <span>Inline2</span>
  <span>Inline3</span>
</body>

 

출력 결과>

Inline1 Inline2 Inline3

 

2-3. inline-block 레벨 요소

 inline-block 레벨 요소 는 block과 inline 속성을 모두 가지는 요소로, inline 레벨 요소처럼 한 줄에 나열되는 동시에 width, height, margin 속성을 지정할 수 있다.

이러한 inline-block 레벨 요소의 특징은 다음과 같다.

 

  • inline 레벨 요소처럼 한 줄에 배치할 수 있다.

  • block 레벨 요소처럼 width, height, margin, padding 속성을 지정할 수 있다.

    - 상, 하 여백은 margin과 line-height 모두를 통해 설정할 수 있다
  • content의 너비만큼 width를 차지한다.

  • inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, space가 4px로 자동 지정된다.

 

예시>

<head>
  <style>
    #parent {
      padding: 10px;
      background-color: #FFEEC2;
    }
    #children {
      display: inline-block;
      padding: 10px;
      width: 120px;
      height: 30px;
      background-color: #6ADAFD;
      color: white;
    }
  </style>
</head>
<body>
  <h3 id="parent">
    <div id="children">children1</div>
    <div id="children">children2</div>
    <div id="children">children3</div>
  </h3>
</body>

 

출력 결과>

children1
children2
children3

 

2-4. none

 none 속성값 은 해당 요소를 감출 때 사용한다.

예를 들어, 관리자만 볼 수 있는 버튼은 일반인이 로그인이 로그인 했을 때 보이지 않도록 설정해줄 수 있다.

 

아래 예시를 보면, 2번째 요소만 보이지 않는다.

 

예시>

<head>
  <style>
    span {
      padding: 10px;
      background-color: #FC6969;
      color: white;
    }
    #none {
      display: none;
    }
  </style>
</head>
<body>
  <span>Inline1</span>
  <span id="none">Inline2</span>
  <span>Inline3</span>
</body>

 

출력 결과>

Inline1 Inline2 Inline3

 

반응형

 

 3. display-inside 

어떤 요소의 내부 요소들을 어떻게 배치할지도 결정할 수 있다.

여기에는 flex, grid, table 등이 있는데, 여기서는 간단하게 살펴보고 각각에 대해선 새로운 글에서 자세히 살펴보겠다.

 

3-1. flex

 flex 는 이름처럼 내부 요소들의 사이즈가 불명확하거나 화면이 동적으로 변할 때 유연하게(flexible) 자식 요소들의 사이즈를 맞춰주는 속성값으로, flexible box 또는 flexblox라고 불리기도 한다.

기본적으로 block 속성을 가지고 있다. flex 속성을 적용하면 자식 요소들은 inline으로 배치된다.

 

예시>

flex 속성이 적용된 자식요소1
flex 속성이 적용된 자식요소2

 

3-2. grid

 grid 는 격자형 그리드 구조를 만들어주는 속성값이다. 바둑판처럼 행과 열을 가진 구조로 구성할 수 있고, 각 내부 요소들(cell)을 합칠 수도 있다. 기본적으로 block 속성을 가지고 있다.

 

예시>

자식요소1
자식요소2
자식요소3
자식요소4
자식요소5

 

3-3. table

 table 은 table 태그와 유사한 레이아웃을 css로 구현할 수 있도록 도와주는 속성값이다.

고정된 행과 열을 가진 테이블과 달리 반응형으로 행과 열을 구성할 수 있기 때문에 좀 더 유연한 테이블을 만들 수 있다.

기본적으로 block 속성을 가지고 있다.

 

예시>

자식요소1
자식요소2
자식요소3
자식요소4
자식요소5
자식요소6

 

 

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

 

References

 

 

728x90
반응형

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML] 시멘틱 태그(semantic tag)란?  (2) 2023.06.17
[CSS] position  (0) 2023.06.04
[CSS] 선택자 : 가상 클래스 & 가상 요소  (0) 2023.04.21
[CSS] 선택자  (1) 2023.04.19
[CSS] Flexbox 레이아웃  (0) 2023.04.17
'Programming/HTML, CSS' Related Articles more