CSS
HTML 문서에 스타일을 적용하는 언어
스타일 지정 방법
- internal :
<style>태그를 HTML문서에 포함- external : *.css 파일을 HTML문서에 포함
- inline : HTML 태그에 style 속성을 지정
Internal 방법
<style>태그를 HTML 문서 아무곳에나 넣고, 그 안에 선택자(selector)를 이용해 HTML의 태그나 클래스, 아이디 등을 선택해주고 CSS 명령어를 넣어주면 해당 선택자(selector)가 명령에 맞게 바뀐다.
<!DOCTYPE html>
<html lang="ko">
<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>
h1 {
color: brown;
}
p {
color: darkslategrey;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
<p>만나서 반갑습니다.</p>
</body>
</html>
External 방법
.css 파일을 HTML 문서에 연결(link)시키고, .css 파일에 css를 지정하는 방법
*.css 파일
h1 {
color:indianred;
}
p {
color: orange;
}HTML 파일
<!DOCTYPE html>
<html lang="ko">
<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>
<!-- CSS파일 포함하기 -->
<link rel="stylesheet" href="02_external.css">
</head>
<body>
<h1>Hello CSS</h1>
<p>만나서 반갑습니다.</p>
</body>
</html>
Inline 방법
- 태그에 style 속성으로 CSS를 직접 적용
- 가장 우선순위가 높은 적용 방법(style 속성은 무조건 적용된다.)
<!DOCTYPE html>
<html lang="ko">
<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>
h1 {
color: lightslategray;
}
p {
color: lightcoral!important;
}
/* !important 지정되면 최우선 적용(남용 금지, 가급적 사용 자제할 것) */
</style>
</head>
<body>
<!-- Inline 스타일 -->
<h1 style="color : lightslategray">Hello CSS</h1>
<p style="color: darkgoldenrod;">만나서 반갑습니다</p>
</body>
</html>
주석 지정방법
/* 주석 */
자몽 허니 블랙티와 아메리카노 사이 그 어딘가