CSS 기본 문법
기본 형태
body{
background-color:red;
color :white;
}
CSS 문법에서 선택자(body)를 입력하고, 그에 대한 속성자 (background-colod)와 값(red)을 설정한다. 여기서 선택자는 html에서의 요소를 말한다.
요소 선택
<!--HTML-->
<p class="contents-text">콘텐츠 텍스트</p>
<p class="contents-text">클래스는 동일 값을 여러군데 사용 가능</p>
<p id="text">콘텐츠 텍스트</p>
HTML 요소를 CSS의 속성자로 선택할 수 있다.
태그 명으로 찾기
/*--CSS--*/
p{
color : white;
}
선택자에 태그명을 입력하여 선택한다.
Class로 찾기
/*--CSS--*/
.contents-text{
color : white;
}
Class라는 속성자로 HTML에서 요소로 지정할 수 있으며, 이를 선택자로 지정할 수 있다. class는 하나의 값을 여러 요소에 중복으로 넣어 사용할 수 있다.
ID로 찾기
/*--CSS--*/
#text{
color : white;
}
id라는 속성자로 HTML에서 요소로 지정할 수 있으며, 이를 선택자로 지정할 수 있다. id는 하나의 값을 여러 요소에 중복으로 넣을 수 없다.
CSS 선언 방법
태그에 작성
<!--HTML-->
<p style="color : white">콘텐츠 텍스트 1</p>
<p style="color : white">콘텐츠 텍스트 2</p>
<p style="color : white">콘텐츠 텍스트 3</p>
HTML 태그 안에 직접 스타일을 작성한다.
HTML Style에 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.contents-text{
color : white;
}
</style>
</head>
<body>
<p class="contents-text">콘텐츠 텍스트</p>
<p class="contents-text">클래스는 동일 값을 여러군데 사용 가능</p>
<p id="text">콘텐츠 텍스트</p>
</body>
</html>
HTML의 Style 태그 안에 스타일을 넣는다.
외부에서 링크 걸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
<meta name="author" content="rosa.kim">
<meta name="description" content="rosa.kim's test"
<meta name="viewport" content="width=device-width, initial-scal=1.0">
<link rel="stylesheet" href="./main.css"><!--CSS 외부 연결-->
</head>
<body>
<p class="contents-text">콘텐츠 텍스트</p>
<p class="contents-text">클래스는 동일 값을 여러군데 사용 가능</p>
<p id="text">콘텐츠 텍스트</p>
</body>
</html>
HTML의 link태그로 외부에 있는 CSS 파일을 연결한다. 여기서 'rel'은 현재 문서와 외부 문서의 관계를 지정하며, href는 css 문서의 위치를 말한다.
'달밤에 코딩하기 > HTML CSS 공부하기' 카테고리의 다른 글
| #6 - HTML 태그 -head (0) | 2021.04.06 |
|---|---|
| #5 - HTML 작성 준비 (0) | 2021.04.04 |
| #3 - HTML 기본 문법 (0) | 2021.04.04 |
| #2 - VS Code 사용법 (0) | 2021.04.04 |
| #1 - 배경 지식 쌓기 (0) | 2021.04.04 |
