작성일자
카테고리 CSS/CSS기초

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;

}

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





티스토리 툴바