⭐ CSS를 사용하는 이유
CSS를 통해 웹 문서의 스타일을 정의할 수 있다. HTML로 하지 않고 따로 스타일을 사용하는 이유는
1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
2. 다양한 기기에 맞게 화면 레이아웃을 자동으로 바꾸어 보여주도록 할 수 있다. -> 반응형 웹 디자인
반응형 웹 디자인이란?
사용자가 PC나 모바일 등 접속한 환경에 상관없이 화면 레이아웃을 자동으로 바꿔 주는 방법을 말한다. 2가지 웹 문서를 따로 만드는 것이 아니라 하나의 웹 문서에서 작동하도록 만드는 것이 바로 CSS의 역할이다.
⭐ CSS의 스타일 형식
선택자 { 속성1: 속성값1; 속성2: 속성값2; }💡 예시
/*
CSS의 주석
*/
h1{
text-align: center; /* 가운데 정렬 */
color: skyblue; /* 글자색: 하늘색 */
}CSS 소스 경량화
CSS는 주석과 줄바꿈을 하여 코드의 가독성을 편하도록 할 수 있지만 CSS소스는 네트워크를 이용해
파일을 내려받으므로 되도록이면 파일 크기가 작은 것이 좋다.
그래서 CSS 소스가 길면 주석이나 줄 바꿈, 공백 등을 제거하는 작업을 하여 파일을 경량화한다. 이를 "CSS 소스 경량화" 라고 한다
⭐ CSS의 스타일 시트 형식
스타일 시트란 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어놓은 것이다.
CSS의 스타일 시트 형식에는 3가지가 있다.
1. 인라인 스타일
2. 내부 스타일 시트
3. 외부 스타일 시트
🔎 1. 인라인 스타일 시트
'inline 스타일 '이란 간단한 스타일 정보일 경우 html 태그 안쪽에 style 속성을 사용한 스타일을 말한다.
💡 예시
<!-- html 태그 -->
<p style="color: blue;">inline 스타일</p>🔎 2. 내부 스타일 시트
'내부 스타일 시트'란 웹 문서 안에 사용할 스타일을 같은 문서 안에 정리한 것이다.
스타일 정보는 웹 문서를 화면에 표시하기 전에 결정해야 하므로 <head> 태그 안에서
<style>과 </style> 태그 사이에 작성한다.
내부 스타일 시트의 범위
HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그이다.
💡 예시
<!DOCTYPE html>
<html>
<head>
<title>Ex_inherit</title>
<!-- 내부 스타일 시트 -->
<style>
h1 {
padding: 10px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1>
<p>p 태그</p>
<a href="#">a 태그(밑줄)</a>
</h1>
</body>
</html>🔎 3. 외부 스타일 시트
웹 문서는 대부분 여러 웹 문서로 구성되어 있고 같은 스타일을 여러 웹 문서에 사용한다. 그런데 그때마다 웹 문서를 내부 스타일 시트를 사용하여 만든다면 서버 공간과 문서를 내려받는 시간까지 낭비가 된다. 이를 해결하기 위해서 여러 웹 문서에서 사용할 스타일을 별도로 저장해놓고 필요할 때 사용하는 경우가 대부분이다. 이렇게 따로 저장한 스타일을 "외부 스타일 시트" 라고 하고 파일 확장자는 *.css를 사용한다.
💡 기본형
<link> 태그는 해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용한다.
<!-- html head 태그 안에서 사용 -->
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">rel 속성
필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다.
Ex) alternate, author, dns-prefetch, help, icon, license, next, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet
💡 예시
CSS 파일(styleEx.css)
h1 {
padding: 10px;
background-color: skyblue;
}html 파일
<!DOCTYPE html>
<html>
<head>
<title>Ex_inherit</title>
<!-- 외부 스타일 시트 -->
<link rel="stylesheet" href="styleEx.css">
</head>
<body>
<h1>
<p>p 태그</p>
<a href="#">a 태그(밑줄)</a>
</h1>
</body>
</html>⭐ CSS의 기본 선택자
선택자란 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것이다. 선택자의 종류에는 5가지로 분류할 수 있다.
1. 전체 선택자
2. 타입 선택자
3. class 선택자
4. id 선택자
5. 그룹 선택자
🔎 1. 전체 선택자
'전체 선택자'란 스타일을 문서의 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용한다. 전체 선택자는 *(별)을 사용한다.
💡 기본형
* { 속성: 값;......}💡 예시
<style>
* {
padding: 10px;
background-color: skyblue;
}🔎 2. 타입 선택자
'타입 선택자'란 특정 태그를 사용한 모든 요소에 스타일을 적용하는 선택자이다.
💡 기본형
태그명 { 속성: 값;......}💡 예시
h1 {
padding: 10px;
background-color: skyblue;
}🔎 3. class 선택자
'class 선택자'란 특정 부분만 선택해서 스타일을 적용하기 위해 사용하는 선택자이다.
class 선택자는 한 문서에 여러 번 적용할 수 있다.
💡 기본형
.class명 { 속성: 값;......}💡 예시
<html>
<head>
<style>
.ex_class{
width: 120px;
height: 50px;
border: 2px solid;
}
</style>
</head>
<body>
<div class="ex_class"> class 스타일1</div>
<div class="ex_class"> class 스타일2</div>
</body>
</html>🔎 4. id 선택자
'id 선택자'란 특정 부분만 선택해서 단 한번만 스타일을 적용하기 위해 사용하는 선택자이다.
id 선택자는 한 문서에 한 번만 적용할 수 있다.
💡 기본형
#id명 { 속성: 값;......}💡 예시
<html>
<head>
<style>
#ex_id{ background-color: #88D8FD; width: 130px; height: 40px; }
</style>
</head>
<body>
<div id="ex_id">아이디 스타일</div>
</body>
</html>🔎 5. 그룹 선택자
'그룹 선택자'란 여러 개의 복수 태그를 동시에 선택자로 지정할 때 사용한다.
여러 선택자를 그룹으로 묶는 기능으로 ,(쉼표)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 공통적으로 한 번만 정의한다.
💡 기본형
선택자 1, 선택자 2 { 속성: 값;......}💡 예시
h1, p {
padding: 10px;
text_align: center; /* 중앙 정렬 */
}출처: 고경희(2021), "베스트셀러Do it! HTML+CSS+자바스크립트 웹 표준의 정석", 이지스 퍼블리싱
