시에스에스 속성: 표시(display)

시에스에스 문법에서 표시 속성은 은근히 어렵다.

시에스에스에서 표시 속성(display property)은 요소를 블록이나 인라인 요소로 처리할 것인가와 자식 요소에 적용되는 배열의 흐름(flow layout), 격자(grid) 또는 변동(flex)을 정해준다.

요소에 따라 기본이 되는 배열의 흐름이 정해져 있다. 배열의 흐름은 인라인과 블록으로 나눌 수 있는데 인라인은 왼쪽에서 오른쪽으로, 블록은 위에서 아래로 배열된다. 스팬(span)은 인라인이 기본이고 디아이브이(div)는 블록이 기본이다. 스팬을 블록으로 또는 디아이브이를 스팬처럼 인라인으로 흐르게 하려면 시에스에스로 보임 속성을 따로 정해 주어야 한다. 

요소 안에 요소가 있을 때 표시 속성은 안쪽과 바깥쪽 유형을 정할 수 있다. 외부 유형으로 요소가 참여하는 배열의 흐름을 정해주고 내부 유형으로 자식 요소의 배열을 정해준다. 표시 속성의 어떤 값을 선언하면 정의된 개별 설명서에 따라 모든 것이 결정된다. 예를 들어 display : flex를 선언하면 일어나는 세부 사항은 시에스에스 가변 박스(CSS Flexible Box)의 설명서에 정의되어 있다.

문법

표시 속성은 여섯 가지 범주 안에 짝지워져 있는 열쇳말로 정해진다.

.container { display: [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; }

외부 표시 유형

<display-outside> 이들 열쇳말은 요소가 외부 배열의 흐름에서 하는 역할을 정해준다.

외부 표시 유형<display-outside>에 쓰이는 값:

블록(block)

블록을 선언하면 보통 흐름 안에서 요소 앞과 뒤에 줄바꿈을 넣어서 블록 요소 박스를 만든다.

인라인(inline)

인라인을 선언하면 요소는 앞이나 뒤에 줄바꿈을 만들지 않고 한줄로 보이게 만든다.

런-인(run-in)

런-인은 이어지는 형제 요소에 따라 인라인 또는 블록이 정해진다. 런-인 상자에 블록 상자가 포함되어 있다면 블록 박스와 같다. 블록 박스가 런-인 박스에 뒤따라 온다면 런-인 박스는 블록 박스의 첫 번째 인라인 박스가 된다. 인라인 상자가 뒤따르면 런-인 박스는 블록 박스가 된다.

내부 표시 유형

<display-inside> 이러한 키워드는 요소의 내부 표시 유형을 지정하며, 이는 해당 콘텐츠가 배치되는 서식 맥락의 유형을 정의한다. (대체되지 않은 요소라고 가정).

내부 표시 유형<display-inside>에 쓰는 값:

흐름(flow)

요소는 쓰인 흐름 배열에 따라 보여 준다.(블록과 인라인 배열) 외부 표시 유형이 인라인이나 런-인이고 블록이나 인라인 서식인 내용이면 인라인 상자를 생성한다. 다른 경우라면 블록 상자를 생성한다.

그 자신이 블록이나 인라인 서식 맥락에 참여하는가에 따라 위치(position), 띄움(flot), 넘침과 같은 다른 속성 값은 해당 내용의 속성인 부모 서식 맥락 안에서 새로운 블록 서식 맥락이 정해진다. 

흐름-뿌리(flow-root)

서식 뿌리가 놓여 있는 자리에서 별도로 정의되는 새로운 블록 서식 맥락을 따르는 블록 요소를 만든다.

목록 항목(List Item)

<display-listitem> 요소는 콘텐츠에 대한 블록 상자와 별도의 목록 항목 인라인 상자를 생성합니다.

목록 항목의 값은 요소를 목록 항목처럼 행동하게 만든다. 이것은 목록 스타일형(list-style-type)과 목록 스타일 위치(list-style-position)와 함께 쓰인다. 또한 보임-바깥 열쇳말 <display-outside>과  흐름 또는 흐름-뿌리를 정하는 보임-안쪽 열쇳말 <display-inside>과 결합할 수 있다.

물려 받은 표시(legacy)

<display-legacy> 시에스에스 2는 동일한 배열 모드의 블록-수준 및 인라인-수준을 위해 별도의 키워드가 필요한 표시 속성을 정해주는 단일 키워드 구문을 사용했다.

유산 표시<display-legacy>에 쓰는 값:

인라인 블록(inline-block)

요소는 단일 인라인 상자처럼 둘러싼 내용과 함꼐 흐르는 블록 요소 상자를 생성한다. 링크(a:) 목록 항목(list-item) 이나 스팬(span)은 여백(padding, margin)을 따로 정해주지 못하지만 인라인 블록을 지정해 주면 지정해 줄 수 있다. 

이것은 인라인 흐름-뿌리(inline flow-root)와 동일하다.

인라인 표(inline-table)

이것은 인라인-표와 동일하다.

inline-flex

인라인-가변(flex)과 동일하다.

inline-grid

인라인 격자와 동일하다.

실전 연습

쉽게 옮긴다고 옮겼으나 처음 보는 이가 제대로 이해할 수 있을까 의문이다. 실제로 연습을 해보자.

먼저 티스토리에서는 치환자에 따라 카테고리가 아래와 같이 자동으로 생성된다.

<div class="category">
  <ul class="tt_category">
    <li class=""><a class="link_tit" href="/category">목록</a>
         <ul class="category_list">
            <li class=""><a class="link_item" href="/category/1">수학 이야기 </a>
            <ul class="sub_category_list">
                <li class=""><a class="link_sub_item" href="/category/1-1">미적분</a></li>
                <li class=""><a class="link_sub_item" href="/category/1-2">기하</a></li>
                <li class=""><a class="link_sub_item" href="/category/1-3">확률/통계 </a></li>
          </ul><!--sub_category_list-->
    </li><!--ul class=""-->
</div>

안쪽과 바깥 여백도 자동으로 정해진다. 이제 이것을 꾸며 보기로 하자. 구조를 먼저 살펴 보자. 

범주 영역 <div class="category"> 안에 순서 없는 목록<ul class="tt_category">이 있다. 또 그 안에 순서 없는 목록 <ul class="category_list">이 있고 다시 그 안에 <ul class="sub_category_list">가 들어 있는 구조다.

많이 밋밋하다. 이제 꾸미기를 해보자.

 .tt_category {
    display: block;
}

.tt_category a {
    text-decoration: none;
    display: block;
}

.link_tit {
    color: #000;
    margin: 0px;
    font-family: Noto serif KR;
    border-bottom: 1px solid #fafbfc;
}

.tt_category ul li {
    list-style: none;
}

.category_list li a {
    color: #000;
    border-bottom: 1px solid #fafbfc;
    margin: 0px;
    font-family: Noto sans KR;
}

.tt_category a:hover {
    background-color: #000;
    color: #fff;
}

.sub_category_list li a {
    color: #666;
    font-family: Noto Sans KR;
}
.tt_category {
  width: 250px;
  border-bottom: 1px solid #ddd;
  padding: 0px;
  background: #fafafa;
     
}
.category a{
  text-decoration: none;
}
ul .category_list , .sub_category_list {
   list-style: none;
   width: 100%;
   margin: 0px;
   padding: 0px;
}

.sub_category_list li a:before {
  content: "*";
  display: inline-block;
  margin-right: 10px;
  padding-left: 20px;
  vertical-align: middle;
}

.tt_category li{
   list-style: none;
}

.link_tit, .category_list li a, .sub_category_list li a{
        font: 1.0em 'Noto Sans KR', sans-serif;
        color: #333;
        border-top: 1px solid #ddd;
        padding: 7px 20px;
        margin: 0px;
        display: block;
    }

.sub_category_list li a{
        color: #666;
    }

.tt_category a:hover {
        background-color: #333;
        color: #fff;
    }

See the Pen category by 박영호 (@lyrsqwja) on CodePen.

나름대로 보기 좋다.

 

아래 링크를 참고하여 더 자세한 것을 공부하자.

developer.mozilla.org/en-US/docs/Web/CSS/display

display - CSS: Cascading Style Sheets | MDN