학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.
부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.
CSS란?
CSS (Cascading Style Sheets)는 마크업 언어의 문서를 "꾸미기 위한" 스타일시트 언어입니다.
다양한 디자인과 레이아웃을 적용하여 웹 페이지의 외관을 제어(꾸밈)합니다.
외부 스타일 시트 (External Style Sheet)
외부 스타일 시트는 .css 파일에 스타일을 정의하고 HTML 문서에서 참조합니다.
여러 HTML 문서에서 동일한 스타일을 재사용할 수 있습니다.
<!-- HTML 파일 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Syntax
CSS 문법은 선택자(Selector)와 중괄호("{ }") 안에 속성: 값; 형식으로 작성됩니다.
p {
color: red; // 속성 : 값
font-size: 16px;
}Selector
선택자 유형을 한글로 번역하는 과정에서 이상하게 번역되었을 수도 있습니다.
주의해주시고 틀린 부분이 있다면 말씀해주시면 감사하겠습니다!
| 선택자 유형 | 설명 | 예시 코드 | 이유 |
| 태그 선택자 | HTML 요소를 직접 지정 | p { color: blue; } | 모든 <p> 태그에 파란색 텍스트 적용 |
| 클래스 선택자 | class 속성을 통해 요소 지정 | .important { font-weight: bold; } | class="important"를 가진 요소에 굵은 글씨 적용 |
| ID 선택자 | id 속성을 통해 단일 요소 지정 | #header { background: grey; } | id="header"를 가진 요소에 회색 배경 적용 |
| 내부 선택자 | 특정 요소 내부의 다른 요소 지정 | div p { color: green; } | <div> 내부의 모든 <p>에 녹색 텍스트 적용 |
| 자식 선택자 | 바로 아래 계층의 자식 요소만 지정 | div > p { color: orange; } | <div>의 바로 아래에 있는 <p>에 오렌지색 텍스트 적용 |
| 형제 선택자 | 같은 계층의 바로 다음 요소 지정 | p + p { font-size: 18px; } | <p> 태그 바로 다음에 오는 <p> 태그의 글자 크기를 18px로 설정 |
| 속성 선택자 | 특정 속성을 가진 요소 지정 | a[href] { text-decoration: none; } | href 속성을 가진 모든 <a> 태그의 밑줄 제거 |
| 가상 클래스 선택자 | 특정 상황(예: hover)에 적용되는 스타일 지정 | a:hover { color: red; } | 마우스가 <a> 태그 위에 올라가면 텍스트 색을 빨간색으로 변경 |
| 가상 요소 선택자 | 요소의 특정 부분(예: 첫 글자, 첫 줄 등)에 스타일 적용 | p::first-letter { font-size: 2em; } | <p> 태그의 첫 글자 크기를 기본 크기의 2배로 설정 |
예시 코드에서 사용되는 네이밍에 대해서는 아래에서 다시 언급하겠습니다.
Internal Style Sheet (내부 스타일 시트)
HTML 문서 내의 <head> 태그 안에 <style> 태그를 사용하여 스타일을 정의합니다.
즉, 외부 스타일 시트는 .css 파일에 스타일을 정의하고 HTML 문서에서 참조하지 않고 <head>내에서 바로 선언해서 사용하겠다는 뜻입니다.
<!-- HTML 파일 -->
<!DOCTYPE html>
<html>
<head>
<p style="color: red; font-size: 16px;">This is a paragraph.</p>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
주의❗ : 유지 관리가 어려워지므 권장되지 않습니다.
Naming
CSS 에서 불러서 쓸 Unique한 이름들이 필요해져서 HTML5 구조(header, nav, article, section, footer)와 UI(data input, menu)에 새로운 element가 추가로 정의되기 시작했습니다.
위에서 잠깐 언급했지만 그 해결책은 바로 ID와 Class를 이용하는 것입니다.
둘의 차이는 아래와 같습니다.
- ID는 하나의 HTML페이지에서 하나의 element에만 쓸 수 있습니다.
- Class는 하나의 HTML페이지에서 element 개수에 제한없이 쓸 수 있습니다.
CSS 박스 모델
CSS 박스 모델은 웹 페이지에서 요소를 시각적으로 표현하는 데 사용되는 디자인 모델입니다. 이 모델은 여러 구성요소로 이루어져 있으며, 다음과 같습니다:
- Content: 실제 내용이 위치하는 영역입니다.
- Padding: 내용과 경계 사이의 여백입니다.
- Border: 요소의 외곽선입니다.
- Margin: 요소와 다른 요소 사이의 여백입니다.
주요 프로퍼티
Content 관련
- width, height: 내용 영역의 너비와 높이를 설정합니다.
Padding 관련
- padding-top, padding-right, padding-bottom, padding-left: 각각의 방향에 대한 패딩을 설정합니다.
- padding: 패딩을 한 번에 설정합니다.
Border 관련
- border-width, border-style, border-color: 경계선의 두께, 스타일, 색상을 설정합니다.
- border: 경계선을 한 번에 설정합니다.
Margin 관련
- margin-top, margin-right, margin-bottom, margin-left: 각각의 방향에 대한 마진을 설정합니다.
- margin: 마진을 한 번에 설정합니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<title>Box Model Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box">
Hello, this is a box!
</div>
</body>
</html>.box {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
background-color: lightgray;
text-align: center;
}Text Property
CSS의 텍스트 프로퍼티를 사용하여 텍스트의 스타일, 간격, 줄 높이 등을 조정할 수 있습니다.
주요 프로퍼티
- font-family: 폰트 패밀리를 지정합니다.
- font-size: 폰트 크기를 지정합니다.
- font-weight: 폰트 굵기를 지정합니다.
- text-align: 텍스트 정렬을 지정합니다.
- line-height: 줄 높이를 설정합니다.
- text-decoration: 텍스트에 밑줄, 취소선 등을 지정합니다.
- color: 텍스트 색상을 지정합니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<title>Font Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p class="custom-font">
This is a paragraph with custom font.
</p>
</body>
</html>.custom-font {
font-family: "Courier New", Courier, monospace;
font-size: 20px;
font-weight: bold;
}
Display Property (디스플레이 프로퍼티)
display 프로퍼티는 HTML 요소가 어떻게 렌더링되는지 결정합니다.
주요 옵션은 다음과 같습니다:
주요 옵션
- block: 요소를 블록 레벨로 만듭니다. 새 줄에서 시작하고 전체 너비를 차지합니다.
- inline: 요소를 인라인 레벨로 만듭니다. 새 줄에서 시작하지 않고, 내용만큼의 너비를 차지합니다.
- inline-block: 요소를 인라인 레벨로 만들되, 블록 레벨의 스타일링이 가능하게 합니다.
- none: 요소를 렌더링하지 않습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<title>Display Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="display-block">
This is a block element.
</div>
<span class="display-inline">
This is an inline element.
</span>
<div class="display-none">
This element will not be displayed.
</div>
</body>
</html>.display-block {
display: block;
background-color: lightblue;
}
.display-inline {
display: inline;
background-color: lightgreen;
}
.display-none {
display: none;
}