1.CSS란?
CSS(Cascading Style Sheets) : 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일 시트
- HTML의 각 요소에 style을 정의하여 화면 등에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어
2.CSS 선언
- 셀렉터(Selector) : 어느 부분에 style을 줄지 선택
- 프로퍼티(Property) : 요소를 선택하고 {}내에 property(속성)와 값을 지정하여 style을 정의
- 값(value) : property를 특정 단위로 지정 ("키워드", "크기 단위", "색상 표현 단위" 등)
3. HTML과 CSS의 연동
- Link style : 외부 스타일 시트. 가장 많이 사용되며 <link> 태그를 이용해 css파일을 불러온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link style</title>
<link rel="stylesheet" href="linkstyle.css">
</head>
<body>
<h1>Hello</h1>
<p>CSS link style</p>
</body>
</html>h1{color: orangered}
p{background-color: beige}Hello
CSS link style
- Embedding style : 내부 스타일 시트. 매우 간단한 웹페이지의 경우에 쓰임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedding style</title>
<style>
h1{color: blue}
p{background-color: lightgoldenrodyellow}
</style>
</head>
<body>
<h1>Hello</h1>
<p>CSS link style</p>
</body>
</html>Hello
CSS link style
- Inline style : 인라인 스타일. 태그에 직접 CSS를 정의. 우선순위가 절대적으로 높아야 할 경우에 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline style</title>
</head>
<body>
<h1 style="color: fuchsia">Hello</h1>
<p style="background-color: lightsteelblue">CSS link style</p>
</body>
</html>Hello
CSS link style
'CSS' 카테고리의 다른 글
| CSS-Font & Text (0) | 2020.08.10 |
|---|---|
| CSS-선택자(selector)4 : 가상요소 선택자 (0) | 2020.08.08 |
| CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자 (0) | 2020.08.07 |
| CSS-선택자(selector)2 : 속성선택자 (0) | 2020.08.07 |
| CSS-선택자(selector) (0) | 2020.08.06 |
댓글