📖 CSS 정의
Cascading Style Sheets의 준말.
HTML이 웹페이지의 내용을 담당한다면, CSS는 웹페이지의 디자인을 담당한다.
정의하는 방법으로는
- 내부 스타일시트
- 외부 스타일시트
- 인라인 스타일시트
등이 있다.
🤔 CSS를 적용하는 3가지 방법
✅ Inline 방식
해당하는 Tag안에 style 속성을 통해 적용하는 방법
<div style="background-color: aqua;">하이</div>💡 css 속성뒤에 마무리로 세미콜론을 넣어준다.
제일 마지막 속성에는 세미콜론을 안 넣어도 동작은 하나 넣어주는 게 명시적으로 좋다.
✅ Style tag 방식
head 태그 안에 style태그를 선언하여 적용하는 방법
<!DOCTYPE html>
<html lang="ko">
<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>HTML/CSS 예시 파일</title>
<!-- head안에 style 태그 적용 -->
<style>
div {
background-color: aquamarine;
}
</style>
</head>
<body>
<div>하이</div>
</body>
</html>💡 style tag는 왜 head 안에 선언해야 될까?
html 문서는 위에서부터 아래로 읽기 때문에 style tag가 body태그의 중간이나 끝에 위치할 경우 css가 처음에 적용 안된 채로 렌더링 되다가 나중에 적용되어 속도가 늦거나 오류로 보일 수 있다
✅ link를 통한 외부 css파일 적용 방식
style태그와 마찬가지로 head안에 link태그를 선언하여 적용하는 방법
link 구성요소
<link rel="stylesheet" href="./style.css">rel : 어떤 타입의 파일을 가져올지 설정해 준다.
href : 가져올 파일의 경로를 넣어준다.
link 사용예제
아래와 같이 파일모음 안에 파일들이 구성되어 있다고 가정하고 코드 예제처럼 적용해 주면 된다.
📦파일모음
┣ 📜index.html
┗ 📜style.css
<!DOCTYPE html>
<html lang="ko">
<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>HTML/CSS 예시 파일</title>
<!--
link태그도 style태그와 마찬가지로 head태그 안에 위치한다.
rel : stylesheet라는 타입의 파일을 가져온다.
href : 불러올 style.css 파일 경로.
-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>하이</div>
</body>
</html>
🤔 tag, class, id에 CSS 적용방법
css에서 tag는 간단하게 태그명만 적으면 된다.
class를 적용할 땐 앞에 . 으로 시작하며, id는 앞에 #으로 시작한다.
div {
background-color: aqua;
}
.class {
background-color: red;
}
#id {
background-color: blue;
}
✅ id와 class 차이점
ID
아이디는 고유한 값이기에 단 하나만 존재해야 한다.
🤙 여러 태그에 중복된다 하더라도 문제없이 브라우저에선 잘 렌더링 되나 개발자끼리의 약속이다
또한, 하나의 태그에 여러 아이디를 선언하지 않는다
CLASS
클래스는 여러 번 사용도 가능하며 한 줄에도 여러 개의 클래스가 들어갈 수 있다
ID / CLASS 사용 예시
잘못된 예시)
<!-- 똑같은 아이디가 여러개인 경우 -->
<div id="same">하이</div>
<div id="same">바이</div>
<!-- 한줄에 여러개의 아이디가 들어가는 경우 -->
<div id="same different">하이</div>
옳은 예시)
<!-- 개발자끼리의 약속으로 한 태그에 아이디는 단, 하나만 사용 -->
<div id="same">하이</div>
<!-- class는 같은 클래스도 여러번 사용 가능하다 -->
<div class="left"></div>
<div class="left"></div>
<!-- class는 한 줄에 여러개의 class 사용이 가능하다 -->
<div class="left right center"></div>
🤔 CSS선택자 우선순위
같은 선택자가 여러 CSS명령을 중복으로 받는 경우를 생각하면 일반적으로 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높다.
선택자마다 우선순위를 변태처럼 수치화시킨 분들의 값을 가져왔다.
| 선택자 | 우선순위 |
| 전체 선택자(*) | 0 |
| type 선택자 (p, h1, ul, ...) | 1 |
| 가상 선택자 (:first-child, ...) | 10 |
| class 선택자 (.abc, ...) | 10 |
| id 선택자 (#abc, ...) | 100 |
태그에 직접 입력하는 인라인 스타일은 위의 모든 선택자보다 우선으로 실행되며, 최우선으로 CSS를 적용해야 할 경우에는 선택자의 마지막에 "!important"를 붙이면 된다.
div { color: red !important;}
결론
태그선택자 < class 선택자, 가상 선택자 < id 선택자 < 인라인 스타일 < !important 순이 되겠다.
+추가
본문 내용은 위에서 끝났으나, 궁금한 점이 하나 생긴다.(안 생기면 지나가셔도 됩니다)
자바스크립트로 style을 준다면 인라인스타일로 적용된다. 그렇다면 해당 태그 style에 이미 !important 가 있는 경우에는 스크립트를 간절하게 적용해도 아래와 같이 적용이 안 되는 마음 아픈 일이 발생한다.
See the Pen 우선순위 예시 by newExpand (@newExpand) on CodePen.
한 가지 해결법은 인라인에도 !imprtant를 넣으면 인라인이 이긴다. 그럼 스크립트로 !important를 넣어보자
See the Pen Untitled by newExpand (@newExpand) on CodePen.
해결 됐다. 제일 좋은 방법은 이런 코드를 안 만나는 게 아닐까..? 계속 공부해 봐야겠다.
'CSS' 카테고리의 다른 글
| [CSS] CSS Attribute 선택자 정리 (0) | 2023.02.23 |
|---|---|
| [CSS] 자주 쓰이는 Scss 핵심 기능 (0) | 2023.02.14 |
| [CSS] position 정리 (0) | 2023.02.13 |
| [CSS] CSS Box Model (0) | 2023.02.13 |
| [CSS] Grid 활용법 (0) | 2023.02.09 |
댓글