1.css
2. 선택자, 상속과 초기화
3. 결합자, 우선순위
4. 단위
5. 꾸미기
6. 박스 모델
7. 표시 유형과 레이아웃
8. css 주의 사항
1. css
테마바꾸기: ctrl shift p : : theme
2. 선택자, 상속과 초기화
전테선택자(*) : 모든 요소에 스타일을 적용할 수 있는 선택자
유형(태그) 선택자 : html 태그이름으로 선택한다.div, body 등
id,class 선택자 :
class: (.myclass) 중복 사용 가능
id : (#unique-id) 중복 사용 x
속성 선택자 : 요소가 가진 속성을 선택자로 한다. href, target 등 [href]
의사 (가상)_ 클래스 : 기존 선택자에 추가하느 특별한 상태를 선택하는 선택자
대표 가상 클래스 :
- 마우스를 올리면 적용되는 : hover
- 키보드의 텝키로 이동시 focus괴는 : focus
::after, ::before : 앞이나 뒤에 컨텐를 넣을 수 있다.
상속 : 부모 요소의 "스타일 값"을 이어받아 자식 요소에 적용하는 것
h2 (빨강)
div (blue)
div h2 {color :inherit; }
결과 : 파랑
초기화 : 브라우저가 지정한 속성의 초기값을 요소에 적용한다.
color: initial -> 상속 무시
사용시 초기화 값 확인
결합자
1. 자손 결합자 : 한칸의 공백을 주어 앞 셀렉터의 자식 요소를 선택한다.
div span {color : red;} div : 부모 span: 자식
2. 자식 결합자 ; 앞 셀렉터의 직계 자식 요소를 선택한다.
div > span : div자식span에게만 적용 div의 p에는 적용 안됨
3. 인접 형제 결합자 : 앞 셀렉터의 바로 다음에 위치한 형제 요소를 선택한다.
a + p : a태그 바로 뒤에있는 p태그에만 적용
4. 일반 형제 결합자 : 앞 셀렉터의 다음에 위치한 모든 형제 요소를 선택한다.
a ~ p : a태그뒤 같은 위치(뎁스)의p태그만 적용
우선순위 (명시도)
작성 순서, 결합, 선택자에 따라 우선순위는 변경된다.
#기본 우선 순위
아래로 내려갈수록 높은 우선순위 를 가진다.
1. 유형(태그) 선택자 및 의사(가상) 클래스
2. class 선택자, 속성 선택자, 의사(가상)클래스
3. id 선택자
4. inline css
<!DOCTYPE html>
<html>
<head>
<title>CSS 실습</title>
<style>
#green {color: green;}
.blue { color: blue;}
div { color: red;}
</style>
</head>
<body>
<div class="blue" id="green" style="color:yellow"></div>
</body>
</html>답 : yellow
예외 !important : 가장 강력한 우선순위 but 혼란스러운 코드초래 (지양)
단위
1.고정 단위(px, pt) : 정확한 크기를 나타내야 할 때 사용된다.
2. 상대 길이 단위 (em) : 요소의 글꼴 크기에 상대적인 단위, 합성값이기도 하기때문에 처음 2em이32px이라면 두번째 2em은 64px이 된다.
(rem) :상대길이 단위이긴 하지만 합선을 회피하기위해 만들어진 단위
(%) : 부모 크기에 따라 상대적으로 백분율 된다.
(vm,vh) 화면의 너비,높이에 따라 결정된다. 1vm =1%
(vmin, vmax) 화면에서 가장 작은,큰 크기에 따라 결정된다.
웹브라우저가 가로1000px 세로 100px 일 경우
1vmin : 1px
1vmax : 10px
'언어 > Frontend' 카테고리의 다른 글
| [반응형 웹] html, css (0) | 2023.02.23 |
|---|---|
| [CSS]꾸미기, 박스 모델, 표시 유형과 레이아웃, 주의 사항 (0) | 2023.02.22 |
| [chapter 5 콘텐츠]멀티미디어, 리스트, 표, 아이프레임, 양식태그, html 주의사항 (0) | 2023.02.22 |
| [chapter 1 ~4] html, head, body, 레이아웃 (0) | 2023.02.22 |
| Intro( html/css/js) visual studio 기본 설정 (0) | 2023.02.22 |
