How to add CSS

송민우·2020년 7월 23일
0

Web 2020Camp

목록 보기
5/9

CSS를 HTML에 추가하는 방법에는
Internal,External,Inline 방식 등이 있다.

1.External 방식
html문서가 아닌 다른 파일에서 CSS코드를 불러오는 방식이다.
CSS문서는 어떠한 텍스트 에디터로도 작성이 가능하며 Html코드가 들어가 있으면 안된다.
CSS문서는 확장자를 .CSS로 갖는다.

External 방식
Head태그 사이에 link태그를 생성하여 작성한다.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.Internal 방식

head태그 사이에 style태그를 생성하고 그 사이에 코드를 작성한다.
<head>
<style>
body {
  background-color: blue;
}

h1 {
  color: red;
  padding:30p;
}
</style>
</head>

3.Inline 방식

html 코드 안에 style속성을 넣어서 CSS 코드를 작성한다.
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>

만약 여러가지 방식 중 CSS 코드가 겹친다면 브라우저는

1.Inline style (inside an HTML element)
2.External and internal style sheets (in the head section)
3.Browser default

순의 우선순위로 코드를 적용시킨다. 이를Cascading이라고 하는데
CSS가 Cascading style sheets 의 약자인만큼 Cascading은 CSS코드를 작성할 때 신경써야하는 중요한 점이다.

profile
Front-end Developer / UX designer

0개의 댓글