CSS 선택자 소스와 같이

안녕하세요 이번에는 css 선택자를 코드위주로 보도록 하겠습니다.

솔직히 글로 작성된거 10번 봐서 이해할거 코드 한번 보면 바로 이해갑니다 

1.div를 선택자로 했습니다.

div라는 태그로 감싸고 div 선택자로 테두리를 주었습니다.

2. span을 선택자로 하였습니다.

span태그로 감싸고 span 선택자로 테두리를 주었습니다.

1과 2의 코드입니다

div{border:1px solid red} : 

* div 태그를 선택해서 테두리(border)를 1px로 붉은색 실선으로 표시한다.

span{border:1px solid red} : 

* span 태그를 선택해서 테두리(border)를 1px로 붉은색 실선으로 표시한다.

3. 아이디 선택자입니다. 글자색은 빨강색입니다.

4. 클랙스 선택자 입니다. 글자색은 파란색입니다

 3과 4의 css 코드입니다.

 #red{color:red}

 .blue,p{color:blue} 

5. 티스토리로 이동합니다
   다음으로 이동합니다

5번의 css 코드입니다.

a:link{color:red; text-decoration:none} /*방문하지 않은 링크 */

a:visited{color:gray; text-decoration:none} /*방문한 링크 */

a:hover{color:#2F9D27; text-decoration:underline} /*마우스 겹칠때 */

a:active{color:#000000} /*마우스 누를때*/

6. ul>li 자식선택자입니다. 색상은 푸른색입니다.

   ul li:first-child의 배경(백그라운드)은 연두색입니다.

   ul li:last-child의 배경은 분홍색입니다.

   nav li:nth-child(3)의 글자색은 red입니다.

• 1번째 자식입니다
• 2번째 자식입니다
• 3번째 자식입니다
• 4번째 자식입니다
• 5번째 자식입니다
• 6번째 자식입니다

6번의 원문과 css코드입니다.

<ul id="nav">

  <li>1번째 자식입니다</li>

  <li>2번째 자식입니다</li>

  <li>3번째 자식입니다</li>

  <li>4번째 자식입니다</li>

  <li>5번째 자식입니다</li>

  <li>6번째 자식입니다</li>

</ul>

  #nav>li{color:blue;}

  #nav li:first-child{background:#E1FF36;}

  #nav li:last-child{background:#FFB9B9;}

  #nav li:nth-child(3){color:red;}

7. .a+ul.b 선택자에 글자색을 붉은색으로 합니다. <a 바로 뒤의 b를 선택>

   .a~ul.b 선택자의 배경색을 상아색으로 합니다. <a 바로 뒤의 b를 모두선택>

a클래스의 자식을 p태그로 감쌌습니다1

a클래스의 자식을 p태그로 감쌌습니다2

a클래스의 자식을 p태그로 감쌌습니다3

위의 p태그 형제인 div 안에 p태그로 감쌌습니다

p태그1

p태그2

p태그3

7번의 원문과 css 코드입니다.

<div class="a">

<p>a클래스의 자식을 p태그로 감쌌습니다1</p>

<p>a클래스의 자식을 p태그로 감쌌습니다2</p>

<p>a클래스의 자식을 p태그로 감쌌습니다3</p>

<div>

   <p>위의 p태그 형제인 div 안에 p태그로 감쌌습니다 </p>

 </div>

 </div>

<ul class="b">

 <p> p태그1</p>

</ul>

<ul class="b">

 <p> p태그2</p>

 <p> p태그3</p>

</ul>

  .a+ul.b{color:red;}

  .a~ul.b{background:#FFFF8F;}

8. 태그안에 odd와 even을 선택

   odd는 검은색 배경에 흰글씨로 even은 파란색 글자로 합니다.

1번째 줄입니다

2번째 줄입니다

3번째 줄입니다

4번째 줄입니다

5번째 줄입니다

6번째 줄입니다

7번째 줄입니다

8번째 줄입니다

9번째 줄입니다

10번째 줄입니다

8번째의 원문과 css 코드입니다.

<div id="odd">

<p>1번째 줄입니다</p>

<p>2번째 줄입니다</p>

<p>3번째 줄입니다</p>

<p>4번째 줄입니다</p>

<p>5번째 줄입니다</p>

<p>6번째 줄입니다</p>

<p>7번째 줄입니다</p>

<p>8번째 줄입니다</p>

<p>9번째 줄입니다</p>

<p>10번째 줄입니다</p>

</div>

 #odd p:nth-child(odd){color:white; background:black;}  /* odd -홀수 */

 #odd p:nth-child(even){color:blue} /* even-짝수 */

9. first-line선택자를 사용하여 첫번째 라인의 글자색을 붉은색으로 글자크기는 

   100px로 만듭니다. 

css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.

 9. 번째 원문과 css 코드입니다.

<div id="line">

<p>css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.css를 공부하고있습니다.</p>

</div>

#line p:first-line{color:red;font-size:100px}

10번째 임의의 선택자를 삽입하는 선택자입니다.

만세

모두들

10.번째 원문과 css 코드입니다.

<div >

<p id="c">만세

</p>

<p id="d">모두들</p>

</div>

  #c:before{content:"대한민국 "; color:red;}

  #d:after{content:"부자되세요~"; color:red; font-size:20px}

앞에 작성했던 내용을 전부 코드와 비교해서 작성하였습니다.

참고하시면서 보시면 도움이 될듯합니다.

아래는 전체 css 코드입니다 

<style type="text/css">

  #red{color:red}

  .blue{color:blue}

  a:link{color:red; text-decoration:none} /*방문하지 않은 링크 */

  a:visited{color:gray; text-decoration:none} /*방문한 링크 */

  a:hover{color:#2F9D27; text-decoration:underline} /*마우스 겹칠때 */

  a:active{color:#000000} /*마우스 누를때*/

  .source{width:640px; border:1px solid #1DDB16; 

             background:#5D5D5D; color:#F6F6F6; }

  #nav>li{color:blue;}

  #nav li:first-child{background:#E1FF36;}

  #nav li:last-child{background:#FFB9B9;}

  #nav li:nth-child(3){color:red;}

  .a+ul.b{color:red;}

  .a~ul.b{background:#FFFF8F;}

  #odd p:nth-child(odd){color:white; background:black;}  /* odd -홀수 */

  #odd p:nth-child(even){color:blue} /* even-짝수 */

  #line p:first-line{color:red;font-size:100px}

  #c:before{content:"대한민국 "; color:red;}

  #d:after{content:"부자되세요~"; color:red; font-size:20px}

</style>