728x90
CSS는 HTML이나 XML과 같은 구조화 된 문서를 화면에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다.
즉, CSS는 HTML의 각 요소의 style을 정의하여 화면등에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어이다.
css는 html문서 내에 바로 style태그를 사용하여 기술할 수도 있지만, css파일을 따로 만들어 지정해주는게 좀 더 깔끔하고 정리된 코드를 만드는데 도움이 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<h1>Hello Css!</h1>
</body>
</html>css파일을 html에 연동하는 방법은 link태그를 이용하면된다.
가장 일반적으로 사용된다.
CSS의 기본 구조에 대해서 알아보자.
h1 {
color: blue;
font-size: 20px;
}위의 코드에서 h1은 셀렉터, 셀렉터의 선언블록 안에 묶인 선언들은 프로퍼티와 값으로 이루어진다.
셀렉터로 HTML요소를 선택하고 {} 내에 프로퍼티와 값을 지정하는것으로 다양한 style을 정의할 수 있다.
여러개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분한다.
프로퍼티의 값은 해당 프로퍼티에서 사용할 수 있는 값을 키워드나 크기단위 또는 색상표현단위등의 특정단위로 지정하여야 한다.
728x90
'Web > CSS' 카테고리의 다른 글
| #6. BackGround (0) | 2023.03.10 |
|---|---|
| #5. display, visibility, opacity 프로퍼티 (0) | 2023.03.10 |
| #4. CSS BOX (0) | 2023.03.10 |
| #3. CSS 프로퍼티 값의 단위 (0) | 2023.03.04 |
| #2. CSS의 다양한 셀렉터 (0) | 2023.03.03 |
