로그인

검색

selectors

  • * : 모든 태그에 적용
    예시)
    * { color : green; }


     
  • 태그명 : 해당 태그에 모두 적용
    예시) 
    div {
    	    color : blue;
    	}

     
  • #id명 : 태그에서 설정한 id에 적용
    <li id = "test01"> hello </li>
    #test01 {
    	   color : red;
    	}

     
  • .class명 : 태그에서 설정한 class명에 적용
    <div class="test02"> testtest </div>
    .test02 {
    	   width : 100px;
    	}
  • 태그[조건] Attribute selector 조건에 따라 적용됨
    <a href="http://yangel.familyds.com"> yangel </a>
    a[href] { color: blue;} 
    	    /* a태그의 href 가 존재하는 경우에만 적용  */
    	a[href="yangel.familyds.com"] { color: green;  } 
    	   /* a 태그의 링크가 yangel.familyds.com 인 경우에만 색상을 green 으로 적용  */
    	a[href^="yangel"] { color: green; }
    	   /* yangel 로 지작하는 경우에만 적용 */
    	a[href$="com"] { color: green; }
    	   /* com 으로 끝나는 경우에만 적용  */

     
  • 각각의 조건을 결합하여 사용 가능
    div#test01 {   ...   }
    	   // div 태그 중 id가 test01 인 경우에만 적용 

     

기본 문법

selectors {

     property : value;

}

List of Articles
번호 제목 글쓴이 날짜 조회 수
8 CSS 가상 클래스 선택자 도도 2023-12-06 145
7 CSS 태그, 클래스, ID 에 따른 CSS 표기 방법 - 선택자 도도 2023-12-06 136
6 CSS CSS 다중조건 선택자 규칙 해석 dodoworks 2023-11-30 181
» CSS selector 를 알면 CSS를 다양한 방법으로 적용할 수 있다. 도도 2022-12-14 147
4 CSS position 속성에 대하여 알아 보자 도도 2022-12-14 138
3 CSS 반응형 웹 미디어쿼리 얀젤 2022-01-31 122
2 CSS 반응형 웹 사이드바 만들기 얀젤 2022-01-31 352
1 CSS CSS 란 ? + 2 얀젤 2022-01-13 122