오늘은 CSS 얘기 할거다. 솔직히 HTML은 레이아웃 잡기만 하면 그만인거라 뭐 어려운거도 없고 설명할 것도 없고 귀찮을 것도 없는데, CSS는 어려운거, 설명할건 없는데 귀찮은게 좀 있다고 생각한다. 그래도 체계만 대충 잘 알면 할만 할테니 한번 시작해보자.
1. CSS란?
일단 우선적으로 CSS는 뭐하는데 쓰는 앨까? HTML로 만든 구조들을 원하는 자리에 배치하고 예쁘게 꾸며주는 역할을 한다. 우리가 HTML만 가지고 웹을 띄워보면 진짜 이게 뭔가 싶은 구시대적 디자인이 뚝딱하고 뜨는걸 볼 수 있는데, 사람 생각은 다 똑같은지 그 모양새가 혐오스러워 만든게 CSS라고 보인다.
그럼 이 녀석을 어떻게 쓰는지 알아보기 전에 사전에 알아둘게 있는데, 이 녀석의 이름의 의미다. 왜 이걸 알아야하냐면 이름을 알면 이해하기가 쉽거든. CSS는 Cascading Style Sheeet 의 약잔데 영어 어렵다는 사람들을 위해 일단 직독직해 해보면, 위에서부터 아래로 흘러내려오는 스타일시트라는 뜻이다.
바로 위짤이 생각나는 설명인데, 놀랍게도 저게 맞는 설명이다. 자세히 한번 들어가보자. CSS는 가장 상위에 적용되어있는 스타일이 자손들까지 차례차례 상속되어 적용이 된다는 특징이 있다. 그래서 물이 흘러내려가듯이 위에서부터 아래로 모두 적용이 되기 때문에 CSS 라는 이름이 붙은거다.
2. CSS의 사용방법
1) 내부 스타일 / 외부 스타일 시트
일단 아주 고전적인 웹개발을 한다고 가정하고 기본적으로 CSS는 두가지로 적용하는 방법이 나뉜다.
<head>
<style>
p {
color: red;
} /* p태그에 content 색상을 빨간색으로 한다는 뜻입니다.*/
</style>
</head>이렇게 쓰는 스타일이 있고, 이걸 내부 스타일이라고 한다.
<head>
<link rel="stylesheet" href="/asset/style.css">
</head>그리고 이렇게 style.css 파일을 불러와서 적용하는걸 외부 스타일이라고 한다.
지나가듯이 이야기하자면 최근 가장 일반적인 React 와 같은 SPA 의 경우에는 위의 방식으로 CSS를 적용하지는 않고, 아예 컴포넌트 내부에서 import 문법을 사용해import "/asset/style.css" 이런 식으로 작성을 하게 된다. 그러면 알아서 해당 스타일 시트에 적용되어있는 스타일들이 선택자를 통해 지정해둔 요소들에게 적용된다고 보면 되겠다.
2) Selector(선택자)
CSS에서 가장 중요한게 뭐냐고 묻는다면 이 선택자가 가장 중요하다고 하는데, 왜냐고 물으면 난 이렇게 대답할거다. "당신이 군인인데 앞에 적이있는데 총을 들고도 조준을 못하면 되겠냐?" 즉, CSS에서 선택자라는건 조준과 같은 개념이다. 명확하게 내가 스타일을 적용하고 싶은 부분에 조준해서 적용을 해야하는데 선택자를 모르면 조준자체를 못하는거라 그냥 답이 없다는 뜻임.
자 그럼 알아보자.
일단 그냥 내가 알고 있는 선택자 종류부터 나열해보면,
태그 선택자
클래스 선택자
아이디 선택자
태그와 함께 쓰는 선택자
그룹선택자
하위 선택자
전체 선택자
대충 이 정도 인데 하나하나 어떻게 쓰는지 한번 알아보자.
/* 태그 선택자 */
p {
color: red;
}
/* 클래스 선택자 */
.layout {
position: fixed;
}
/* 아이디 선택자 */
#myform {
color: blue;
}
/* 태그와 함께 쓰는 선택자 */
p.center {
color: green;
}
/* 그룹 선택자 */
p, h1 {
color: yellow;
}
/* 하위 선택자 */
p span {
color: white;
}
/* 전체 선택자 */
* {
color: black;
}위의 코드 블럭에 써놓은 예제 처럼 쓰면 된다. {} 안에 있는 내용은 예시로 쓴거고, {} 앞에 있는 것을이 선택자이니 저렇게 작성하면 된다.
뭐 선택자를 써두니 생각나는게 많은데 이 선택자랑 연관된 추가적인 문법으로 &:hover &:active 이런 애들도 있긴하다. "&"는 상위에서 작성한 선택자를 대체한다고 생각하면 되고, 마우스가 올라가면, 이벤트가 동작해서 활성화되면 이런 의미가 된다고 보면 된다. 자세한 내용은 말하자고 하면 터무니 없이 길어지니까 여기서 생략하겠다.
3. 우선순위
두번째로 중요한게 이 우선 순위다. CSS는 적용 되는 우선 순위가 있는데, 다음과 같다.
내부스타일 > 외부스타일 (내부스타일이 우선순위가 더 높아서 우선 반영된다. )
1) !important Style (!important를 붙여둔 부분)
2) Inline Style (html 태그 내부에서 style 속성을 통해 지정하는 스타일)
3) Id Selector Style (id 선택자(#)으로 적용되는 스타일)
4) class Selector Style (class 선택자(.)으로 적용되는 스타일)
5) Tag Selector Style (태그 선택자로 적용되는 스타일)
이걸 기억해둬야 나중에 스타일 수정하거나 할 때 sideEffect 같은걸 고려할 수 있으니 이것도 꼭 알아둬야할 요소 중 하나라고 보면 되겠다.
'Dev > Basic' 카테고리의 다른 글
| [Web] Web Server & Web Application Server (0) | 2023.08.03 |
|---|---|
| [Front Basic] HTML (0) | 2023.06.14 |
| [Git] Git (0) | 2023.06.12 |
| [HTTP] HTTP (0) | 2023.04.27 |
| [REST] REST API (0) | 2023.04.27 |