#2 CSS 기본 문법 및 사용 방법
CSS 기본 문법
선택자{
속성명: 속성값;
}- 선택자 : 어떤 요소에 스타일을 적용할지
- {중괄호} : 선택한 요소에 적용할 스타일을 정의
- 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
- 속성값 : 어떻게 정의하고 싶은지에 대한 정보
p{
color: red;
}p태그의 색을 red로 정의하겠다.
주석
/*
이 안에 작성하면
주석으로 처리된다.
*/CSS 에서 주석은 다음과같이 나타낸다.
HTML에 CSS를 적용하는 방법
- 인라인 스타일 : 태그에 직접 기술하기
- 스타일 태그 : 스타일 시트를 위한 태그를 추가하여 기술
- 문서 간의 연결 : 스타일 시트 문서를 따로 작성하여 HTML문서와 연결하기
인라인 스타일
태그에 style 속성을 추가하여 요소를 직접적으로 스타일을 정의하는 방식.
해당 방법보다는 스타일 시트를 따로 만들어 관리하는것이 더 유용하기 때문에 사용하지 않는다.
스타일 태그
HTML 문서에 < style >< /style > 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다.
문서간의 연결
확장자가 .css 인 스타일 시트 파일을 생성해 그안에 CSS 코드를 작성하고, HTML 문서에 해당 css 문서를 연결해준다.
<link href="./style.css" rel="stylesheet">- href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>HTML문서를 준비라고, 에디터로 여신 다음, 내용을 작성하고 브라우저를 확인해주세요.</p>
</body>
</html>index.html
p{
color: red;
}style.css
'기타 > HTML, CSS 기초' 카테고리의 다른 글
| 기초 CSS (3) (0) | 2023.03.22 |
|---|---|
| 기초 CSS (2) (0) | 2023.03.21 |
| 기초 HTML(7) (0) | 2023.03.21 |
| 기초 HTML(6) (1) | 2023.03.21 |
| 기초 HTML (5) (0) | 2023.03.21 |
댓글