HTML/CSS 기초 - 잘 안쓰지만 알아두면 편리한 CSS 선택자 - 1. 이웃 선택자( + :Adjacent Selector, Adjacent Sibling Selector)

CSS를 사용하면서 되도록이면 많은 선택자의 기능을 알아두면 편리하게 디자인할 수 있습니다. 어떤 요소에 대해서 색다른 효과를 주려고 하는데 선택자를 삽입할 수 없다거나 html은 건드리기는 싫고 CSS만으로 스타일 하고자 하는 경우 이런 선택자를  알아두면 아주 편리합니다. 이번 글에서는 처음 CSS를 배우는 분들은 생소하지만 미리 알아두면 편리한 선택자들에 대해 알아보겠습니다.

CSS-selectors.zip

첨부파일의 start.html을 열면 다음과 같이 돼있습니다. 모두 태그로만 돼있고 아이디나 클래스 선택자를 사용하지 않았습니다.

<div>1</div>
<p>2</p>
<div>3</div>
<div>4</div>
<p>5</p>
<div>6</div>

<ul>
  <li>
    <figure>
      <img src="smartphone.png" alt="" title="스마트폰">
      <figcaption></figcaption>  
    </figure>
  </li>
  <li>
    <figure>
      <img src="smartphone.jpg" alt="스마트폰">
      <figcaption></figcaption>  
    </figure>
  </li>
  <li>
    <figure>
      <img src="smartphone.gif" alt="스마트폰">
      <figcaption></figcaption>  
    </figure>
  </li>
</ul>

 스타일시트는 기본적인 레이아웃만 돼있습니다.

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Nanum Gothic", Arial, sans-serif;
  background-color: #f2f2f2;
  color: #333333;
  width: 960px;
  margin: 30px auto;
}
div, p {
  height: 30px;
  margin: 10px;
  border:1px solid #ccc;
}
img {
  width:300px;
}
ul {
  list-style: none;
}
li {
  float: left;
}
figure {
  position: relative;
}

그림으로 보면 다음과 같습니다.

1. 이웃 선택자( + :Adjacent Selector, Adjacent Sibling Selector)

영어 이름이 이웃 선택자인데 다른 이름으로 이웃 형제 선택자라고도 합니다. 이것은 서로 이웃한 형제 요소 중에서 바로 뒤에 있는 요소를 선택할 때 사용합니다. 즉 div + p 처럼 돼있다면 p가 선택되는 것이죠. 아래에서 예를 들어보겠습니다. 스타일시트에 다음과 같이 입력하면 div 태그 다음에 있는 p 태그가 선택됩니다. 그래서 배경색이 빨간색으로 나타납니다. div과 p는 서도 대등한 관계에 있는 형제요소입니다.

div + p {
  background: red;
}

실제로 웹디자인에서 어떻게 사용하는지 알아보기 위해 이번에는 img 태그와 형제요소인 figcaption을 연결시켰습니다. 그러면서 이 요소에 배경 이미지를 삽입했고 배치를 위한 스타일시트를 설정했습니다.

img + figcaption {
  background: url(new.png);
  width:141px;
  height:140px; 
  position: absolute;
  top: -15px;
  left:-15px;
}

모든 스마트폰 이미지에 New라는 캡션 이미지가 나타납니다.

그런데 어느 하나의 스마트 폰 이미지가 없다면 어떻게 될까요. 아래에서 이미지 태그를 제거했지만 <figcaption>은 그대로 존재합니다. 정상대로라면 캡션이미지가 나타나야하지만 이웃 선택자인 "+" 를 사용하므로써 캡션 이미지도 나타나지 않습니다. 즉 캡션 이미지는 스마트폰 이미지가 존재해야 나타나는 것입니다.

<li>
  <figure>
    
    <figcaption></figcaption>  
  </figure>
</li>

만일 이웃 선택자를 사용하지 않고 다음과 같이 figcaption 만 사용했다면 스마트폰 이미지가 없음에도 캡션이미지가 나타납니다.

figcaption {
  background: url(new.png);
  width:141px;
  height:140px; 
  position: absolute;
  top: -15px;
  left:-15px;
}

이번에는 어느 하나의 figcaption 에 class="new"라는 선택자를 삽입하고 스타일시트에도 클래스 선택자를 추가했습니다.

<li>
  <figure>
    <img src="smartphone.gif" alt="스마트폰">
    <figcaption class="new"></figcaption>  
  </figure>
</li>

img + figcaption.new {
  background: url(new.png);
  width:141px;
  height:140px; 
  position: absolute;
  top: -15px;
  left:-15px;
}

그러면 특정 선택자가 들어간 스마트폰 이미지에만 캡션 이미지가 나타납니다. 이것이 원래 의도한 것이었습니다. 특정 상품에 캡션 이미지가 나타나도록 하고 이미지가 없는 경우는 캡션이미지도 나타나지 않는 것이죠.