CSS🎨

hey hey·2021년 12월 7일

html & CSS

목록 보기

2/10

Cascading Style Sheets

→ 스타일 레이아웃 등을 통해 문서를 표시하는 방법을 지정하는 언어

⇒ 인라인

<h1 style="color: blue; font-size: 100px;">HELLO</h1>

⇒ 내부 참조 -

<head>
	<style>
		h1 {
			color: blue;  -> 선언
			font-size: 15px; -> 속성:값
		}
	</style>
</head>

⇒ 외부참조(link file)

<head>
	<title></title>
	<link rel="stylesheet" href="mystyle.css">
</head>

mystyle.css => 위의 <style>h1{}</style> 내용 같이 작성

CSS 구문은 선택자와 함께 열림
선택자를 통해 스타일을 지정할 HTML 요소를 선택
중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행
각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미
- 속성 : 어떤 스타일 기능을 변경할지 결정
- 값 : 어떻게 스타일 기능을 변경할지 결정

선택자 ⛽

h1{color: blue;}

ㄴ> HTML 문서에서 특정한 요소를 선택하여 스타일링 하기 위해서는 반드시 선택자가 필요

기본 선택자

전체 선택자, 요소 선택자
클래스 선택자, 아이디 선택자, 속성 선택자

결합자

자손 결합자, 자식 결합자
일반 형제 결합자, 인접 형제 결합자

의사 클래스/ 요소

링크, 동적 의사 클래스
구조적 의사 클래스.

<style>
전체 선택자 
	{
color: red;
}
요소 선택자 :
h2 {
color: orange;
}
h3,h4{ font-size: 10px;
}
</style>

<style>
클래스 선택자
.green {
	color: green;
}
id 선택자
#purple {
	color: purple;
}
자식 결합자
.box > p {
	font-size: 30px;
}
자손 결합자
.box p {
	color: blue;
}
</style>

CSS 선택자 정리 ✅

요소 선택자 → HTML 태그를 직접 선택 h2 {color: orange;}
클래스 선택자 → 마침표 문자로 시작하며, 클래스가 적용된 모든 항목을 선택
아이디 선택자 → # 문자로 시작하며, 아이디가 적용된 모든 항목 선택 일반적으로 하나의 문서에 한번만 사용, 단일 id 사용을 권장

!important —> 인라인 > id선택자 > class 선택자 > 요소 선택자

CSS 상속 👶

CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속한다

상속이 되는것과

font color text-align 텍스트 관련 요소.

안되는 것이 있다.

width height .. 박스 모델 요소 포지션 관련 요소

CSS 단위 🔢

em

상속의 영향을 받음

요소에 지정된 사이즈에 상대적인 사이즈를 가진다.

rem

상속의 영향을 받지 않음

최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가진다.

Untitled

<a class="em">
	<class="em">
	<class="rem">
</a>

viewport

유저에게 바로 보이게 되는 웹 컨텐츠의 영역

결합자🖇️

자손 결합자 selector A 하위의 모든 selectorB 요소
```
div span {
	color : red;
}
div 안 span 만 빨강색
```

자식 결합자 selector A 바로 아래의 selector B 요소

div > span {
	color : red;}
div 안 바로 밑의 span 만 빨강

일반 형제 결합자 selector A의 형제 요소 중 뒤에 위치하는 selector B 요소를 모두 선택
```
p ~ span { color : red;}
p 태그 밑의 모든 span 이  빨강 
```
인접 형제 결합자 selector A의 형제 요소 중 바로 뒤에 위치하는 selctorB 요소를 선택
```
p + span { color : red;}
p 태그 바로 뒤의 span이 빨강
```