CSS 선택자(Selector), DIV, SPAN 태그

191219 수업 내용 정리

---

CSS 선택자

    1. 전체 선택자(Universal Selector) * : 모든 태그(요소)에 영향을 미침,  형식) *{속성:값;~}

    2. 태그 선택자(Type Selector) <tag> : <tag>와 같은 모든 태그의 스타일을 조정, 형식) tag {속성:값;~}
    3. 클래스 선택자(Class Selector) .class : .class 와 같은 값을 가진 모든 클래스에 영향을 줌, 형식) (tag).class {속성:값;~}

    4. id 선택자(ID Selector) #id  : 해당 id 값을 가진 태그에 스타일 적용, id는 전체 문서에서 하나의 값만을 가질 수 있음
         형식) 태그명#선택자{속성:값;~} // id는 유일하기 때문에 태그명을 생략해도 스타일 적용 가능

 

 

---

div, span 태그 

 

<div>

  1. 블럭 태그(block tag) : 자동으로 줄바꿈 발생 
  2. 한 라인을 최대로 확대해서 사용 ← 블럭 태그의 특성 중 하나
  3. 영역 설정에 주로 사용(width, height로 크기를 지정해주어야 함)
  4. div는 class, id 둘 다 많이 씀

<span>

  1. 인라인 태그 (inline tag) : 줄바꿈이 일어나지 않음
  2. 문자 영역까지만 최소한으로 축소해서 사용
  3. 영역 설정에 잘 사용 X, width, height 적용 안 됨
  4. class를 주로 사용

    ▷속성 display : 화면에 보여주는 속성을 임의로 지정 - block, inline, inline-block, none(출력을 안 하도록 함)
                                  ※ inline-block 속성은 줄바꿈은 일어나지 않게 하면서, width, height 지정을 가능하게 해 줌

 

 스타일 태그를 div, span에 집중적으로 사용하는 이유는?
 → 기존 태그들은 각자의 기능을 가지고 있기 때문에 스타일이 잘 적용되지 않는 경우가 있음
       그러나 div, span 태그들은 블럭,인라인 특성 외에는 기능이 없어서 스타일 적용이 용이함

---

div 태그에 class와 id를 사용해서 레이아웃을 지정해보는 연습을 해보면 좋습니다.