CSS란 / 적용방법 4가지 / 선택자 / 속성값

CSS

---

• Cascading Style Sheets(CSS)
• 마크업 언어(HTML)는 몸의 구조(뼈, 근육)를 담당, CSS는 옷과 신발과 같이 외적으로 꾸며주는 역할
• CSS는 HTML(마크업 언어)을 꾸며주는 표현용 언어
• HTML의 속성은 영어로 attribute이고, CSS의 속성은 property
• /* 주석 내용 */

CSS 적용 방법 4가지

---

1. Inline : 해당 요소에 직접 스타일 속성을 적용
2. Internal : head태그 > style태그에 작성하는 법
3. External : 외부 스타일 시트 파일 이용. link태그
4. Import : 스타일 시트(.css) 내에서 다른 스타일 시트 불러오는 방식

 

선택자

---

여러 요소들 중에 내가 원하는 요소를 선택할 수 있도록 하는 것. 

요소,태그 선택자 : h1, h2 { color : red; font-size : 2em;} 처럼 표현. *(별표, asterisk) 기호로 문서 내에 모든 요소를 선택

class 선택자 : .class_name {font-size:30px;} <p class="class_name"> ... </p>처럼 표현. 여러 요소에 같은 클래스를 넣고 같은 규칙 적용 가능

id 선택자 : #id_name {font-size:30px;} <p id="id_name"> ... </p>처럼 표현. 문서 내에 하나의 요소에 사용. 구체성

선택자 조합 : 선택자를 조합하는 방식.

• p.class_name(요소와 class 조합)
• .class_name.class_name2(다중 class)
• #id_name.class_name (id와 class조합)

속성 선택자 : 단순 속성으로 선택. 속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어간다. 

• p[class] { color: silver; } => <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용
• <p class="foo">Hello</p> 에 적용
• p[class][id] { text-decoration: underline; } => <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용
• <p class="baz" id="title">HTML</p> 에 적용

정확한 속성값 : p[class="foo"] { color: silver; }

부분 속성값 : 

• [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
• [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
• [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
• [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택