자손, 자식 결합자 , 속성 선택자

선택자	설명
A B	A 요소에 포함된 B 요소를 선택한다. (자손 관계)
A > B	A 요소의 직계 자식 요소인 B를 선택한다. (자식 관계)

 

ex )

 <h1>css <span>공부</span>는 재밌어</h1>
    <ul>
        공부 리스트
        <li>JavaScript</li>
        <li>react</li>
        <li>Springboot</li>
        <li>unit test</li>
    </ul>
   <div> <p>하루 하루 <span>열심히 </span>살자</p> </div>

 

자식 관계와 자손 관계의 차이에 대해 살펴보자

div > span {

   
     color : hotpink;

}



div  span {

     color : hotpink;

}

 

span은 div 의 직계 자식이 아니고 자손( 포함 되어있음) 관계 이므로

 

div span {

    color : hotpink;

}

 

이 적용된다.

 body span {
        color: green;
        }

 body  li{
       color:blue;
        }
  div >  span {
       color:hotpink;
        
       }

div 의 직계 자식은 p 이고 span은 자손관계( 포함되어 있음) 이다.

 <h1>css <span>공부</span>는 재밌어</h1>
    <ul>
        공부 리스트
        <li>JavaScript</li>
        <li>react</li>
        <li>Springboot</li>
        <li>unit test</li>
    </ul>
   <div> <p>하루 하루 <span>열심히 </span>살자</p> </div>

 

그래서 div > span 태그는 적용 되지 않고

 

위에 있는 body span 태그가 적용이 되기 때문에

 

이런 결과가 나온다.

 

코드가 많지 않기 때문에 태그들에 각 스타일 속성을 입히기 쉽지만

태그가 다양하고 많을 때

직계 자손과 자식 관계를 고려하지 않으면

원치 않는 결과가 나올 수 있다. !!

 

---

속성 선택자

특정한 속성을 가지는 요소를  선택한다.

 

 <div><a href="#" title="코딩">코딩 기록</a></div>
  <div><a href="#">코린이 탈출하기</a></div>

두 개의 a 태그 중 위에 는 title이라는 속성이 있다.

이 차이점을 이용해 

위에 있는 a 태그에만 스타일 속성을 적용 하고 싶으면

 a[title]{
            text-decoration: none;
            font-weight: bold;
            font-style: italic;
            color:gray;
        }

타입 선택자  [속성 이름] {

 

}

를 사용하면 된다.

 

 

---

 

 

Front-end 공부 할 때 도움 되는 사이트

 

JSFiddle

jsfiddle.net/

JSFiddle - Code Playground

 한 페이지 내에서 HTML, CSS, JavaScript를 모두 작성하고 바로 결과를 보여주는 사이트

W3Schools

www.w3schools.com/

W3Schools Online Web Tutorials

 

 

 

- HTML, CSS, JavaScript뿐 아니라 jQuery, PHP, AngularJS, Bootstrap등 다양한 웹 기술들에 대한 설명과 예제가 나와있는 사이트

MDN JavaScript Document

Mozilla Developer Network(MDN)

JavaScript

JavaScript에 대한 문서를 제공해준다.

튜토리얼부터 스타일 가이드, 각 기능들에 대한 설명 등이 정리되어 있다.