[CSS] class, id 기초 개념 파악 및 css 선택자, 색상 및 기본 내용 파악

CSS 선택자 : html 요소에 필요한 디자인을 처리할 수 있도록 선택하는 것

• 요소를 직접 선택하는 경우에는 요소의 이름만 부여 — h1 { }
• id의 경우에는 앞에 #을 부여 — #box { }
• class의 경우에는 앞에 .을 부여 — .box { }
• 띄어쓰기는 선택 요소 내부에 존재하는 다른 요소를 선택하겠다는 의미로, 다른 해석이 되어버림
  • #name.box { } — O
  • #name.box { } — X
• 반드시 요소를 선택한 후 { } 표기를 하여 이후의 기능 동작을 할 수 있도록 처리
• 해당 요소에 맞는 선택자를 각각 선택하여 수행

---

ID와 Class의 구분

ID

• 하나의 페이지에 하나의 요소만 선택하여 각 이름을 부여 가능
• 여러 개에 똑같은 ID 부여 못 함. 주민등록번호라고 생각하기!

Class

• 다중성을 지닌 이름을 부여하여, 하나의 요소에 여러 개의 이름 부여 가능
• 하나의 이름으로 여러 개의 요소에 사용 가능 — 그룹화 가능. ex) 남자, 선생님, 학생, 아빠, 아들...
• ID와 Class 구분하기 위해서 둘의 이름을 작성할 때 이름이 두 단어 이상일 시, ID는 카멜케이스 방식을, Class는 언더바 방식을 사용한다.
• 카멜케이스 : underBar — 띄어쓰기 생략하고 뒤에 오는 단어를 대문자화
• 언더바 : under_bar — 띄어쓰기 대신 _입력

---

자식/자손 선택자

<ul>

<li>

<a href=”#”></a>

<div><a href=”#”></a></div>

</li>

</ul>

자손 선택자

• 요소와 요소 사이에 스페이스바를 이용하여 띄어쓰기로 요소 연결
• 조부모-부모-자식 관계에서 중간 부모 요소 생략 가능

ul li a {color : #ffffff}

ul div a {backgroud-color : #000000 }

ul li div a {border: 1px; #aef}

자식 선택자

• 요소와 요소 사이에 > 기호 붙여 사용
• 반드시 부모 자식 요소 관계로 설정해야 함
• 자손 선택자 자식 선택자 섞어서 사용 가능

ul > li > a {color : #fa0:}

ul li > div > a {text-shadow: 2px 2px 2px #aaf;}

ul > li > div > a {border-style : solid;}