CSS는 Cascading Style Sheets의 약자로 HTML 요소들의 색상, 위치, 크기 등을 제어하는 스크립트 언어이다.
CSS를 작성하는 방법에는 세 가지가 있다.
- 인라인(Inline)
- 인터널(Internal)
- 익스터널(External)
1. Inline 방식
해당 방식으로 스타일을 적용하려면 HTML 요소에 style 속성으로 작성한다.
<body>
<h1 style="color:blue;text-align:center">HTML STUDY</h1>
</body>
2. Internal 방식
HTML의 <head></head> 안에 <style></style> 태그로 스타일을 정의한다. 현재 웹 페이지 내에 있는 요소들을 태그나 id, class 별로 스타일을 공통적으로 적용할 때 사용하는 방법이다.
- 태그명으로 정의
현재 페이지 내에서 동일한 태그에 공통으로 스타일이 적용된다.
사용 방법 : 태그명{스타일 속성:값; 스타일 속성:값; ...}
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue}
p{text-align:right}
</style>
</head>
<body>
<h1>Internal</h1>
<p>Internal</p>
</body>
</html>
- id로 정의
사용 방법 : 태그명#id명{스타일 속성:값; 스타일 속성:값; ...}
<!DOCTYPE html>
<html>
<head>
<style>
p{text-align:right}
p#a{background-color:blue; font-size:20pt}
p#b{border:1px solid black}
</style>
</head>
<body>
<p id="a">id:a</p>
<p>id:?</p>
<p id="b">id:b</p>
</body>
</html>
- class로 정의
태그명.class명{스타일 속성:값; 스타일 속성:값; ...}
<!DOCTYPE html>
<html>
<head>
<style>
p{text-align:right}
p.a{background-color:blue; font-size:20pt}
p.b{border:1px solid black}
</style>
</head>
<body>
<p class="a">class:a</p>
<p>class:?</p>
<p class="b">class:b</p>
</body>
</html>
3. External 방식
인터널 방식과 동일하지만 CSS 코드를 외부 파일에 저장하여 HTML에서 링크한다. 하나의 웹 페이지에서만 사용하는 것이 아니라 여러 페이지에서 공용으로 사용한다.
'Web' 카테고리의 다른 글
| 간단한 회원가입 페이지 구현 (1) | 2023.01.02 |
|---|---|
| HTML(2) (0) | 2022.12.31 |
| HTML(1) (0) | 2022.12.22 |
| 구글 클론 사이트 만들기 (1) | 2020.09.16 |
| HTML 입문 (0) | 2020.09.15 |