CSS (Cascading 이해하기 추가로. ::before, ::after)
CSS에 대한 개념을 간단하게 알아보자.
CSS 이해하기
CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서를 화면에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소의 style을 정의하여 화면에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. 쉽게 말해 HTML은 문서를 구조화했다면 그 구조화된 HTML에 스타일링을 해주는 것이다. (웹페이지를 꾸미기 위해 사용한다.)
Cascading 이해하기
Style Sheets란 스타일을 정의한 문서들이라 생각할 수 있다.
중요한은 Cascading이다. Cascade 의미를 찾아보면
라는 의미이다.
폭포처럼 쏟아지는 물이라는 의미를 살펴보면 물이 계속 떨어지는 것을 의미한다. 이것을 연속적으로 떨어진다는 의미를 가졌다고 생각해보자.
예를 들어, 렌더링된 화면에 '버튼'이 존재한다.
- 먼저 버튼에 대해 개발자가 정의한 styling이 있는지 확인한다. 있으면 개발자가 정의한대로 버튼을 스타일링해주고, 없으면 브라우저로 넘어간다.
- 브라우저에서 기본적으로 정의된 스타일링으로 버튼이 기본값으로 화면에 렌더링된다.
여기까지 살펴보면 세부적으로 정의된 style이 있다면 그것을 쓰고, 없다면 그 다음으로 넘어가는 것을 알 수 있다. 이를 연속적으로 떨어진다는 의미로 Cascading이란 단어를 사용한 것이다.
이것을 좀 더 디테일하게 보면 아래 그림과 같다.
- Author Style: 개발자가 작성한 Style Sheet가 없다면 User Style로 넘어간다.
- User Style: 브라우저 상에서 다크모드를 사용할 것인지, 글자 크기를 조정한다든지 사용자의 취향에 맞게 스타일링하는 것을 User Style이라 한다. 이 스타일도 없다면 Browser로 넘어간다.
- Browser: 브라우저 상에서 기본적으로 지정된 스타일이 있으니 그것을 사용한다.
Cascading 정리
Author Style이 지정한 style이 없다면 User Style로 넘어가고 User Style이 지정한 style이 없다면 결국 Browser의 기본적으로 지정된 style을 사용한다.
이렇게 세부적으로 지정된 style sheet부터 우선권을 가지고 세부적으로 지정된 것이 없으면 그 다음 우선권으로 넘어가는 형태가 된다.
하지만 이런 우선순위를 무시하는 것이 한가지 있는데 바로 !important이다. !important는 우선권이 높은 Author Style이 style을 지정해도 이를 무시하고 !important가 적용된 style을 사용한다.
!important를 사용하는 경우는 HTML 구조를 잘못 설계했거나 안좋은 아키텍처가 되었을 때이다. 따라서 현업에서 !important는 왠만하면 사용하지 말자.
CSS 선택자
HTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야 한다. CSS 선택자는 이런 특정 부분을 선택하기 위한 문법이다.
잠깐 🤳
CSS 선택자를 잘 선택하기 위해서는 가장 중요한 것이 HTML 박스 구조를 잘 짜는 것이 중요하다. HTML안에 커다란 body 태그가 있고 그 body 태그안에 박스들을 마구마구 넣는 것이 아니라 body 태그안에 커다란 section 태그들로 나누고, 또 section 태그안에 작은 박스들로 나누어서 이 박스들을 잘 정리해야 한다. 이렇게 해야만 labeling이 훨씬 쉬워진다. labeling이 쉬워지면 어떤 박스를 스타일링할지 선택하는 것이 쉬워진다. 그래서 HTML 박스 구조를 잘 정리해야 한다.
Reset CSS
웹브라우저마다 각기 다른 렌더링 엔진을 사용하기 때문에 default 스타일이 다 다를 수 있다. 따라서 이를 초기화하여, 다양한 브라우저에서 동일한 스타일로 표시되도록 CSS 초기화하는 것을 Reset CSS라고 한다.
Reset CSS 설정은 W3C에서 권장하는 것이 아니라, 실무에서 크로스 브라우징 이슈를 해결하기 위해 아에 초기화 해놓고 개발한다.
- 스타일을 초기화시켜주는 다양한 기법들이 있지만 최근에는
normalize.css를 많이 사용한다.
가상 요소 셀렉터(Pseudo-Element Selector)
가상 요소 셀렉터란 선택한 요소 안의 특정 부분을 선택하는 것을 말한다. 자주 사용하는 것이 ::before와 ::after가 있다.
::before
::before란 요소를 선택하기 전에 적용하는 것을 말한다. 예를 들어보면 빠르게 이해할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
h1::before {
content: "minsu";
color: blue;
}
h1::after {
content: "James 올림";
color: brown;
}
</style>
</head>
<body>
<h1>님 안녕하세요. 잘부탁드려요~! -</h1>
</body>
</html>먼저 body 태그안에 h1 태그를 넣었다. 안에 내용을 보면 "누구누구님 안녕하세요 -누구누구 올림" 이라고 쓰고 싶다. 그러면 h1::before을 사용하게 되면 h1 태그의 내용이 화면에 나타나기 전에 content를 출력한다. 또한 h1::after를 사용하게 되면 h1 태그의 내용이 화면에 나타난 후에 마지막에 content를 출력한다. 그래서 렌더링된 화면의 모습은 다음과 같다.
h1::before와 h1::after는 content를 꼭 써주어야 한다.
References
'공부 기록' 카테고리의 다른 글
| [CSS] display와 position에 대해 알아보자. (0) | 2022.06.19 |
|---|---|
| [CSS] 박스모델 이해하기 (추가로. background) (0) | 2022.06.19 |
| 웹 표준, 웹 접근성, 크로스 브라우징 개념 (0) | 2022.06.18 |
| [HTML] HTML 이해하기 (0) | 2022.06.18 |
| var VS let VS const (0) | 2022.06.14 |
댓글