너와 나의 개발 고리

[CSS] CSS 적용하기 본문

CSS _HTML_JavaScript/CSS

[CSS] CSS 적용하기

Oli-Viaaaa 2023. 7. 20. 15:15

작성한 CSS를 HTML 문서에 적용시키는 방법으로 대표적인 방법으로 3가지가 있다

 

1. 내부 스타일 시트 사용하기

내부 스타일 시트(internal style sheet)는 HTML 파일 내부에 CSS 코드를 작성하는 방법이다.

HTML에서 제공하는 태그 중에 style 태그가 있는데 style 태그의 콘텐츠로 CSS 코드를 작성하면 된다.

<style>
	/* CSS 코드 */
</style>

 

실제 코드에서 내부 스타일 시트 방법으로 CSS를 적용할때는 아래와 같이 적용하면 된다.

<head>
<meta charset="UTF-8" />
<title>내부 스타일 시트(Internal Style Sheet)</title>
    <style>
      h1{
        color: blue;
      }
    </style>
</head>
<body>
  <h1>내부 스타일 시트</h1>
</body>

 

style 태그를 사용하는 위치는 정해진 기준이 없지만 앞의 코드처럼 head 태그 안에 사용한다.

웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석하며

표시되는 내용은 body 태그 안에 작성한다.

 

head 태그에 CSS를 작성하면 body 태그에 작성된 내용이 사용자에게 노출되기 전에

CSS를 불러와 빠르게 디자인을 적용할 수 있는 장점이 있다.

그러나 웹 브라우저에서 HTML 문서를 해석할때마다 CSS 코드를 매번 다시 읽기 때문에 성능상으로 좋지 못하다는 단점도 있다

 

 

 

2. 외부 스타일 시트 사용하기

외부 스타일 시트(external style sheet)는 CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법이다.

이때 별도 파일의 확장자는 CSS여야 한다. 별도로 작성한 CSS 파일을 HTML 문서에서 연결할때는 link 태그를 사용한다

형식)
	<link rel="stylesheet" href="css 파일 경로">

 

위의 형식대로 외부의 css 파일을 불러오는 방법은 아래와 같다

<HTML>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>외부 스타일 시트(Extrnal Style Sheet)</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>외부 스타일 시트</h1>
  </body>
</html>
<CSS>

h1 {
    color: red;
}

 

 

 

3. 인라인 스타일 사용하기

인라인 스타일(inline style)은 HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법이다.

태그에 직접 CSS 코드를 작성하는 방법으로 CSS 기본문법 형식에서 선택자 부분이 필요 없다.

형식)
	<태그 style="CSS 코드"></태그>

 

인라인 스타일 방법으로 h1 태그의 색상을 빨간색, 텍스트 크기를 24px로 지정하려면 아래와 같다

<body>
	<h1 style="color:red; font-size:24px">인라인 스타일</h1>
</body>

'CSS _HTML_JavaScript > CSS' 카테고리의 다른 글

[CSS] CSS 가상 클래스 선택자 사용  (0) 2023.07.24
[CSS] CSS 가상 요소 선택자 사용(::before, ::after)  (0) 2023.07.21
[CSS] CSS 조합 선택자 사용  (0) 2023.07.21
[CSS] CSS 기본 선택자 사용  (0) 2023.07.21
[CSS] CSS 문법 살펴보기  (0) 2023.07.20
'CSS _HTML_JavaScript/CSS' Related Articles more