CSS라는 단어 자체가 Cascading Style Sheet의 약자입니다. 캐스캐이딩(cascading)의 의미는 이후에 따로 살펴볼 예정이니 차치하고, 여기서 말하는 '스타일 시트'의 의미는 무엇일까요? 사실 어찌 보면 굉장히 간단한 의미입니다. 우리가 앞서 기본 CSS 스타일 지정 양식을 살펴보았는데요, 실제 웹 문서상에 적용되는 CSS 파일을 살펴보면 엄청나게 많은 스타일들이 적용되어 있을 것입니다. 이렇게 스타일 적용 원칙을 한 군데 모아둔 것을 스타일 시트라고 칭하게 됩니다.
웹 문서(html)에 적용하게 되는 스타일 시트에는 몇 가지 유형이 있습니다. 기본적으로 [브라우저 기본 스타일]이 있고, 우리가 앞으로 CSS 포맷으로 직접 작성하게 되는 [사용자 스타일]이 존재하죠. 이 각각의 스타일은 어떤 유형이며, 어떤 방식으로 웹 문서에 적용하는지를 하나씩 짚어보겠습니다.
○ 브라우저 기본 스타일
브라우저 기본 스타일은 무엇을 의미할까요? 이름에서 유추할 수 있듯이, 별다른 스타일을 적용하지 않고 웹 문서를 작성할 경우 적용되는 스타일 입니다. 아래의 태그를 보시면, 별다른 스타일과 관련된 표현 없이, input 및 텍스트 태그를 사용했습니다. 이럴 경우에는 브라우저에서 미리 정한 스타일이 적용되기 때문에 브라우저의 종류에 따라 다르게 보이기도 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>브라우저 기본 스타일</h1>
<p>브라우저에서 기본적으로 적용하는 스타일.</p>
<p>별도의 스타일 관련 설정 없이 적용합니다.</p>
</body>
</html>
브라우저 기본 스타일
브라우저에서 기본적으로 적용하는 스타일.
별도의 스타일 관련 설정 없이 적용합니다.
○ 인라인 스타일
스타일 시트의 분류 중, 사용자 스타일의 한 종류이자 가장 기본적인 형태인 인라인 스타일입니다. 인라인 스타일도 네이밍에서 유추할 수 있듯이, 각각의 태그에 특정 스타일을 간단하게 적용하고 싶을 때 해당 태그의 속성 중의 하나로서 'style' 속성을 사용해 스타일을 지정하는 것입니다. 적용을 원하는 태그의 속성에 style="속성: 속성값;" 형태로 추가하면 해당 태그에만 이 스타일 속성이 적용됩니다.
위에서 사용한 p 태그 중 첫 번째 줄에만 글자 색상을 빨간색으로 적용해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>브라우저 기본 스타일</h1>
<p style="color:red;">브라우저에서 기본적으로 적용하는 스타일.</p>
<p>별도의 스타일 관련 설정 없이 적용합니다.</p>
</body>
</html>
브라우저 기본 스타일
브라우저에서 기본적으로 적용하는 스타일.
별도의 스타일 관련 설정 없이 적용합니다.
○ 내부 스타일 시트
내부 스타일 시트에서부터 비로소 우리가 배웠던 선택자/속성/속성값을 지정하는 CSS의 문서 형태를 사용하게 됩니다. 이 스타일 관련 정보는 <head> </head> 태그 내에 하위 태그로 <style> </style>를 사용하여 이 스타일 태그 사이에 스타일 관련 값들을 작성하게 됩니다.
위의 예시 문서에서, h1 태그에 배경색, 글자색, 패딩값을 적용한다고 할 때 이 내부 스타일 시트 방식을 적용하여 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
<h1>브라우저 기본 스타일</h1>
<p style="color:red;">브라우저에서 기본적으로 적용하는 스타일.</p>
<p>별도의 스타일 관련 설정 없이 적용합니다.</p>
</body>
</html>
○ 외부 스타일 시트
사실 이론적으로는 온갖 스타일 속성들을 각각의 웹 문서의 <style> 태그에 모두 작성해 적용한다면 특별한 외부 스타일 시트를 사용할 필요가 없습니다. 하지만, 실제 상용되는 웹 서비스 등에서 적용되는 스타일 시트를 보면 그 내용이 어마어마하게 긴 경우가 많습니다. 또한, 여러 개의 웹 문서가 동일한 스타일 시트를 적용하는 경우도 많기 때문에 - 각각의 웹 문서가 동일한 <style> 태그의 내용을 적용하는 것은 낭비에 가깝죠.
그래서 *.css 형태의 파일을 별도로 작성해 두고, 웹 문서에서 별도의 <style> 태그가 아닌 <link> 태그를 이용해 별도의 css 파일 스타일 시트를 적용하도록 처리합니다.
<link rel="stylesheet" href="파일 경로">
위의 예시에서 css\style.css라는 파일을 이용해 스타일 시트를 적용한다고 가정하면, 다음과 같이 태그를 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>브라우저 기본 스타일</h1>
<p style="color:red;">브라우저에서 기본적으로 적용하는 스타일.</p>
<p>별도의 스타일 관련 설정 없이 적용합니다.</p>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 1. CSS의 기본 개념(4) - Cascading (0) | 2023.03.23 |
|---|---|
| [CSS] 1. CSS의 기본 개념(3) - 기본 선택자 (0) | 2023.03.22 |
| [CSS] 1. CSS의 기본 개념(1) - CSS란? (0) | 2023.03.19 |
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 2 (0) | 2023.03.16 |
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 1 (1) | 2023.03.14 |
