CSS란?
CSS는 Cascading Style Sheets의 약자로, HTML로 작성된 웹 페이지의 디자인과 레이아웃을 정의하는 스타일시트 언어이다.
즉, 웹 페이지를 꾸미고 스타일을 정의하는 역할(디자인)을 한다.
계단식 스타일 시트 혹은 종속형 스타일 시트라고도 부르긴 하지만 CSS라고 부르는 것이 일반적이다.
웹 사이트의 구조를 HTML이 담당했다면 디자인은 CSS가 담당하게 된다.
HTML로 건물을 지었다면 건물 내부의 가구를 배치하고 가구의 모양이나 색상 등을 디자인 하는 것이 CSS라고 할 수 있다.
- 구조 : HTML
- 디자인 : CSS
CSS의 사용 방식은 크게 3가지로 나뉘어진다.
- 인라인 스타일 (Inline Style)
- 내부 스타일 시트 (Internal Style Sheet)
- 외부 스타일 시트 (External Style Sheet)
1. 인라인 스타일 (Inline Style)
HTML 요소의 style 속성에 직접 CSS 코드를 작성하는 방식이다. 직접 CSS 코드를 사용하기 때문에 특정 요소에만 스타일을 적용할 때 유용하다.
즉, 인라인 스타일의 장점은 빠른 스타일 적용이다. 개별 코드에 바로바로 스타일을 적용할 수 있기 때문에 어떤 방식보다 빠르게 스타일을 변경할 수 있게된다.
- 장점 : 빠른 스타일 적용
하지만 반대로 말하자면 개별 요소에만 적용되기 때문에 코드의 재사용성이 떨어지며 그만큼 유지 보수가 어렵다.
즉, 1개씩 개별로 스타일을 적용하는 방식이기 때문에 당장에 스타일을 수정해야 할때는 빠르게 적용이 가능한 장점이 있지만 코드의 재활용이 어렵고(재사용성이 떨어짐) 수정을 하려면 개별로 일일히 수정을 해줘야 하는만큼 한번에 유지보수하기가 어렵다는 단점이 있다.
예를 들어 10개 정도의 태그가 있어서 각각 스타일을 적용해주고 싶다면 인라인 스타일로 개별 코드의 스타일을 지정해주면 무척 빠르겠지만 프로젝트가 커질 수록 수정해야하는 요소가 늘어날 것이다.
극단적인 예시로 100만개의 태그가 있어서 여기에 스타일을 하나씩 적용하려고 한다면 사실상 유지 보수는 불가능하다고 할 수 있다. 때무에 인라인 스타일은 소규모 프로젝트에는 유용하나 프로젝트의 크기가 클 수록 사용하기 어렵다.
- 단점 : 재사용성이 떨어짐, 유지 보수의 어려움
인라인 스타일의 예시
<p style="color: blue;">이 텍스트는 파란색이다.</p>
<div style="background-color: lightblue; font-size: 20px;">
이 영역은 밝은 파란색 배경에 20px 크기의 글꼴을 사용한다.
</div>이 텍스트는 파란색이다.
2. 내부 스타일 시트 (Internal Style Sheet)
HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 CSS 코드를 작성하는 방식이다.
한 페이지 내에서 여러 요소에 동일한 스타일을 적용할 때 유용하다.
인라인 스타일보다는 재사용성이 높지만, 여러 페이지에 동일한 스타일을 적용하기는 어렵다.
내부 스타일 시트 (Internal Style Sheet) 예시
<head>
<style>
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>붉은색 굵은 글씨입니다.</p>
<p>이 문단도 붉은색 굵은 글씨입니다.</p>
</body>
붉은색 굵은 글씨입니다.
이 문단도 붉은색 굵은 글씨입니다.
(T스토리 내부에서는 코드가 제대로 구현되지 않아서 구현 예시는 블로그 형태에 맞게 수정하였다.)
3. 외부 스타일 시트 (External Style Sheet)
웹 페이지의 스타일을 정의하는 CSS 코드를 별도의 파일(.css)로 분리하여 관리하는 방식이다.
예를 들자면 다음과 같이 html 문서를 만들고 별도로 디자인 파일인 style.css 문서를 만들어서 해당 디자인 파일의 설정을 html 문서로 불러 오는 방식이다.
이렇듯 외부 스타일 시트를 사용하기 위해서는 html 내에서 링크 태그를 통해서 스타일 스트를 불러와야한다.
즉, 원본 문서인 html과 디자인을 저장할 문서인 css 문서가 1개씩 존재해야한다
<link rel="stylesheet" href="style.css">
style.css에서는 원하는 디자인 형식을 저장해두면 된다. 본문에서는 h2 태그의 폰트 사이즈와 글씨 색상을 지정했다.
해당 설정을 지닌 웹 페이지를 실행하면 아래와 같이 h2 태그로 설정된 내용이 css 시트에 저장된 설정대로 변경되는 것을 볼 수 있다.
반드시 rel="stylesheet"를 사용해야 하는가?
답변은 그렇다이다.
rel 속성은 HTML 표준에 정의된 특정 값들만 사용할 수 있다.
stylesheet은 CSS 파일을 연결할 때 사용하는 표준 값이며, 다른 이름은 브라우저가 인식하지 못한다.
단 href="style.css" 부분의 파일명은 수정해도 괜찮다. 예를 들어, href="mystyle.css" 또는 href="design.css" 등으로 바꿀 수 있는 것이다.
이런 방식으로 전체 디자인에 적용되는 디자인을 손쉽게 바꿀 수 있는 점은 '유지 보수성'이나 '코드 재사용성' 향상에 큰 도움이 된다.
스타일 적용의 우선 순위에 대해서
이런 css 스타일 적용 방식은 1개의 방식만 사용해야 하는 것이 아니라 여러 방식을 중복해서 사용할 수 있다.
하지만 실제 디자인이 어떻게 나타날 지는 스타일간의 우선 순위에 따르게 된다.
1. 인라인 스타일
2. 내부 스타일 시트 / 외부 스타일 시트
3. 브라우저 기본 스타일 시트
기본적으로 인라인 스타일이 가장 높은 우선 순위로 적용되게 된다.
그 다음은 내부 스타일 시트와 외부 스타일 시트인데 둘은 동격의 우선순위를 지닌다.
그렇다면 2개의 스타일 방식을 모두 적용하면 어떤 것이 적용되는 것일까?
정답은 코드가 더 나중에 작성된 스타일이 적용된다는 것이다. 코드는 순서대로 적용되기 때문에 나중에 적힌 코드가 기존 코드를 덮어 씌우게 된다.
예를 들어서 head 태그 내에서 link가 먼저 선언되고 내부 스타일 시트가 나중에 선언되었다. 때문에 '제목 2번' 이라는 글씨는 나중에 선언된 내부 스타일 시트의 설정대로 붉은색 글씨를 가지게 된다.
<!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="style.css">
<style>
h2 {
color: red;
}
</style>
</head>
<body>
<h2>제목 2번</h2>
</body>
</html>제목 2번
그렇다면 반대로 내부 스타일 시트가 먼저 오고 링크 태그가 뒤쪽에 온다면 어떨까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color: red;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>제목 2번</h2>
</body>
</html>
그러면 제목 2번은 파란색 글씨로 표시될 것이다.
제목 2번
여기서 중요한 것은 코드가 뒤쪽에 있어서 적용됐다는 것이 아니라 먼저 앞의 코드를 적용하고, 다시 뒤의 코드로 덮어 씌웠다는 점이다. 때문에 저런식의 코드가 길어지게 되면 브라우저가 레이아웃을 다시 계산하고 화면을 다시 그려야 하기 때문에 성능 저하가 발생할 수 있다.
CSS의 기본 구조
CSS의 기본 구조는 선택자(Selector), 선언 블록(Declaration Block), 속성(Property), 값(Value)으로 구성된다.
1. 선택자(Selector)
- 스타일을 적용할 HTML 요소를 선택한다.
- 요소 이름, 클래스, ID, 속성 등 다양한 기준으로 요소를 선택할 수 있다.
- 예시 : p, .my-class, #my-id, [type="text"]
2. 선언 블록 (Declaration Block)
- 중괄호 {} 안에 속성과 값을 포함하는 부분이다.
- 선택된 요소에 적용할 스타일 규칙을 정의한다.
- 예시 : { color: red; font-size: 16px; }
3. 속성 (Property)
- 스타일을 변경할 요소의 특성을 나타낸다.
- 텍스트 색상, 글꼴 크기, 배경색, 여백 등 다양한 속성이 있다.
- 예시 : color, font-size, background-color, margin
4. 값 (Value)
- 속성에 적용할 스타일의 구체적인 값이다.
- 색상 이름, 픽셀 크기, 백분율 등 다양한 단위와 값을 사용할 수 있다.
- 예시 : red, 40px, 20%
'프로그래밍 > css 기초' 카테고리의 다른 글
| CSS 기초 공부(6) - class란? (0) | 2025.03.10 |
|---|---|
| CSS 기초 공부(5) - 박스 모델 (0) | 2025.03.10 |
| CSS 기초 공부(4) - 수치를 표현하는 방법 (0) | 2025.03.09 |
| CSS 기초 공부(3) - 색상을 표현하는 방법(투명도) (0) | 2025.03.09 |
| CSS 기초 공부(2) - 속성, 값 (0) | 2025.03.09 |