CSS 를 HTML에 적용하는 방법

- 2월 06, 2024

CSS를 HTML에 적용하는 방법에는 3가지가 있다.
내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 이다.

1. 내부스타일 시트

HTML에서 제공하는 style 태그를 사용한다.
style 태그안에 스타일시트를 선언한다.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
  <title>Document</title>
 <style>
    h1{
      color:royalblue;
    }
  </style>
</head>
<body>
  <h1>내부 스타일 시트 적용 텍스트 입니다.</h1>  
</body>

선택자 로 h1 을 그리고 선언부에는 컬러값 을 주었다.

h1 요소의 컬러 를 royalblue 로 설정하라는 의미 이다.

style 요소의 위치는 일반적으로 head 영역에 두어서, body 영역의 html요소들에 스타일을 적용한다. 이는 위에서 아래로 내려오면서 문서를 분석하는 브라우저 엔진의 특성 때문이다.

2. 외부스타일 시트

동일한 코드를 외부스타일 시트로 바꾸어본다.

HTML문서는 훨씬 간결해진 모습이다.

[index.html]

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>외부 스타일 시트 적용 텍스트 입니다.</h1>  
</body>

다만 link 요소가 head 영역에 들어갔다.

link 요소의 의미는 style.css 란 파일을 참고하라는 뜻이다.

그렇기에 style.css 파일을 만들어서 그 파일안에 스타일을 선언하면 된다.

[style.css]

h1{
  color: royalblue;
}

여러개의 웹 문서에 스타일시트를 적용시 효율적이다.
웹문서도 가독성이 높아지고, 유지보수 하기에도 용이하다.

3. 인라인 스타일

역시 동일코드를 인라인 스타일로 변경하면 하기와 같다.

<body>
  <h1 style="color: royalblue">인라인 스타일 시트 적용 텍스트 
 입니다.</h1>  
</body>
</html>

인라인 스타일은 HTML 태그에서 지원하는 style 속성을 사용한다.
태그마다 별도로 지정할 수 있지만, CSS선택자로도 구현가능하고 HTML과 CSS의 분리적인 측면에서 그리 추천되지 않는 방식이다.

이 블로그 검색

Write and Make

프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기