💻 CSS를 HTML문서에 적용시키기
HTML문서를 더욱 보기좋게 만든다. 내장 방식, 링크 방식, 인라인 방식, @import 방식 총 4가지 방식을 통해 CSS를 HTML문서에 적용시킬 수 있다.
- 내장 방식 :
<style>요소를 이용해 HTML문서에 직접 추가한다. - 링크 방식 :
<link>요소를 이용해 외부에 있는 CSS파일을 연결할 수 있다. 가장 권장되는 방식이다. 병렬방식으로 빠르게 해석되는 CSS파일부터 적용시킨다.<link rel="stylesheet" href="style.css" />: rel 속성에 외부 파일과의 관계를, href속성에 파일 경로를 명시한다.
- 인라인 방식 : 요소의 style속성에 작성하는 방식이다.
@import방식 :@import규칙으로 CSS문서 안에서 또다른 CSS문서를 가져와 연결하는 방식이다. 직렬방식으로 해당 CSS파일이 해석된 후 그 뒤 CSS파일이 해석된다.@import url(""): 파일 경로를 명시해 연결한다.
💻 선택자
선택자 문법을 통해 원하는 요소에 스타일을 지정할 수 있다. 크게 기본, 복합, 가상 클래스, 가상 요소, 속성 선택자로 나눌 수 있다.
👉 기본 선택자
✔ 전체 선택자
* {
color: red;
}HTML문서의 모든 요소를 선택한다.
✔ 태그 선택자
div {
color: red;
}모든 div요소를 선택한다.
✔ 클래스 선택자
.messi {
color: red;
}클래스 속성 값이 messi인 모든 요소를 선택한다.
✔ 아이디 선택자
#pique {
color: red;
}아이디 속성 값이 pique인 모든 요소를 선택한다.
👉 복합 선택자
✔ 일치 선택자
span.orange {
color: red;
}클래스 속성 값이 orange인 span 요소를 선택한다. 띄어쓰기가 허용되지 않는 점에 주의하자
✔ 자식 선택자
ul > .orange {
color: red;
}ul 요소의 자식 중에 클래스 속성 값이 orange인 요소를 선택한다.
✔ 하위 선택자
div .messi {
color: red;
}div 요소의 클래스 속성 값이 messi인 하위 요소를 선택한다.
✔ 인접 형제 선택자
.messi + li {
color: red;
}클래스 속성 값이 messi인 요소와 형제인 요소들 중에서 바로 다음(코드 순서 상 아래)에 오는 li 요소를 선택한다.
✔ 일반 형제 선택자
.messi ~ li {
color: red;
}클래스 속성 값이 messi인 요소와 형제인 요소들 중에서 바로 다음(코드 순서 상 아래)에 오는 모든 li 요소를 선택한다.
👉 가상 클래스 선택자
.box:hover {
color: red;
}콜론 부터가 가상 클래스 선택자이다. 동작을 만드는 선택자이며, 대표적인 가상 클래스 선택자 몇가지를 알아보자
:hover: 마우스가 올라가 있는 동안, 괄호 안의 CSS내용을 적용시킨다.:active: 마우스를 클릭하고 있는 동안, 괄호 안의 CSS내용을 적용시킨다.:focus: 선택자 요소가 포커스 되면 선택된다. 입력받는 input들이 보통 포커스를 받는다.:first-child: 콜론 전 선택자와 형제 요소들 중에서 첫번째 요소만 선택한다.last-child: 콜론 전 선택자와 형제 요소들 중에서 제일 마지막 요소만 선택한다.nth-child(n): 콜론 전 선택자와 형제 요소들 중에서 n번째 요소만 선택한다.n = 2n: 짝수번째 모든 요소들을 선택한다.2n + 1: 홀수번째 모든 요소들을 선택한다.- 그 외에
n + 2,-n + 3등 여러 수식을 삽입할 수 있다.
:not()부정 선택자 : 콜론 전 모든 요소를 선택하지만, 괄호 안에 있는 요소는 선택하지 않는다.
✔ 부정 선택자 작성 예시
👉 가상 요소 선택자
.box::before {
content : "FC Barcelona!";
}콜론을 두번 작성하고 난 후, 그 뒤 작성 된 내용의 위치에 새로운 내용을 만들어준다. 가상 요소 선택자는 반드시 content속성을 포함하여야 한다.
::before : 현재 요소의 내용 이전에 새로운 내용을 작성한다.
::after : 현재 요소의 내용 다음에 새로운 내용을 작성한다.
👉 속성 선택자
[type="password"] {
color: red;
}대괄호에 명시 된 속성(type속성의 값이 password인 요소)의 요소를 찾아 선택한다.
💻 스타일 상속
텍스트 관련 스타일 속성들은 스타일 상속이 이루어진다. 모든 텍스트 관련 스타일 속성들이 상속 되지는 않지만, 상속 되는 속성들은 모두 텍스트 관련 속성이다.
👉 강제 상속
다른 스타일 관련 속성들도 강제로 상속이 이루어지게 만들 수 있다.
상속 받는 선택자에 상속 시킬 속성에 inherit 값을 주면 해당 되는 스타일 속성을 상속 받을 수 있다.
✔ 예시
✔ 출력 결과
💻 선택자 우선 순위
선택자 별로 각각의 점수가 존재한다. 특정한 어떤 요소가 중복으로 선택되어 스타일이 적용 될 때, 선택자의 점수를 합산하여, 높은 점수를 가진 선택자의 스타일이 선택되어 적용된다.
- 속성의 값에
!important값을 주면 무한대 점수이다. - 인라인 선언 : 1000점이다.
- 예 :
<span style="color:red">Xavi</span>
- 예 :
- 아이디 선택자 : 100점
- 클래스 선택자, 가상 클래스 선택자 : 10점
- 태그 선택자, 가상 요소 선택자 : 1점
- 전체 선택자 0점
- 상속으로 인한 스타일 적용은 점수를 계산하지 않는다.
