INTRO
웹 사이트를 이용하다 보면 화면이 깨져 보이거나, 모바일에서 PC 버전 그대로 표시되어 불편했던 경험이 있다.
특히 요즘처럼 다양한 디바이스로 웹을 접속하는 시대에는 이러한 불편함이 사용자 경험을 크게 해칠 수 있다.
두 편의 포스팅을 거쳐 이러한 문제를 해결하는 CSS의 기본 문법과 반응형 웹 디자인(Responsive Web Design)에 대해 알아보고자 한다.
이번 포스팅에서는 CSS에 대한 기본 개념과 문법을 설명할 예정이다.
(이러한 개념은 사용자에게 더 나은 경험을 제공하기 위해 꼭 알아야 할 내용들이 될 것이다!)
1. CSS 스타일 적용 방법
CSS로 스타일을 부여하는 방법에는 크게 3가지가 있다.
💡 Inline 스타일
HTML 태그에 직접 style 속성을 사용하여 스타일을 적용하는 방법이다.
<h1 style="color: red">Hello World!</h1>Inline 스타일의 경우, 태그에 직접 적용하기 때문에 셀렉터가 필요 없고 가장 높은 우선순위를 가진다.
💡 Internal 스타일
HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 스타일을 정의하는 방법이다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>위처럼 셀렉터를 이용해 스타일을 적용하며, 해당 HTML 문서에만 적용된다는 특징이 있다.
💡 External 스타일
별도의 CSS 파일을 생성하고 HTML 문서에 연결하는 방법이다.
<link href="sample.css" rel="stylesheet"/>CSS 코드를 별도 파일로 관리할 수 있어 여러 HTML 문서에서 재사용이 가능하다는 특징이 있다.
(필자는 주로 External 스타일을 사용한다!)
2. 스타일 적용 우선순위
디자인을 진행한다면 당연히 알아야하는 개념 중 하나가 적용 우선순위이다.
개발자가 원하는대로 스타일이 적용되도록 제어를 해야하기 때문이다.
스타일은 다음과 같은 우선순위로 적용된다
스타일 적용 우선순위
- Inline 스타일 (가장 높음)
- Internal / External 스타일
우선순위 특징
- 더 가깝게 작성된 스타일이 우선 적용됨
- 동일한 우선순위일 경우 더 구체적인 셀렉터가 우선됨
여기서 가깝게 작성된 스타일이 우선되는 예시 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./sample.css" />
<style>
h1 {
background-color: red;
}
</style>
</head>
<body>
<h1>Sample</h1>
</body>
</html><link> 태그를 사용해서 sample.css를 적용하고 있다.
(sample.css에서는 h1의 백그라운드 컬러를 black으로 정의하고 있다)
하지만 바로 다음에 <style> 태그를 사용해서 백그라운드 컬러를 red로 정의한다.
이러한 상황에서는 직관적으로 알 수 있다시피 <style> 태그가 더 나중에 혹은 더 가깝게 작성되었으므로 해당 태그의 css 스타일이 적용되는 결과를 확인할 수 있다.
3. CSS 문법
CSS 문법을 어떻게 정리해야할지 사실 고민이 조금 많았다.
그래서 우선 CSS 문법을 깔끔하게 정리한 포스트를 공유하고, 필자 기준에서 알아두면 좋겠다는 부분만 추가적으로 정리하고자 한다.
💡 Selector
CSS를 적용하기 위해서는 어떤 대상에 스타일을 적용할 것인지를 특정해야할 필요가 있다.
여기서 사용되는 CSS 개념이 바로 Selector이다.
(1. CSS 스타일 적용 방법에서 이미 사용하고 있었다)
1. 기본 Selector
전체 셀렉터 (*)
- 모든 요소를 선택한다.
* { margin: 0; padding: 0; }
태그 셀렉터
- HTML 태그 이름으로 요소를 선택한다.
p { color: blue; }
ID 셀렉터 (#)
- HTML 태그 이름으로 요소를 선택한다.
// HTML Target <div id="header">Target</div>// CSS Selector #header { background: black; }
클래스 셀렉터 (.)
- class 속성값으로 요소를 선택한다. 여러 요소에 같은 class를 사용할 수 있다.
// HTML Target <div class="container">Target1</div> <div class="container">Target2</div>// CSS Selector .container { width: 80%; }
2. 복합 Selector
자식 셀렉터 (>)
- 부모 요소의 직접적인 자식만 선택한다.
- 즉, 트리의 Depth가 2이상 차이나면 선택하지 않는다.
// HTML Target <div> <p>Target1</p> </div> <div> <p>Target2</p> <div> <p>Target3</p> <span><p>None Target</p></span> </div> </div>// CSS Selector div > p { background-color: black; color: white; }
- Result View
후손 셀렉터 (공백)
- 부모 요소 아래의 모든 해당 요소를 선택한다.
// HTML Target (이전과 동일) <div> <p>Target1</p> </div> <div> <p>Target2</p> <div> <p>Target3</p> <span><p>None Target</p></span> </div> </div>// CSS Selector div p { background-color: black; color: white; }
- Result View
3. 가상 클래스 셀렉터
특정 상태나 조건을 나타내는 셀렉터들이다.
마우스 상호작용
//HTML <div id="test1">마우스를 올렸을 때!</div> <div id="test2">클릭을 했을 때!</div>
- 마우스를 올렸을 때
#test1:hover { background-color: black; color: white; }
- 클릭했을 때
#test2:active { background-color: rgb(114, 156, 196); color: white; }
- Result View
이처럼 Selector를 기반으로 특정 태그에 접근하여 애니메이션이나 스타일을 변화시킬 수 있다.
💡 알아두면 좋은 팁
- 셀렉터는 구체적일수록 우선순위가 높아진다
- 같은 우선순위라면 나중에 작성된 스타일이 적용된다
- ID 셀렉터는 재사용이 어려우므로 클래스 셀렉터 사용을 권장한다
OUTRO
이번 포스팅을 통해서는 CSS에 대한 개념을 나름대로 정리해보았다.
다만, 여기서 정리된 내용은 CSS 문법의 아주 일부분에 불과하니 깊게 공부하길 원한다면 참고란에 기재된 블로그를 살펴보는 것을 추천한다.
또한, CSS는 직접 다뤄봐야 이해가 훨씬 빠르게 되니 셀렉터를 연습할 수 있는 관련 사이트도 하나 추천하며 글을 마친다!
