[CSS] 02. CSS 핵심 (2)

Chapter 02.  display속성, 선택자

이번에는 자주 쓰는 display 속성인 블록과 인라인의 차이에 대해서 알아보고 기타 display 속성들과 함께 css 선택자를 정리한다.

 

 

---

Display 속성

 CSS에서 display속성은 화면에서 element들이 어떻게 보여지는지를 결정한다.

 우선 HTML의 요소들은 크게 블록(block)요소과 인라인(inline)요소으로 나눌 수 있다. <p>, <div>, <h1>~<h6>, <table>등의 블록 요소는 하나의 태그가 브라우저에서 좌우 공간을 다 차지하면서 독립적인 공간을 가지는 요소다. 따라서 블록 요소 아래에 다른 태그를 쓰면 다음 줄에 요소가 나타난다. 이와 달리 <a>, <span>, <img> 등의 인라인 요소는 하나의 태그가 브라우저에서 크기를 가질 수 있는 그 영역만 차지해 좌우로 다른 태그들이 나란히 존재할 수 있는 요소다. 즉, 라인(행)안에 존재하는 텍스트 같은 요소라고 보면 된다. 인라인 요소는 평소의 글을 쓰는 방향대로 하나씩 채워지다가 한줄이 꽉 차면 다음 줄로 넘어간다. 또한, 텍스트처럼 행동하기에 <img>같은 태그를 제외하고 너비(width)나 높이(height)처럼 크기를 지정해 줄 수 없으며 가로 여백만 설정해줄 수 있다. 가로 여백 설정 방법은 다양하지만 그중 font-size를 조절해주는 방법도 있다.

 

Inline요소와 block요소의 흐름

 이제 각 요소가 가지고 있는 기본적인 display속성이 어떻게 나타나는지, 그리고 display속성을 바꾸면 어떤 일이 일어나는지 확인해보자.

 

<!-- index.html -->

<div>
  <h1>안녕하세요</h1>
</div>
<p>반갑습니다</p>
<span>5월 5일이네요.</span>

 HTML파일에 간단히 <div>태그, <p>태그, <span>태그가 나란히 적힌 HTML코드를 입력했다.

결과를 보자.

 

index.html

 div, p, h1태그는 block속성이므로 한 좌우 공간 전체를 차지하며 inline속성인 span태그는 텍스트의 길이만큼의 공간만을 차지한다. 나는 지금 '반갑습니다'와 '5월 5일이네요'를 한줄에 출력하고 싶다. p태그가 한 줄 전체를 차지하므로 p태그의 display속성을 inline으로 바꿔보자

 

p {
    display: inline;
}

 

index.html

이처럼 p태그가 inline요소인 것처럼 적용된다.

 

CSS를 이용해 display를 설정하면 해당 요소가 가진 기본적인 display 속성을 바꿀 수 있다. display 속성은 크게 4가지가 있다.

• none : 요소를 화면에서 숨긴다
• block : 하나의 태그가 브라우저에서 좌우 공간을 다 차지하면서 독립적인 공간을 가지는 요소
• inline : 하나의 태그가 브라우저에서 크기를 가질 수 있는 그 영역만 차지해 좌우로 다른 태그들이 나란히 존재할 수 있는 요소
• inline-block : 기본적으로 inline속성을 가지지만 inline과 달리 크기를 지정해 줄 수 있다

 

inline-block 사용 예제를 보자.

 

<!-- index.html -->
<span id="A">AAAAAAAAAAAAAAA</span><span id="B">BBBBBBBBBBBBBBB</span><span id="C">CCCCCCCCCCCCCCC</span>

 

/* style.css */

* {
    font-size: 36px;
    font-weight: 700;
}

#A {
    background-color: darksalmon;
}

#B {
    background-color: springgreen;
    height: 100px;
}

#C {
    background-color: green;
}

 

index.html

 

위와 같이 span태그 3개를 만들고 각각 배경색을 지정해 줬다. id가 B인 태그에는 height: 100px로 주었는데도 적용이 되지 않았다. inline요소는 크기를 갖지 않기 때문이다. 그렇다면 id가 B인 태그에 inline-block값을 주면 어떻게 될까

 

index.html

 

위와 같이 inline요소처럼 좌에서 우로 태그의 순서를 유지한 채로 height: 100px 값을 가질 수 있는 요소가 만들어 졌다.

 

 

---

선택자

 

---

붙여쓰기

여러 조건을 동시에 만족하는 요소를 선택하고 싶을 때는 선택자를 붙여서 쓸 수 있다

 

<div class="container">
  <div class="content">
    <h1 id="galaxy" class="real movie-title">가디언즈 오브 갤럭시:Volume3</h1>
    <p>‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해…</p>
  </div>
</div>

 

• 아이디 + 클래스

#galaxy.movie-title

 

• 태그 + 아이디

h1#galaxy

 

• 클래스 + 클래스

.real.movie-title

 

• 태그 + 아이디 + 클래스 + 클래스

h1#galaxy.real.movie-title

 

위의 네 선택자는 모두 같은 '가디언즈 오브 갤럭시:Volume3'를 가리킨다.

 

---

자식 결합자(Child Combinator)

부모-자식 관계에서 특정 자식을 선택하고 싶을 때는 꺽쇠(>)를 이용한 자식 결합자를 이용한다

 

<div class="actors">
  <div class="actors-info">
    <ul class="actors-list">
      <li>
        제임스 건
      </li>
      <li>
        크리스 프랫
      </li>
      <li>
        조 샐다나
      </li>
    </ul>
  </div>
</div>

 

• 태그 > 태그

ul>li {
    color: blue;
}

ul태그의 자식 중에 li태그들이 모두 선택된다

 

• 클래스 > 태그

.actors-list>li {
    color: red;
}

actors-list클래스를 기준으로 자식 중에 li태그를 찾아 선택한다.

 

---

자손 결합자 (Descendant Combinator)

띄어쓰기로 선택자를 나열하면 자식뿐만 아니라 자손들을 선택할 수 있다.

 

<div class="container">
  <div class="content">
    <h1 id="galaxy" class="real movie-title">가디언즈 오브 갤럭시:Volume3</h1>
    <p>‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해…</p>
  </div>
  <div class="actors">
    <div class="actors-info">
      <ul class="actors-list">
        <li>
          제임스 건
        </li>
        <li>
          크리스 프랫
        </li>
        <li>
          조 샐다나
        </li>
      </ul>
    </div>
  </div>
</div>

 

 

• 클래스 아이디

.container #galaxy {
    color: red;
}

 

• 클래스 태그

.actors li {
    color: green;
}

 

 

 

---

가짜 클래스(Pseudo-class)

가상 클래스라고도 하며 요소의 상태를 선택해 속성을 줄 수 있다. 대표적으로 :hover(마우스를 올렸을 때), :active(클릭한 상태), visited(방문한 적이 있는 링크), focus(포커싱 됐을 때) 등이 있다.

 

 

li:hover {
    color: red;
}

li태그에 마우스를 올리면 빨간색이 된다.