CSS의 기본 형식 + 선택자(태그, 아이디, 클래스)

스타일 시트의 기본 형식

-       선택자 (selector)

-       스타일을 적용할 대상

-       HTML 문서의 태그, 아이디, 클래스, 속성

-       {속성명:값;}

-       변경하고자 하는 속성

-       클꼴, 크기 색상 등

-       사용 예 

-       모든 <h1> 태그에 스타일 적용

-       h1 { color:red; }

 

선택자 유형

(1) 태그 선택자

(2) 아이디 선택자

(3) 클래스 선택자

(4) 속성 선택자

(5) 상태 선택자

 

(1) 태그 선택자

-       태그명 사용

-       요소 (element) 선택자라고도 함

-       HTML 문서에 있는 같은 모든 태그에 동일하게 적용

-       태그명 { 속성명:값; }

태그 선택자 예제 : tagSelector.html

 

h3 {
             background-color:#000;
             color:#fff;
             width:50%;                /* 가로 길이 */
             margin-left:20px;         /* 왼쪽 여백 (들여쓰기) */
   }                                           

  li { color:red; }

 

---

 

(2) 아이디 선택자

-       # 사용

-       문서에서 특정 부분에만 필요한 스타일 적용할 때 사용

-       필요한 부분에 유일한 아이디를 지정하고 CSS 적용

-       식별 선택자라고도 함

-       사용법

-       #idName {속성명:값;}

-       태그에 반드시 id로 지정 되어 있어야 함

-       <태그명 id=”idName”> </태그명>

 

아이디 선택자 예제 : idSelector.html

<style type="text/css">
        #cookBox {
                  border:3px solid #000;        /* 테두리 : 굵기 유형 색상  */
                  width:500px;
                  padding:10px;          /* 안쪽 여백  */
                  margin-left:70px;      /* 바깥쪽 여백 */
                  font-size:12px;
                  color:rgb(0, 0, 255);
                  background-color:gold;             
        }

        #sourceBox {
                  background-color:#ffc;
                  line-height:150%;    	  /*  행 높이 */
                  list-style:none;    	  /* 목록(리스트) 글머리 기호 안 보이게 */
                  width:200px;
                  color:red;
                  padding:5px;
                  border:1px solid #000;
                  margin-left:30px;
        }

</style>

 

---

클래스 선택자

-       . 사용  (도트 선택자)

-       문서에서 특정 그룹에 필요한 스타일 적용할 때 사용

-       .className { 속성명:값;}

-       HTML 태그의 class 속성이 지정되어 있어야 함

-       <태그명 class=”className”></태그명>

-       <태그명 class=”className”></태그명>

클래스 선택자 예제 : classSelector.html

    <style type="text/css">
        .cookTitle1 {
            width: 30%;
            background-color:#f03;
            color:#fff;
            padding:5px;
            border:1px solid #000;
            margin-left:20px;
        }        	
        .cookTitle2 {
            width: 30%;
            background-color:#ffcc33;
            padding:5px;
            border:1px solid #f00;
            margin-left:20px;
        }        
        .redDotLine {
            color:#f00;
            font-weight:bold;
            border-bottom:1px dashed #f00;
        }
    </style>

 

---

속성 선택자

-       HTML 태그의 속성 값에 따라 선택자로 정의

-       <a title=”산업기사”>산업기사</a>

-       예: <a>의 title 속성 값으로 선택해서 스타일 지정

-       문법

-       태그명[속성명=”값”]

-       태그명[속성명^=”값”]

-       태그명[속성명$=”값”]

-       태그명[속성명*=”값”]

 

속성 선택자 예제 : attrSelector.html에 추가

 <style type="text/css">
    /* 속성 선택자 : <a> 태그의 href 속성에 스타일 적용 */
          a[href="http://www.naver.com"] {
                    color:green;
          }
          /* 속성 선택자 : <a> 태그의 href 속성 값 중에서 '#'으로 시작하는 속성값에 스타일 적용 */
          a[href^="#"] {
                    background-color:gold;
          }
</style>

---

상태 선택자

-       태그의 상태로 선택해서 스타일 적용

-       상태 : 체크된 상태, 포커스 받은 상태, 사용 가능 또는 불가능한 상태

-       선택자:checked - 체크된 input 태그 선택

-       선택자:focus - 포커스를 받은 input 태그 선택

-       선택자:enabled - 사용 가능한 input 태그 선택

-       선택자:disabled - 사용 불가능한 input 태그 선택

 

상태 선택자 예제 : stateSelector.html

<style type="text/css">
          /* input 태그가 사용 가능한 경우에 입력란 색상 지정  */
          input:enabled { background-color:white;} 

          /* input 태그가 사용 불가능한 경우에 입력란 색상 지정  */
          input:disabled { background-color:skyblue; }

          /* input 태그에 초점이 맞춰진 경우 입력란 색상 지정  */
          input:focus { background-color:orange; }  
</style>