CSS / Tutorial / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다.

  • Inline Style Sheet
    HTML 태그의 style 속성에 CSS 코드를 넣습니다.
  • Internal Style Sheet
    HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣습니다.
  • Linking Style Sheet
    별도의 CSS 파일을 만들고 HTML 문서와 연결합니다.

보통 여러 문서에 적용되는 스타일은 Linking Style Sheet으로 만들고, 특정 문서에만 적용되는 스타일은 Internal Style Sheet 또는 Inline Style Sheet으로 만듭니다.

Inline Style Sheet

Inline Style Sheet는 HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법입니다.

<p style="color: blue">Lorem ipsum dolor.</p>

해당 태그(위 코드에서는 p)가 선택자(selector)가 되고, CSS 코드에는 속성(property)과 값(value)만 들어갑니다. 따라서 꾸미는 데 한계가 있으며, 재사용이 불가능하다는 단점이 있습니다.

Internal Style Sheet

Internal Style Sheet은 HTML 문서 안에 스타일 코드를 넣는 방법입니다. <style>과 </style> 안에 CSS 코드를 넣습니다. 예를 들어 다음과 같은 코드를 HTML 문서에 넣으면, 문서 안의 모든 h1 요소의 글자가 파란색이 됩니다.

<style>
  h1 {
    color: blue;
  }
</style>

<style> 태그는 보통 <head>와 </head> 사이에 넣으나, HTML 문서의 어디에 넣어도 잘 적용됩니다.

이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 다른 HTML 문서에는 적용할 수 없다는 단점이 있습니다.

Linking Style Sheet

Linking Style Sheet는 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. 예를 들어 모든 h1 요소의 글자를 빨간색으로 하고 싶다면, 다음의 내용으로 style.css 파일을 만듭니다. (CSS 파일의 확장자는 css입니다.)

h1 {
  color: red;
}

적용을 원하는 HTML 문서에 다음의 코드를 추가합니다.

<link rel="stylesheet" href="style.css">

위 코드는 HTML 파일과 CSS 파일이 같은 폴더에 있다고 가정했을 때의 코드로, 경로는 적절히 수정해야 합니다. 예를 들어 HTML 문서가 있는 폴더에 css 폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 합니다.

<link rel="stylesheet" href="css/style.css">

이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것입니다. style.css를 적용시키고 싶은 문서에 <link> 태그로 연결만 해주면 됩니다.

같은 카테고리의 다른 글
CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 구분선 만드는 방법

CSS / Tutorial / 구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.

CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법

CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법

placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법

CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법

유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.

CSS / Tutorial / 삼각형 만드는 방법

CSS / Tutorial / 삼각형 만드는 방법

CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.

CSS / Tutorial / 링크 꾸미는 방법

CSS / Tutorial / 링크 꾸미는 방법

링크는 a 태그로 만듭니다. 따라서 링크는 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다.

CSS / Tutorial / 상속(inheritance)

CSS / Tutorial / 상속(inheritance)

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.

CSS / Tutorial / 마우스 호버 효과 /  이미지 확대하는 방법

CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.

CSS / Tutorial / 선택자(Selector)

CSS / Tutorial / 선택자(Selector)

CSS에서 선택자(CSS Selector)는 HTML 문서의 요소를 선택하고 스타일을 적용할 때 사용되는 구문입니다. 선택자는 특정 요소를 대상으로 스타일을 지정할 수 있도록 돕는 중요한 역할을 하며, 다양한 방법으로 요소를 선택할 수 있습니다.

CSS / Tutorial / ul, ol 가운데 정렬하는 방법

CSS / Tutorial / ul, ol 가운데 정렬하는 방법

목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.