css를 적용하는 방법은 3가지가 있다.
인라인 스타일(inline style) 방식
인라인 스타일 방식은 HTML의 태그에 style속성을 사용하여 css코드를 입력하는 방식이다.이 방식은 다른 요소들에 공통 속성으로 부여할 수가 없기 때문에 특별한 경우가 아니면 거의 사용하지 않는 방식이다.
<!-- b태그 안에 style 속성으로 글씨의 색을 바꾸었다. -->
<b style="color:chocolate"> 인라인 방식을 </b> 사용 해보자.내부 스타일 시트(internal style sheet) 방식
내부 스타일 방식은 html의 head태그 안에 style태그를 넣어서 css코드를 입력하는 방식이다.이 방식은 css가 해당 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>
<!-- style태그에서 velog라는 class를 불러와서 색을 지정해 주었다.-->
<style>
.velog{color:cornflowerblue;}
</style>
</head>
<body>#보충설명
class라는 것이 있는데 간단히 말하자면 특정 태그에 내가 이름을 붙여주는 것이다.
<!-- b태그 안에 class속성을 넣고 velog라고 넣어주면
해당 b태그의 이름이 velog라고 이해하면 된다. -->
<b class="velog">
class예시
</b>링킹 스타일 시트(linking style sheet) 방식
링킹 스타일 시트 방식은 외부의 css파일을 html에 link태그로 연결하는 방식이다. 이 방식은 하나의 css파일을 다른 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>
<!-- link태그를 통해 style.css라는 css파일을 연결해 주었다.-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
개발 블로그