선택자

 

▼선택자
▷태그

  -해당 태그를 입력하여 스타일을 줌

  -태그를 여러번 사용하면 중복사용이 될 수 있어 선택자(class 나 id)를 사용

▷클래스 (class)
  -태그는 같은데 스타일을 다르게 주고 싶을 때
  -반복할 수 있음

  -점(.) 으로 표시함

 

<div class="header">

<div class ="visual">

<div class ="container">

 <div class ="con1">   

 <div class ="con2">

 <div class ="con3">

<div class ="footer">

<style>

."이름"{}

</style>

 

 

▷아이디 (id)
  -레이아웃 설정할 때 사용 (크게 묶어주고 싶을 때)
  -반복하지 않음 (가능은 하지만 실무에서 하지 않음)

  -샵(#) 으로 표시함

<div id="header">
<div id="visual">
<div id="container">
    <div id="con1">
    <div id="con2">
    <div id="con3">
<div id="footer">

<style>
  #"이름"{}
</style>

  ㄴex)
    
<div id="wrap">
        <ul class="top">
            <h3>에디토리얼</h3>
            <div class=all>
                <a href="#">View All</a>
            </div>
        </ul>
</div>


<style>
    #wrap{width:1200px; margin: 0px auto;}
</style>

 

▼선택자 위치 지정
-선택자가 태그, 클래스, 아이디, 몇번째 자리에 있는지로 선택자를 지정할 수 있음

▷first/last child{}
ㄴex)

li:first-child{  } -> li의 첫번째 자리에 위치한 선택자
li:last-child{  } -> li의 마지막 자리에 위치한 선택자


▷nth-of-type()
ㄴex)

li:nth-of-type(1) ->li의 첫번째 자리에 위치한 선택자
li:nth-of-type(2) ->li의 두번째 자리에 위치한 선택자
li:nth-of-type(3) ->li의 세번째 자리에 위치한 선택자
li:nth-of-type(4) ->li의 네번째 자리에 위치한 선택자
li:nth-of-type(5) ->li의 다섯번째 자리에 위치한 선택자



▼태그 소속으로 지정하기
▷스타일에 태그와 태그 사이를 띄어 소속되어 있음을 적용
▷소속을 구체적으로 적으면 입력한 소속 모두에게 스타일 적용
 ㄴex)

.menu li = class menu 안에 있는 li를 지정

.menu li:hover{} = class 'menu' 안에 'li' 에 마우스를 대면~
.menu li:hover a{} = class 'menu' 안에 'li' 에 마우스를 대면 'a' 가~
.menu li a:hover{} = class 'menu' 안에 'li' 안에 'a' 에마우스를 대면 'li', 'a' 가~
.menu a:hover{} = class 'menu' 안에 'a' 에마우스를 대면 'a' 가~ (li는 바뀌지 않음)