[WebPage] 2. CSS 선택자(Selector) - 웹 페이지 제작 강좌

2-2-2. CSS 선택자(Selector)

 - CSS 선택자는 CSS를 사용함에 있어 매우 중요한 요소입니다. 

 - 만약 페이지 상의 요소를 타겟으로 삼는 선택자가 없다면 요소의 CSS 속성을 수정하는 유일한 방법은 style 속성을 이용해 스타일을 인라인으로 선언해야합니다.

 

 1. 선택자 기초 

  - 선택자의 구조는 아래와 같습니다.

   

 - 선택자(Selector)로 H1

 - 선택자의 선언부(Declaration)는 여러 개 일 수 있습니다(위 예제에선 2개의 선언부)

 - 선언부은 속성(Property)과 값(Value)으로 구성되어 있습니다.

 2. 타입 선택자(Type Selector)

  - 처음 알아 볼 선택자는 타입 선택자 입니다. 

  - 특정 태그 명을 가진 엘리먼트 전체를 제어하기 위해 사용합니다. CSS 선택자에서는 태그의 이름을 사용하게 합니다.

  - 아래와 같이 사용됩니다.

  태그 {속성: 값; }

  실습을 위해 저번 장에서 작성한 FirstPage.html 내에 아래와 같은 코드를 입력합니다.

  (기존의 비어있는 div 태그와 nav 태그는 지우셔도 됩니다)

<div class="box1">box1</div>
<h1>Heading</h1>
 

  실행을 해서 결과를 확인합니다.

  css 적용 없이 실행된 결과입니다.

  이제 적용을 위해 FIrstStyle.css 에 아래 코드를 입력합니다.

  

div {
    background-color: #149BDF;
}
 

  다시 실행하여 결과를 확인합니다.

  위 결과가 좀 이상하죠? 기존 template가 <div> 요소로 묶어놔서 위와 같은 결과가 나오게 되었습니다.

  아래 보이는 2번, 17번 라인의 div 태그를 제거해주세요.

  

 
<div>
            <header>
                <h1>FirstPage</h1>
            </header>
 
            <div class="box1">
                box1
            </div>
            <h1>Heading</h1>
 
            <footer>
                <p>
                    &copy; Copyright  by Yeonsu
                </p>
            </footer>
</div>

  그러고 나서 다시 실행하시면 아래와 같은 결과가 나옵니다.

  div 태그에만 배경 색이 적용된 것을 확인 할 수 있습니다.

 3. 클래스 선택자(Class Selector)

  - 클래스 선택자는 특정 클래스 명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다. CSS 선택자로 클래스의 이름을 사용하게 됩니다.

  - 클래스 선택자 사용법은 '.' 뒤에 클래스 이름을 쓰고, 선언부를 구성하면 됩니다.

  .클래스이름 {속성: 값; }

 클래스 선택자를 실습하기 위해, 서로 다른 클래스 명을 가진 두 개의 <div> 태그를 FirstPage.html에 작성합니다.

 
<div class="box1">box1</div>
<div class="box2">box2</div>
 

 

  

  그리고 이전의 FirstStyle.css에 적용한 코드는 지운 뒤, 결과를 확인합니다.

  일반적인 결과가 나오게 되고, FirstStyle.css에 아래 코드를 적용한 뒤 결과를 확인합니다.

 

.box1{
    background-color: #149bdf;
}
 

 

  위 결과에서 알 수 있듯이, 같은 div 태그지만 클래스 선택자로 구분하여 다른 스타일을 적용 할 수 있습니다.

 4. 아이디 선택자(ID Selector)

  - 아이디 선택자는 특정 아이디 명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다.

  - 클래스 선택자에서 클래스 명 대신 아이디 이름을 사용하게 됩니다.

  - 아이디 선택자는 '#' 뒤에 아이디 이름을 쓰고, 선언부를 구성하면 됩니다.

  #아이디이름 {속성: 값; }

 아이디 선택자를 실습하기 위해, 동일 클래스명과 서로 다른 아이디를 가진 두 개의 <div> 태그를 FirstPage.html에 작성합니다.

<div id="box1" class="box">box1</div>
<div id="box2" class="box">box2</div>
 
 

  그 다음, FirstStyle.css를 수정한 뒤 결과를 확인합니다.

 

#box1 {
    background-color: #149BDF;
}
 

  동일한 클래스에 속하지만 다른 아이디 명으로 스타일을 적용할 수 있습니다.

 5. 하위 선택자(Descendant Selector)

  - 하위 선택자는 특정 요소의 하위에 있는 어떤 요소를 대상으로 선택 할 수 있습니다.

  - 하위 선택자는 중첩된 요소에서 상위 요소를 선택하고, 뒤에 다른 선택자를 사용하면 됩니다.

  상위선택자 선택자 {속성: 값; }

  상위선택자 .클래스이름 {속성: 값; }

  상위선택자 #아이디 {속성: 값; }

 하위 선택자를 실습하기 위해, FirstPage.html에 작성합니다.

 
        <div class="profile">
            profile
            <div id="name">
                Yeonsu Moon                
            </div>
        </div>
        <div class="address">
            address
            <div id="state">
                Suwon
            </div>
        </div>

  FirstStyle.css를 아래와 같이 수정한 뒤 결과를 확인 합니다.

div #name {
    background-color: #149bdf;    
}
 

 <div> 태그 중에 아이디가 'name' 인 태그만 배경색이 적용된 것을 확인 할 수 있습니다.

 6. 자식 선택자(Child Selector)

  - 자식 선택자는 지정한 특정 요소의 직접적인 자식에 해당하는 특정 요소에 매치됩니다.

  - 추가적으로 감싼 요소는 선택하지 않습니다.

  - 사용법은 부모를 표기 한 뒤 기호 '>'를 붙여서 지정한 부모에 특정한 자식을 선택하면 됩니다.

  상위선택자>선택자 {속성: 값; }

 자식 선택자를 실습하기 위해, FirstPage.html에 작성합니다.

 
        <div class="profile">
            profile
            <div class="name">
                name
            </div>
            <div class="birth">
                date
            </div>
        </div>
 
        <div class="address">
            address
        </div>
 
        <div class="photo">
            photo
        </div>

  FirstStyle.css를 아래와 같이 수정한 뒤 결과를 확인 합니다.

.profile >.birth {
    background-color: #149BDF;
}
 

 7. 그룹 선택자(group Selector)

  - 그룹 선택자는 여러 선택자를 복합적으로 사용하여 다수의 요소를 선택 할 수 있습니다.

  - 각각의 선택자를 ','로 구분하여 나열하여 사용 됩니다.

  선택자1, 선택자2, 선택자3 {속성: 값; }

 

 그룹 선택자를 실습하기 위해, FirstPage.html에 작성합니다.

 
        <div class="profile">
            profile
        </div>
        
        <div class="address">
            address
        </div>
        
        <div class="photo">
            photo
        </div>
 

  FirstStyle.css를 아래와 같이 수정한 뒤 결과를 확인 합니다.

.profile, .photo {
    background-color: #149BDF;
}
 

 8. 가상 클래스 선택자(Pseudo Class Selector)

  - 가상 클래스 선택자는 해당 요소에 실제로 클래스를 부여하지 않지만, 있는 것 처럼 동작하는 선택자입니다.

  - 가상 클래스 중 가장 많이 쓰이는 link, visited, hover, active에 대해 알아 보겠습니다.

   link: 방문하지 않은 링크에 대한 가상 클래스를 제공합니다.

   visitied: 방문했던 링크에 대한 가상 클래스를 제공합니다.

   hover와 active는 마우스가 해당 태그 위에 위치하거나 클릭을 한 경우에 대해 가상 클래스를 제공합니다.

 

 가상 클래스 선택자를 실습하기 위해, FirstPage.html에 작성합니다.

        <div class="profile">
            profile
            <div class="name">
                name
            </div>
            <div class="birth">
                date
            </div>
        </div>
 
        <div class="address">
            address
        </div>
 
        <div class="photo">
            photo
        </div>

  FirstStyle.css를 아래와 같이 수정한 뒤 결과를 확인 합니다.

.profile:hover {
    background-color: #149BDF;
}
 

 클래스가 profile인 태그에 마우스를 올리면 위와 같은 결과가 나오게 됩니다.

 * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다