1. HTML문서 안에서 CSS를 적용할 태그 내에 입력하기(inline style sheet)
2. HTML 문서 안에서 <style>태그 내에 입력하기(internal style sheet)
3. 외부 CSS 파일 연결하기(linking style sheet)
1. HTML문서 안에서 CSS를 적용할 태그 내에 입력하기.
가장 기본적인 방법이다. 태그에 style어트리뷰트의 값으로 원하는 css값을 입력한다.
<div style="border:1px solid red;">빨간 테두리가 있는 박스를 만들고싶다!</div>
적용할 css정보가 많지 않은 경우 사용하면 좋은 방법이다. 적용해야 하는 css정보가 많으면 코드가 지저분해지고 재사용이 불가능하다는 단점이 있다.
2. HTML 문서 안에서 <style>태그 내에 입력하기
그 다음 방법은 <style>태그를 이용하는 방법이다. 보통 <head>태그 사이에 넣는 경우가 일반적이지만 HTML 문서 어디에 넣어도 적용된다.
<html>
<head>
<style>
div {
border:1px solid red;
}
</style>
</head>
<body>
<div>빨간 테두리가 있는 박스를 만들고싶다!</div>
</body>
</html>
1번 방법보다 비교적 코드가 잘 정돈되고 문서 내에서 재사용이 가능하지만 파일 간에는 재사용이 불가하다.
3. 외부 CSS 파일 연결하기(linking style sheet)
마지막으로 별개의 CSS파일을 만들어 HTML 파일 내에서 연결하는 방법이다.
<head>태그 내에서 <link>태그를 이용해 연결한다.
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div>빨간 테두리가 있는 박스를 만들고싶다!</div>
</body>
</html>↓style.css파일
div {
border:1px solid red;
}
'Programming' 카테고리의 다른 글
| [CSS] Position의 모든것★ (0) | 2021.03.01 |
|---|---|
| [HTML] section태그와 article 태그의 차이점 (0) | 2021.02.16 |
| Google clone - 구글 홈페이지 따라하기 (0) | 2021.02.06 |
| 마크다운이란? 마크다운 문법 / 사용법 총 정리 (0) | 2021.02.04 |
| [HTML] 시멘틱 마크업 (0) | 2021.02.03 |
