HTML/CSS

• CSS의 적용
  • inline
    <div style="...">내용</div>
  • internal
    head태그 안에 들어감.
    <style> p {color: gray;} </style> p태그에만 적용됨.
  • external
    별도의 css가 저장된 외부파일을 불러오는 방식. head 태그 안에 넣음.
    <link rel = "stylesheet" href = "css/style.css">
  • @import
    거의 쓰이지 않음
    @import url('css/style.css');
• 선택자
  • 요소 선택자(태그)
    선택자 중에 가장 기본이 되는 선택자. 태그 선택자라고도 함.
    요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어간다.
    문서 내 선택자에 해당한느 모든 요소에 스타일 규칙이 적용됨.

    h1 { color: blue; }
    h2 { color: blue; }
    h3 { color: blue; }
    h4 { color: blue; }
    h5 { color: blue; }
    h6 { color: blue; }

  • 그룹화
    선택자는 쉼표를 이용해서 그룹화를 할 수 있음.
    h1, h2, h3, h4, h5, h6 { color: blue; }
*{color: blue;} // 전체선택자 *(별표, asterisk)로 문서내 모든 요소 선택. 한 번의 선언으로 문서 내에 모든 요소에 스타일 규칙이 적용.
    선택자와 선언이 동시에 그룹화도 가능.
    h1 { color: yellow; font-size: 2em; background-color: gray; }
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }
• class 선택자 & 다중 class
  요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법. (class 속성은 글로벌 속성이므로 어느 태그에서도 사용가능.)
  style 태그를 생성하고 .클래스명 을 통해서 스타일 규칙 적용가능.
  • 다중 class
    공백으로 구분하여 여러 개의 class 값을 넣을 수 있음. (class1, class2 참고)
    
  • 선택자의 조합
    첫번째는 <p>이면서 class속성에 bar가 있어야 적용됨.
    두번째는 class 속성에 foo와 bar가 모두 있어야 적용됨. (class = "foo bar")
    세번째는 id가 foo이며 class가 bar인 요소에 적용됨.

      /* 요소와 class의 조합 */
      p.bar { ... }
       /* 다중 class */
       .foo.bar { ... }
       /* id와 class의 조합 */
      #foo.bar { ... }

• id 선택자
  class와 비슷해 보임. class는 . 이지만 id는 #으로 시작.
  
  class와 id의 차이점

1. .이 아닌 # 사용.
2. class속성이 아닌 id속성을 참조.
3. 문서 내에 유일한 요소에 사용.
4. 구체성
   id는 문서 내에서 유일해야하고 유일하게 사용되어야 한다.
   즉, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나.
   
   

   • 속성 선택자

     • 단순속성으로 선택
       속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 감. 요소에 해당 이름의 속성이 있다면 해당 사항이 적용됨.

     p[class] {color: red;}
     p[class][id] {text-decoration:underline;}
     
     <p class= "hey">hey</p>
     <p class= "hey" id= "hi">hi</p>

     • 정확한 속성값으로 선택
       선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 됨.

     p[class="hey"] { color: silver; }
     p[id="hi"] { text-decoration: underline; }
     
     <p class= "hey">hey</p>   /* silver컬러 적용 */
     <p class= "yey">yey</p> /* 해당사항 없음 */
     <p id= "hi">hi</p> /* 언더라인 생성 */

     • 부분 속성값으로 선택
       부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다.
       1. [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
       2. [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
       3. [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
       4. [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

         <p class="color hot">red</p>
     	<p class="cool color">blue</p>
     	<p class="colorful nature">rainbow</p>
         
         p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
     	p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
     	p[class$="color"] { font-style: italic; } /* 2번째 요소 */
     	p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */