1. CSS란
CSS(Cascading Style Sheets)
html로 뼈대를 만들고 css를 적용해 꾸민다!
cascading : 폭포 = 스타일이 우선순위에 맞게 연속적으로 적용된다.
css 적용 방법
-인라인 스타일
태그 안에 스타일 속성으로 적용
정말로 바꾸지 않을 스타일, 꼭 사용해야 될 스타일에만 사용
ex) <h1 style="width: 100px; height: 100px; border: 1px">
-내부 스타일
해드 태그 안에 스타일 태그 만들고, 그 안에 규칙 생성
자주 사용x, 불편함
-외부 스타일
외부에 css 확장자 파일 만들고 불러옴
외부 리소스의 연결을 돕는 링크로 연결(본 파일의 해드 태그에 설정)
관리 편하고 많이 사용
주석
/* 메모내용 */
vscode의 주석 단축기는 'Ctrl + /'
CSS 출처 적용 우선순위
사용자 !important > 제작자 !important > 제작자 > 사용자 > 브라우저
!important가 들어가면 가장 먼저 적용
**!important는 폭포의 흐름 깰 수도 있다.
2. 선택자
전체 선택자 : * 사용
모든 스타일 선택 -> 모두 바꿈
브라우저가 갖고 있는 스타일을 초기화할 때 사용
ex)
<style>
*{margin:0}
<style>
type 선택자
태그명으로 선택
같은 태그명을 가진 태그 모두 변경
ex)
<style>
h2{ color: green;}
<style>
Class선택자
class명으로 해당요소 선택
겹쳐도 됨
ex)
<style>.blue-text { color: blue;}<style>
<span class="blue-text"> ~~<span>
ID 선택자
겹치면 안됨(고유함)
<style> #title {font-size; 40px;} <style>
<h1 id="title"> ~ <h1>
속성 선택자<<일치>>
-속성이 존재하는 요소
h2[class] {
class속성을 가진 태그만 변경
}
a[target] {
a 태그 + target 속성을 갖는 문장만 변경
}
-속성 값과 일치하는 요소
h2[class="naver-title"] {
스타일 태그 : 이 경우 h2 태그 안에 클래스 명이 naver-title인 문장만 속성값을 준다.
}
-속성 값을 포함하는 요소
a[href*="www"] {
www를 포함하는 모든 태그들 변경
} - * 붙여야됨
-속성 값으로 시작하는 요소
h2[class^='google'] {
class명이 google로 시작하는 태그만 변경
} - ^ 붙여야됨
-속성 값으로 끝나는 요소
a[href$="facebook.com"] {
a 태그 안에 href의 주소가 facebook.com으로 끝나는 태그만 변경
} - $붙여야됨
-속성에 단어가 포함하는 요소(존재여부 판단)
h2[class~='title'] {
스타일 태그 : h2 태그 안에 class 명에 title이라는 단어가 존재하는 모든 문장 변경
} - =붙여야됨
그룹 선택자
쉼표(,)를 사용해서 같은 스타일을 한번에 정의 가능
ex)
h1, p {
~~~~ : h1과 p모두 동일한 스타일 속성 값을 갖는다.
}
결합자
자손 결합자( (공백))
a b : a 하위의 모든 b 태그에 적용해라
ex)
div span {
스타일 태그 : 이 경우 div 하위에 있는 span 태그에 있는 모든 문장이 속성 값을 갖는다.
}
자식 결합자(>)
첫 번째 요소 바로 하위의 태그만 선택(꼭 바로 아래에 있어야 됨)
a > b > c
ex)
section > ul > li {
스타일 태그 : 모든 조건을 만족시키는 li만 적용
}
* 형제란? 같은 들여쓰기에 있는 태그들
일반 형제 결합자(~)
a~b : a 다음에 나오는 모든 b태그에 적용
ex)
p ~ span {
스타일태그
}
인접 형제 결합자(+)
a + b : a와 인접한 b태그에 적용
ex)
p + code {
스타일태그 : p태그 바로 다음에 나오는 span 태그 선택
}