CSS 기본
스타일
스타일은 크게 내부 스타일, 외부 스타일, 인라인 스타일로 나뉜다.
- 내부 스타일 ← head tag 안에 권장
... <head> ... <style> h1{ color: red; } h2{ color: blue; } </style> </head> ... - 외부 스타일(CSS 파일)
<link rel="stylesheet" href="main.css" /> - 인라인 스타일
<h1 style="color: green">Sample</h1>
문법
1. 기본
선택자 {속성: 값;}2. 주석
/* h1 {color: pink;} */선택자
1. 전체 선택자
* ← (asterisk) 모든 요소
*{
color: red;
}2. 태그 선택자
태그(요소)의 명으로 구분
h1{
color: red;
}
h2{
color: blue;
}
...3. 아이디(id) 선택자
#, id 속성의 값으로 선택자를 지정하는 방법
#id값 {
color: red;
}4. 클래스(class) 선택자
., class 속성의 값으로 선택자를 지정하는 방법
.class명{
color: red;
}5. 속성 선택자
HTML 태그의 속성과 값을 활용해서 선택자를 지정하는 방법
- [속성=값]: 속성과 값이 일치
- [속성~=값]: 속성값에 값이 포함되어 있으면 선택(단어 기준)
- [속성|=값]: 속성값이 값과 같거나 값- 시작하면 선택
- [속성^=값]: 속성값이 값으로 시작하면 선택
- [속성$=값]: 속성값이 값으로 끝나면 선택
- [속성*=값]:속성값이 값이 포함되어있으면 선택
심화- 테크닉[조합선택자 - 선택자를 조합해서 다양하게 활용하는 방법]
6. 그룹 선택자
여러 선택자를 그룹 짓는 방법
선택자1,선택자2,선택자3{
color: red;
}7. 자식 선택자
특정 부모의 자식만 대상으로 지정하는 방법
li > p{
color: red;
}8. 하위 선택자
공백, 특정 요소의 하위를 대상으로 지정하는 방법
li p {
color: red;
}9. 인접 형제 선택자
+, (인접한) 형제 요소를 선택 ← + 뒤에 오는 요소중 가장 인접한 요소가 타겟
h1 + h2{
color: red;
}10. 일반 형제 선택자
~, 모든 형제 요소를 선택 ← ~ 뒤에 해당하는 선택자 요소 모두 타겟
body h1 ~ h2{
color: red;
}
[가상 요소 선택자]
11. ::before
콘텐츠의 맨 앞을 선택하는 선택자
h1::before{
content:'before';
color: red;
text-decoration: underline;
font-size:10px
}12. ::after
콘텐츠의 맨 뒤를 선택하는 선택자
13. ::placeholder
placeholder를 선택하는 선택자
[가상 클래스 선택자]
요소의 특정 상태를 가지고 선택하는 방법
14. 링크 가상 클래스 선택자
- 한 번도 방문하지 않은 상태 →
:link - 한 번이라도 방문한 상태 →
:visited
15. 동적 가상 클래스 선택자
사용자의 어떤 행동에 따랄 동적으로 변하는 상태
- 마우스를 올린 상태 →
:link - 마우스를 클릭하고(한X) 있는 상태 →
:active - :hover, 모바일에서는 동작 x
16. 입력 요소 가상 클래스 선택자
- 입력 요소가 활성화 된 상태 →
:focus - 체크박스가 표시괴어 있는 상태 →
:checked - 비활성화 되어 있는 상태 →
:disabled - 요소가 활성화 되어 있는 상태 →
:enabled
input:focus{
}
input + label{
width: 30px;
height: 30px;
border: 1px solid black;
display: inline-block;
}
input:checked + label{
color: red;
background-color: blue;
}17. 구조적 가상 클래스 선택자
- E:first-child → E 요소의 첫 번째 자식을 요소로 선택
- E:last-child → E 요소의 마지막 자식을 요소로 선택
- E:nth-child(n) → E 요소가 부모 요소의 자식 중 n 번째 순서 요소를 선택
- E:nth-last-child(n) → 마지막에서 n 번째 자식 요소를 선택
- E:nth-of-type(n) → 부모 요소의 자식 요소 중 n번째로 등장하는 E 요소를 선택
- E:nth-last-of-type(n) → 부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소를 선택
- E:first-of-type → 부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소를 선택
- E:last-of-type → 부모 요소의 자식 요소 중 마지막으로+ 등장하는 E 요소를 선택
이 모든 선택자들은 조합이 가능하다
번외
CSS DINER <- 선택자 연습 게임 (재밌음👍)
osanThor⚡️블로그 이전했습니다. https://blog.given-log.com