CSS(Cascading Style Sheets)는 HTML 문서의 글꼴이나 색상, 정렬 등 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. CSS는 HTML과 함께 웹 문서의 기본 개념으로 디자인과 내용을 분리 목적으로 등장했다.
- 선택자{
속성:속성값;
}
스타일의 기본 형식은 스타일 규칙이 어디에 적용될지를 정하는 선택자(selector)와 어떤 항목을 어떻게 변경할지에 대해 적어놓은 속성:속성값;으로 기본적으로 이루어져 있다.
선택자(selector)의 종류
선택자는 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능이다. 셀렉터에는 여러 유형이 있다.
- *{}
전체선택자는 웹 페이지 전체에 적용되는 스타일을 설정한다. 각 브라우저에서 제공되는 디자인을 초기화하기 위한 방법으로 사용되는 경우가 많다. - .클래스명{}
선택자 앞에 점(.)을 붙인경우 HTML태그의 class속성으로 스타일을 지정할 수 있다. - #아이디명{}
선택자 앞에 '#'을 붙인 경우 HTML태그의 id속성으로 스타일을 지정할 수 있다. - 태그이름{}
선택자에 적힌 태그에 스타일 시트를 적용한다. 여러 개의 태그 이름 선택자를 사용할 때에는 콤마(,)로 분리한다. - input[type=타입명]{}
HTML 태그의 특정 속성에 대해 값이 일치하는 태그에만 스타일을 적용한다.
<!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>
*{
background-color: darkgray;
}
h1{
color:teal;
}
.welcome{
color:darkcyan;
}
#notice{
font-weight: bold;
}
p{
font-style: italic;
}
input[type="text"]{
font-size: 20px;
}
</style>
</head>
<body>
<h1> 환영합니다. </h1>
<h2 class="welcome"> OO호텔로 오신 것을 환영합니다. </h2>
<h3 id="notice">몇 가지 공지사항에 대해 알려드리겠습니다.</h3>
<p> 입실시간은 14:00 이며 퇴실시간은 10:00 입니다. </p>
<form method="get">
<label for="name">성함</label><input type="text" name="name" id="name">
</form>
</body>
</html>
스타일의 우선순위
이렇게 스타일을 설정하다보면 겹치는 스타일이 발생하기 마련이다. 이런 충돌을 막기위해서 CSS는는 Cascading(계단식)이라는 뜻처럼 위에서 아래로 흐르며 적용되는 방법을 도입했다. 그리고 우선순위는 세 가지 개념에 따라 지정되었다.
중요도(importance)
- 사용자 스타일 시트 > 제작자 스타일 시트 > 기본 브라우저 시트
사용자 스타일 시트는 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에 맞게 구성해놓은 스타일 시트를 말한다. 사용자 스타일 시트의 경우 CSS로 변경하려고 해도 변경이 되지 않는다.
명시도(Specificity)
- 인라인 스타일 > id 스타일 > class 스타일 > tag 스타일 > 전체 스타일
스타일의 적용 범위가 좁을수록, 즉 필요한 요소에만 적용하는 스타일일 수록 우선순위가 높아진다.
소스에서의 순서(Source Order)
- 중요도와 명시도가 같을 경우에는 가장 밑에 적혀져있는 스타일이 우선적으로 적용된다. 만약 우선 적용 시킬 대상을 지정하고 싶으면 !important를 사용하면 되지만, 보다 효율적인 유지보스를 위해서는 이 방식을 피하는 것이 좋다.
CSS3 스타일 시트 만드는 방법
스타일 시트를 작성하는 방법은 3가지가 있다. <style>태그를 사용하는 방법, 스타일 정보를 별도 파일로 작성(.css)해서 <link>태그를 사용하여 불러오는 방법, style 속성을 사용하는 방법이 있다.
<style>태그 사용
내부 스타일 시트로 <head>태그 내에 작성하여 <style>태그와 </style>태그 사이에 스타일을 규칙을 기록하여 웹 페이지 전체에 적용되는 방법이다.
<!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>
p{
color: palevioletred;
size: 10px
}
</style>
</head>
<body>
<p> 안녕하세요 </p>
</body>
</html>
외부 스타일시트 작성
CSS3 스타일 시트만 떼어내어 .css확장자를 가진 파일에 저장해놓고 <link>태그나 @import문을 사용하여 불러올 수 있다.
- <link rel="stylesheet" href="파일명">
- <style>@import url(파일명);</style>
HTML파일
<!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="css.css">
</head>
<body>
<p> 안녕하세요 </p>
</body>
</html>
CSS파일
/* css.css */
p{
color: rebeccapurple;
size: 10px
}
<style>속성 사용하기
인라인 스타일시트로, 스타일 시트를 사용하지 않고 스타일 적용할 대상에 직접 작성하는 방법으로 인라인 스타일 시트의 경우 HTML과 CSS가 코드에 뒤섞이게 되어 유지보수를 어렵게 하기 때문에 최대한 사용을 지양한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:darkgoldenrod"> 안녕하세요 </p>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS3의 박스모델 (0) | 2024.07.07 |
|---|---|
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |
| CSS에서 배경에 그라데이션을 넣어보자 (0) | 2024.07.03 |
| CSS로 list-style을 변경해보자 (0) | 2024.07.03 |
| CSS의 overflow 기능에 대해 알아보자 (0) | 2024.07.02 |
| CSS3에서 텍스트를 정렬하는 방법 (0) | 2024.07.02 |
| CSS에서 텍스트에 색과 그림자를 입혀보자 (0) | 2024.07.02 |
| CSS에서 폰트를 꾸며보자 (0) | 2024.07.01 |