CSS
CSS(Cascading Style Sheets) : HTML 웹 문서의 스타일을 표현하는 언어로 HTML 코드로 작성된 웹 요소들이 어떻게 표시되어야 할지를 정의한다.
body { // 선택자
font-size : 9pt; // CSS 속성 값
} // CSS 속성
font-size : 9pt로 설정했는데 글자의 크기를 9pt 크기만큼으로 설정한다는 뜻이다.
CSS의 구조
화면 상의 HTML로 이루어진 요소들에 대응하여 스타일 세트를 각각 적용한다.
<html>
<body> {font-size : 9pt;}
<h1> ... </h1> { font-weight: bold; color: green; }
<p> { margin: 5px; font-size: 8pt; }
...
</p>
</body>
</html>
body 태그 안에 있는 글자들의 크기는 9pt가 될 것이고 폰트는 굵게, 색은 green색으로 이런식으로 진행한다고 생각하면 된다.
이 CSS만 저장된 파일을 .css 확장자로 저장하고 html 파일에서 import를 진행하게 되면 내가 지정한 스타일을 불러올 수 있다.
CSS를 선언하는 법
CSS를 HTML에 적용하는 3가지 방법
- 인라인(inline) 스타일
- 내부 스타일 시트
- 외부 스타일 시트
inline 선언
각 html 태그에 직접 style 속성을 이용해서 선언한다.
<p style="font-size: 11pt"> ... </p>
내부 스타일 선언
같은 html파일 내에 style 태그를 사용해서 태그 내부에 선언한다. 보통 head 태그 내에 style 태그를 작성한다. 선택자라는 문법을 사용해서 문서 내의 요소(HTML 태그로 생성된 화면 요소)를 선택해서 스타일을 지정한다.
<head>
<style>
p {
font-size : 11pt;
}
</style>
</head>
<body>
<p> ... </p>
</body>
외부 스타일 선언
내부 스타일 선언에 선언된 스타일 세트들을 외부 파일(.css 확장자를 가진)에 선언하고 link 태그로 적용하려는 html에 불러오는 방법이다.
<head>
<lint rel="stylesheet" type="text/css" href="main.css"/>
</head>주석 쓰기
csss 코드에서는 다음과 같이 주석을 저장한다.
<head>
<style>
/* p 태그에 글자 크기 조정 */
p {
font-size: 11pt;
}
</style>
</head>
<body>
<p> ... </p>
</body>글자와 관련된 스타일
color, font-family, font-size, font-weight, line-height
- color : 글자 색 (빛의 3원색 기준, 16진수 코드, rgb(x, x, x), rgba(x, x, x, x) 형태)
- font-family : 글씨체 (글씨체에 띄어쓰기가 있을 경우 쌍따옴표를 사용)
- font-size : 글씨 크기 (pt, px, em 등의 단위를 사용)
- font-weight : 글자 굵기 (100~900 사이의 값이나 bold로 굵은 굵기 표현 가능)
- ling-height : 줄 간격 (% 단위나 px 등의 단위를 사용)
색 표현하기
hexcode : 빛의 3원색 값을 16진수로 2자리씩 표현해서 6자리의 코드를 만든다.
#000000 ~ #ffffff
- 각 자리는 0~f(0~9, a=10, b=11, c=12, d=13, e=14, f=15)
- 3원색을 각각 0부터 15까지의 값의 2자리로 0~255까지의 값으로 표현
- rgb, rgba : 16진수가 아니라 10진수로 직접 각 색의 강도를 표현
- rgb(0, 0, 0) ~ rgb(255, 255, 255)
- 투명도를 표현하고 싶다면 rgba(0, 0, 0, 0) ~ rgba(255, 255, 255, 1.0)
'Front-End' 카테고리의 다른 글
| [CSS] 기초 공부 3 (1) | 2025.01.31 |
|---|---|
| [CSS] 기초 공부 2 (2) | 2025.01.30 |
| [HTML] 기초 공부 5 (3) | 2025.01.28 |
| [HTML] 기초 공부 4 (0) | 2025.01.27 |
| [HTML] 기초 공부 3 (0) | 2025.01.01 |