로그인

검색

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
번호 제목 글쓴이 날짜 조회 수
7 CSS 반응형 웹 미디어쿼리 얀젤 2022-01-31 122
6 CSS 반응형 웹 사이드바 만들기 얀젤 2022-01-31 352
5 Javascript 자바스크립트로 스타크래프트 만들기 강좌 얀젤 2022-01-30 202
4 HTML5 HTML 태그들, 헷갈리는거 정리 - 드림코딩 엘리 + 1 얀젤 2022-01-24 126
3 HTML5 신박한 html 태그 3가지 얀젤 2022-01-18 136
2 CSS CSS 란 ? + 2 얀젤 2022-01-13 122
1 Javascript 자바스크립트 개요 얀젤 2021-12-16 141