22.06.17- TIL

오늘 배운 것

css선언 방식과 여러 선택자에 대해서 배웠다.

배운 내용 정리

1. 선언 방식

1) 인라인 방식

<div style="color: red;"></div>

위의 코드처럼 요소의 style속성에 직접 스타일을 작성하는 방식

각각 태그마다 전부 스타일을 적어줘야하기 때문에 재사용성이 떨어짐

2) 내장 방식

<style>
	div {
    	color: red;
   	}
</style>

HTML의 head태그 내부에 style태그로 선언 하여 사용

동일한 여러 태그에 같은 스타일 적용 가능

3) 링크 방식

<link rel="stylesheet" href="./css/main.css">

<link> 태그로 외부 css문서를 가져와서 연결하는 방식

모든 스타일을 하나의 css 파일에 넣고 필요한 html 파일에서 해당 파일을 링크해서 사용하는 방식

재사용 가능

4) @import 방식

@import url("./main2.css");
div {
	color: blue;
    }

css의 @import규칙으로 css문서 안에서 또 다른 css문서를 가져와 연결하는 방식

5) 선언 방식 적용 우선 순위

기본 룰은 가장 늦게 읽히는 것이 우선으로 적용

인라인 방식은 내장, 랑크 방식에 무조건 우선

내장, 링크 방식은 둘 중 늦게 쓰여진 것이 우선

 

2. 선택자

선택자는 스타일을 적용하고자 하는 html 요소를 선택하기 위해 css에서 제공하는 수단

p {
color:red;
}

선택자로 html의 p요소(태그)를 선택하고 {}안에 color라는 속성의 값을 red로 주고 ;으로 끝냄

1) 기본 선택자

별도의 테크닉 없이, 순수하게 무엇인가를 호출할 때 사용

종류: 기본, 태그, class, id 선택자

 

가. 전체 선택자

모든 요소를 선택

* {
color: red;
}

 

나. 태그 선택자

태그 이름이 ABC인 요소 선택

li {
color: red;
}

 

다. 클래스 선택자

class 속성의 값이 ABC인 요소 선택

.orange {
color: red;
}

 

라. id 선택자

id 속성의 값이 ABC인 요소 선택

#orange {
color: red;
}

2) 복합 선택자

특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이 불가능한 경우에 사용

종류: 일치 선택자, 자식 선택자, 후손 선택자, 인접 형제 선택자, 일반 형제 선택자

 

가. 일치 선택자

선택자 A와 B를 동시에 만족하는 요소 선택

.span.orange {
color: red;
}

 

나. 자식 선택자

선택자 A의 자식 요소 B 선택

ul > . orange {
color: red;
}

 

다. 하위(후손) 선택자

A의 하위 요소 B 선택

div .orange {
color: red;
}

 

라. 인접 형제 선택자

선택자 A의 다음 형제 요소 B하나를 선택

.orange + li {
color: red;
}

 

마. 일반 형제 선택자

선택자 A의 다음 형제 요소 B 모두를 선택

.orange ~ li {
color: red;
}

3) 가상 클래스 선택자

사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 

각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 때 사용

특정 요소를 부정 할 때 사용

종류

가상 클래스 선택자

사용자의 행동에 따라 변화: hover, active, focus

요소의 상황: first-child, last-child, nth-child

부정 선택: not