다양한 방식으로 HTML 문서에 CSS를 적용할 수 있으며, 다음과 같이 크게 세 가지 방식으로 문서의 스타일을 지정할 수 있습니다.

  • <link> 요소를 사용하여 외부 CSS 파일을 연결(추천)
  • <head> 영역에 <style> 요소를 사용
  • HTML 요소 내에 style 속성을 사용

자세한 연결 방법과 장단점은 아래 내용을 참고하시기 바랍니다.

외부 스타일시트 연결

외부 스타일시트 연결은 가장 일반적이고 효율적인 방법입니다. 하나의 CSS 파일을 다수의 웹페이지에 연결할 수 있으며, 이를 통해 동일한 CSS를 적용하고 이를 효율적으로 관리할 수 수 있습니다.

 

다음과 같이 html 문서의 <head>...</head> 태그 내에 link 태그를 사용하여 외부 스타일시트를 연결할 수 있습니다.

<head>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>

만약 CSS 파일이 HTML 문서와 동일한 폴더 내에 있지 않을 경우 다음의 예시와 같이 서브디렉토리를 설정해줘야 합니다.

<link rel="stylesheet" href="styles/general/styles.css" type="text/css">

참고로 여기서 rel 속성은 현재 문서와 연결되는 문서/파일의 관계를 의미합니다. CSS의 경우에는 stylesheet라고 속성을 적어주어야 하며, link에는 이 외에도 다른 속성들을 지정할 수도 있습니다.

head 영역에 style 요소 사용

다음과 같이 head 태그 내에 <style>...</style>을 지정할 수도 있습니다.

<head>
    <style>
        h1 {color: blue;}
        p {color: yellow;}
    </style>
</head>

이러한 방식은 외부 CSS 파일을 수정할 수 없는 환경에서 활용될 수 있습니다. 그러나 페이지 수가 늘어남에 따라 점차 비효율적이게 됩니다. 하나의 속성을 수정하려면 여러 웹페이지의 <head>에서 속성을 변경해야 하는 번거로움이 있습니다.

HTML 요소 내에 style 속성 사용

다음과 같이 각각의 HTML 요소에 style 속성을 부여하여 CSS 효과를 적용할 수도 있습니다.

<h1 style="color: red;">Red Title</h1>
<p style="font-size: 10px;">10px Text</p>

이는 가장 추천되지 않는 방법입니다. CSS 유지 관리에 가장 비효율적인 방법이며, 문서에 CSS 속성들이 부여되어 있을 경우 코드를 읽기가 어려워집니다. 그러나 아주 특별한 경우에는 이렇게 개별 요소에 CSS를 적용할 수 있다는 점을 참고해두시면 좋을 거 같습니다.

 

참고: How CSS is structured, MDN

'개발 > CSS' 카테고리의 다른 글

CSS 뜻 역할과 적용 방법, 호환성 확인 ✔️  (0) 2021.11.25
RGB에서 HEX로 변환하기: 웹 컬러 코드 표현에 대한 이해  (0) 2020.12.26
flex 속성 사용 방법: 좌측, 우측, 중앙 정렬 등  (0) 2020.11.09

티스토리툴바