반응형
CSS : Cascading Style Sheets
HTML 문서에 스타일을 더해준다.
웹문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등)
CSS 기본 문법
선택자{
속성명: 속성값;
}
예시)
p{
color: red;
}
p 태그(선택자)의 색상(속성명)을 빨간색(속성값)으로 하라!
주석 달기
p{
/* color: red; */
}
/* */ 사이의 내용은 주석 처리 된다.
HTML에 CSS를 더하는 방법
인라인 스타일 : 해당 html 태그에 속성을 직접 작성한다.
스타일 태그: html 메타 태그에 CSS 태그를 따로 작성한다.
문서간 연결: CSS 문서를 따로 작성하여 html 문서와 연결한다.
인라인 스타일
<!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>부상 트라우마 인지행동치료</title>
</head>
<body>
<h1 style = "color:red"> 부상 트라우마 인지행동치료</h1>
<p class="contents"> 인지재구성 </p>
<p class="contnets"> 마음챙김 </p>
</body>
</html>
스타일 태그
<!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>부상 트라우마 인지행동치료</title>
<style>
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1> 부상 트라우마 인지행동치료</h1>
<p class="contents"> 인지재구성 </p>
<p class="contnets"> 마음챙김 </p>
</body>
</html>
문서간 연결
html 문서
<!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>부상 트라우마 인지행동치료</title>
<link href="./style.css" rel ="stylesheet">
</head>
<body>
<h1> 부상 트라우마 인지행동치료 </h1>
<p class="contents"> 인지재구성 </p>
<p class="contnets"> 마음챙김 </p>
</body>
</html>
연결한 css 문서(파일명 style.css)
h1{
color:red;
}
p{
color:blue;
}
이 두 문서를 <link href="./style.css" rel ="stylesheet"> 를 통해 연결시켜 준다!
반응형
'CSS' 카테고리의 다른 글
| display 속성 (0) | 2022.08.26 |
|---|---|
| 선택자 (0) | 2022.08.25 |
