CSS란?
Cascading Style Sheets의 약자로 HTML 같은 마크업 언어로 작성된 웹페이지의 시작적인 디자인, 레이아웃을 담당하는 스타일 시트 언어이다.
- Cascading : 계단식
HTML은 뼈대를 담당하고 CSS는 HTML을 꾸며주는 역할을 한다. 그렇기에 HTML과 CSS는 HTML의 태그들을 배우면서 함께 학습했다.
HTML과 연결하기
- 인라인
작성한 HTML 태그 내에서 작성해 줄 수 있다. 권장하는 방법은 아니다.
- 코드의 가독성 낮음
- 재사용성이 낮음
- 속도 저하 및 성능 이슈 가능성
<h1 style="color: red;">Hello</h1>- style 태그
HTML<head>태그 안에<style>태그로 HTML과 함께 작성해줄 수 있다. 역시 권장되는 방법은 아니다.
- 코드의 가독성 낮음
- 재사용성 낮음
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>- link 태그
HTML의 link 태그로 CSS 파일을 연결 시켜줄 수 있다. 가장 권장하는 방법!
- 유지보수성이 높음
- 재사용성 높음
- 로딩 속도 빨라짐
<link ref="styleshteet" href="css/style.css">작성법
/* 태그로 적용 */
h1 {
color: red
}
div h1 {
color: yellow;
}
/* 가상 클래스 선택자로 적용, div 중 첫번째 */
div:first-cild {
color: purple;
}
/* id로 적용 */
#name {
color: blue;
}
/* class로 적용 */
.text {
color: pink;
}가상 클래스 선택자
가상 클래스의 장점은 class나 id를 추가하지 않고 사용할 수 있다는 것이다. 원하는 태그의 순서를 가상 클래스 선택자로 사용해주면 스타일을 적용할 수 있다.
/* 예시 span의 두번째 */
span:nth-child(2) {
color: white;
}
/* div 중 첫번째 */
div:first-child {
color: bue;
}
/* div 안의 자식 중 첫번째 */
div :first-child {
color: pink;
}가상 요소
예전부터 꽤나 헷갈렸던 친구. 선택자의 일종으로 문서의 특정 부분에 스타일을 적용할 수 있도록 도와준다. 가상 요소는 컨텐츠 이외의 요소들을 선택할 수 있게 해주며, 선택된 요소는 실제로 문서 내부에는 존재하지 않는다. 가상 클래스 선택자와 차별점을 두기 위해 콜론 두개(::)로 시작한다. 물론 콜론(:)으로도 적용은 가능하지만 규칙임으로 지켜준다.
h1::before {
content:"";
background-color: green;
color: white;
}앵커 가상 클래스 선택자
앵커 가장 클래스는 브라우저의 특정 요소에 커서가 향했을 때 원하는 특정 디자인 및 동적인 스타일을 적용해준다.
:link방문하지 않은 링크:visited방문한 링크:hover마우스 커서가 링크 위에 있을 때:acvtive링크가 활성화된 (active) 상태
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
background-color: yellow;
}
a:active {
color: red;
}선택자 우선순위
CSS 에는 충돌 시에 우선되는 규칙이 있다.
- 후자 우선의 원칙
동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따르게 된다. - 구체성의 원칙
더 구체적인 선택자에 한해 순서가 정해진다.
- 인라인 스타일
- ID 선택자
- 클래스 선택자, 속성 선택자, 가상 클래스 선택자
- 요소 선택자, 가상 요소 선택자
- 전체 선택자 (*로 시작하는 선택자를 가장 낮은 순위)
중요성의 원칙 (!important)
CSS에서 !important는 스타일 우선순위를 무시하고 강제로 스타일을 적용할 때 사용하는 속성이다. !important를 스타일 속성 뒤에 추가하면 해당 스타일이 다른 스타일보다 최우선하여 적용된다.
/* important로 인해 red가 적용된다. */
p {
color: red !important;
}
p {
color: blue;
}