CSS는 Cascading Style Sheets의 약자로, HTML과 같은 마크업 언어로 작성된 문서의 표현 또는 스타일을 설명하는 언어입니다. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 글꼴 및 기타 시각적 요소를 제어할 수 있습니다. CSS는 웹 페이지의 내용과 표현을 분리하여 사이트의 외관에 대한 더 많은 유연성과 제어를 가능하게 합니다.
CSS코드 구조
CSS 코드는 선택자(selector)와 중괄호({})로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 선택합니다. 중괄호 안에는 스타일 속성(property)과 값(value)이 쌍으로 적혀 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<h1>CSS</h1>
<p>CSS입니다.</p>
</body>
</html>위 코드에 아래의 CSS를 적용해 꾸밀 수 있습니다.
h1 {
font-size: 24px;
color: blue;
}
p {
font-size: 16px;
color: gray;
}위 코드에서 h1은 선택자이고, {} 안에 있는 font-size, color는 스타일 속성이며, 그 값으로 각각 24px, blue가 지정되어 있습니다. 마찬가지로 p도 선택자이고, {} 안에 있는 font-size, color는 각각 16px, gray로 지정되어 있습니다.
CSS 선택자
CSS 선택자는 HTML 요소를 선택하기 위해 사용됩니다. CSS 선택자는 여러 가지가 있지만, 일반적으로 사용되는 선택지는 다음과 같습니다.
- 태그 선택자(tag selector): HTML 태그 이름을 사용하여 요소를 선택합니다.
- 클래스 선택자(class selector): "."을 사용하여 클래스 이름으로 요소를 선택합니다.
- ID 선택자(id selector): #을 사용하여 ID 이름으로 요소를 선택합니다.
- 자식 선택자(child selector): >을 사용하여 특정 요소의 자식 요소를 선택합니다.
- 후손 선택자(descendant selector): 공백을 사용하여 특정 요소의 하위 요소를 선택합니다.
CSS 스타일
CSS에서는 다양한 스타일 속성을 사용하여 HTML 요소를 꾸밀 수 있습니다. 대표적인 스타일 속성은 다음과 같습니다.
- background-color: 배경 색상을 지정합니다.
- color: 글자 색상을 지정합니다.
- font-size: 글자 크기를 지정합니다.
- font-weight: 글자 굵기를 지정합니다.
- text-align: 텍스트를 정렬합니다.
- padding: 요소 내부의 여백을 지정합니다.
- margin: 요소 외부의 여백을 지정합니다.
- border: 요소 주위에 경계선을 지정합니다.
CSS 주석
CSS에서 주석(comment)을 사용하여 코드에 메모를 남길 수 있습니다. 주석은 코드를 실행할 때 무시되므로, 코드를 해석하는 데 도움을 주는 용도로 사용됩니다. CSS 주석은 /*와 */ 사이에 작성됩니다.
/* 주석 내용 입력 */CSS 파일 연결
HTML 문서 내부에 CSS 코드를 작성할 수도 있지만, 일반적으로는 CSS 파일을 따로 만들어서 HTML 파일과 연결하여 사용합니다. CSS 파일은 .css 확장자를 가지며, HTML 파일에서는 <link> 태그를 사용하여 CSS 파일을 연결합니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS</h1>
<p>CSS입니다.</p>
</body>
</html>위 코드에서 <link> 태그의 href 속성에 CSS 파일 경로를 지정하면 됩니다.
'프론트엔드' 카테고리의 다른 글
| JavaScript (0) | 2023.04.11 |
|---|---|
| HTML (0) | 2023.04.05 |
| Django 기본 설정하기 (0) | 2023.04.04 |
댓글