1. CSS 의미
CSS : cascading style sheet
2. CSS 적용 방법
- Inline Style Sheet
스타일을 정의하고 싶은 HTML 요소에 스타일을 적용.
<h2 style="color:green; text-decoration:underline">
- Internal Style Sheet
내부 스타일 시트를 이용하는 방법은 HTML 문서 내의<head>태그에<style>태그를 사용하여 CSS 스타일을 적용
head> <style> body { background-color: lightyellow; } h2 { color: red; text-decoration: underline; } </style> </head>
- External Style Sheet
사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장.
스타일을 적용할 웹 페이지의<head>태그에<link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용된다.
//html 파일 <head> <link rel="stylesheet" href="/examples/media/expand_style.css"> </head>//expand_style.css 파일 body { background-color: lightyellow; } p { color: red; text-decoration: underline; }
3. Cascading(폭포처럼 쏟아지는 물)되는 순서
1) Author style : 우리가 작성하는 스타일 시트 (최고의 우선 순위)
2) User style : 사용자가 스타일링 가능한 스타일 시트
3) Browser : 브라우저에서 기본적으로 저장된 스타일 시트
🧷 CSS 출처 적용 우선순위
사용자 !important > 제작자 !important > 제작자 > 사용자 > 브라우저
👾 !important : 이 cascading 순서를 끊어내는 코드 (나쁜 아키텍처일 경우 사용함, 대부분 쓰지 않음) 4. Selectors ( html 에 어떤 태그들을 고를 것인지를 정하는 문법)
- Universal : * (모든 태그를 선택하는 것)
- Type : Tag (태그를 고르는 것)
- ID : #id (해당하는 id 만 고르는 것)
- Class : .class
- State : : (태그 옆에 스테이트를 달 수 있음)
- Attribute : [] (해당 속성값들만 고르는 것)
5. Selectors 작성 문법
selector {
property : value;
} Ex.
li{
color : blue;
}=> type 선택자
button : hover {
color : red;
background : beige; //버튼 안의 배경색깔 지정
}button : hover
- 버튼위에 마우스를 올리면, 색깔이 변하는 코드
6. 그룹 선택자
선택자를 쉼표(,)로 구분해 여러 선택자를 나열함.
같은 스타일을 여러 선택자에 한꺼번에 정의할 수 있다.
h1,p { text-align:center }
7. 결합자
🧷 자손 결합자
자손 결합자는 첫 번째 요소의 자손인 태그를 선택한다.
/*<div> 태그 하위에 있는 모든 <span>요소 */ div span { color: blue; }
🧷 자식 결합자
자식 > 결합자는 첫 번째 요소의 바로 아래 자식인 태그를 선택한다.
/* <ul> 태그의 바로 자식인 모든 <li>요소 */ ul > li { color: blue; }
🧷 일반 형제 결합자
일반 형제 ~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택한다.
/* <p> 태그의 뒤에(아래) 나오는 모든 <span> 요소 */ p ~ span { color: blue; }
🧷 인접 형제 결합자
인접 형제 + 결합자는 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택한다.
p + code { color: blue; } ``
8. 속성선택자
주어진 속성을 가진 모든 요소를 검색한다.
/* 속성이 존재하는 요소 ex.<h2>태그에 class 속성이 존재하는 모든 요소*/ h2[class] { font-size: 30px; } /* 속성 값과 일치하는 요소 ex.<h2>태그에 class 속성값인 'naver-title'와 일치하는 요소*/ h2[class='naver-title'] { color: darkkhaki; } /* 속성 값을 포함하는 요소 ex.<a>태그에 href 속성이 'www'를 포함하는 요소 */ a[href*='www'] { text-decoration: none; } /* 속성 값으로 시작하는 요소 ex.<h2>태그에 class 속성값이 'google'로 시작하는 요소*/ h2[class^='google'] { color: darkblue; } /* 속성 값으로 끝나는 요소 ex.<a>태그에 href 속성값이 'facebook.com'으로 끝나는 요소*/ a[href$='facebook.com'] { color: darkgoldenrod; } /* 속성에 단어가 포함되는 요소 ex.<h2>태그에 class 속성값에 'title'단어를 포함하는 요소*/ h2[class~='title'] { color: darkcyan; font-weight: 100; }
행복함을 느끼기 위한 발걸음