안녕하세요. 오늘은 CSS에 대해 알아볼게요.
CSS
CSS는 Cascading Style Sheets로
단어 하나하나 뜻을 알아보면
Cascading: "위에서 아래로 흐르는", "상속 또는 종속하는"
Style: HTML 문서의 겉모습(디자인)을 결정짓는 것
-> HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 등
종속된 스타일 형식이에요.
CSS Style 형식
/* 기본형 */
선택자 { 속성1: 속성값1; 속성2: 속성값2 }스타일 규칙으로는 속성과 값이 하나의 쌍으로 이루어졌어요.
세미콜론(;)으로 구분하여 스타일 규칙을 여러 개 지정이 가능해요.
선택자는 스타일을 어느 태그에 적용할 것인지 지정,
중괄호{} 사이에 스타일 정보를 입력해요.
p {
text-align: center; /* 텍스트 가운데 정렬*/
color: blue; /* 글자 색상 변경*/
}
CSS comments(주석)
/*
CSS 주석은 이렇게 표시합니다.
한 줄 또는 여러 줄을 입력할 수 있습니다.
*/
CSS 소스 경량화
"css minify" or "compress"는 검색 시 다양한 CSS 소스 경량화 툴 검색이 가능해요.
CSS Style Sheets
스타일 시트는 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 말해요.
브라우저 기본 스타일은 웹 브라우저에 기본을 만들어져 있는 스타일이에요.
사용자 스타일은 사이트 제작자가 만드는 스타일로
"인라인 스타일"과 "내부 스타일 시트", "외부 스타일 시트"로 나눌 수 있어요.
/* 인라인 시트 예제 */
/* style="속성: 속성값;" */
<h1>2023 프로야구 우승팀</h1>
<p style="color: blue;">롯데 자이언츠</p>
<!DOCTYPE html>
/* 내부 스타일 시트 예제*/
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Like Baseball</title>
<style>
h1 {
width: 350px;
padding: 10px;
background-color: black;
color: tomato;
}
p {
color: tomato;
font-size: 20px;
}
</style>
</head>
<body>
<h1>2023 프로야구 우승팀</h1>
<p>롯데 자이언츠</p>
</body>
</html>
+) 내부 스타일 시트는 웹 사이트에서 같은 스타일을 여러 웹 문서에 사용하는 경우에 사용하는데요.
각각 내부 스타일 시트를 적용할 경우 서버 공간과 내려받는 시간이 증가되는 특징을 가지고 있어요.
<!--기본형-->
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
/* 외부 스타일 시트 예제*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Like Baseball</title>
<link rel="stylesheet" href="./styleSheet.css">
</head>
<body>
<h1>2023 프로야구 우승팀</h1>
<p>롯데 자이언츠</p>
</body>
</html>
여기까지 CSS에 대해 알아봤는데요.
웹의 옷을 입히는 건, CSS가 한다는 것을 알게 되었어요.
'Frontend > CSS' 카테고리의 다른 글
| CSS Text / List / Table Style (2) (0) | 2025.10.04 |
|---|---|
| CSS Text / List / Table Style (1) (0) | 2025.10.02 |
| CSS Selectors (3) (0) | 2025.09.30 |
| CSS Selectors (2) (0) | 2025.09.27 |
| CSS Selectors (1) (0) | 2025.09.25 |