인라인 CSS는 HTML 태그 내부에 직접 CSS 스타일을 적용하는 방식입니다. style HTML 속성으로 요소의 스타일을 지정하며, 요소에 직접 적용되기 때문에 다른 CSS 문서의 스타일보다 우선순위가 높습니다.
HTML은 웹 페이지의 구조를 정의하는 데 사용되는 언어입니다. 여기에 CSS를 더하면 HTML 요소에 원하는 스타일을 자유롭게 입힐 수 있습니다.
이를 통해 웹 페이지 요소의 디자인을 세밀하게 꾸밀 수 있습니다. CSS를 웹 페이지에 적용하는 방법은 크게 세 가지로, 인라인 CSS, 내부 CSS, 외부 CSS가 있습니다. 이번 튜토리얼에서는 그중 인라인 CSS에 대해 집중적으로 살펴보겠습니다.
이 글에서는 인라인 CSS를 사용해 웹 페이지에 스타일을 추가하는 방법과 인라인 스타일의 문법을 예제와 함께 자세히 설명합니다.
CSS 스타일이란?
CSS는 1996년에 처음 소개되었습니다. CSS의 등장으로 웹사이트의 내용(콘텐츠)과 표현(스타일)을 분리할 수 있게 되었습니다. CSS를 활용하면 웹 페이지에 스타일을 손쉽게 추가하고, 특정 요소에만 그 스타일을 적용할 수 있습니다.
웹 페이지에 스타일을 적용하는 방법은 다음 세 가지입니다.
- 인라인 CSS: 하나의 요소에 고유한 스타일을 직접 적용하는 방식입니다.
- 외부 CSS: 별도의 CSS 파일을 만들어 웹 페이지의 스타일을 관리하는 방식입니다.
- 내부 CSS: <style> 태그를 사용해 HTML 파일 안에서 스타일을 정의하는 방식입니다.
이번 튜토리얼에서는 인라인 CSS 작성 방법을 심도 있게 다뤄보겠습니다.
인라인 CSS 사용 가이드
인라인 CSS는 개별 HTML 요소에 스타일을 적용합니다. 스타일을 적용하려는 모든 요소마다 인라인 스타일을 일일이 지정해야 하며, 선택자(selector)를 사용해 특정 요소를 다루는 방식의 대안이 됩니다.
예를 들어, 웹 페이지의 한 문단 텍스트 색상이나 글꼴 크기를 바꾸고 싶다고 가정해 봅시다. 이때 별도의 스타일 시트에 규칙을 작성하는 대신, 색상을 바꾸려는 해당 문단에 직접 스타일을 추가하면 됩니다.
인라인으로 적용된 규칙은 내부 또는 외부 스타일 시트에서 적용한 어떤 스타일보다 우선 적용(오버라이드)됩니다.
인라인 CSS를 사용하려면 요소의 "style" 속성에 CSS 스타일을 직접 지정하면 됩니다. 실제 예시를 통해 동작 방식을 살펴보겠습니다.
웹 페이지의 제목 하나의 텍스트 색상을 초록색으로 바꾸고 싶다면 다음과 같은 코드를 사용할 수 있습니다.
<h1 style="color: green;">This is a Heading</h1>
위 코드는 제목(h1)의 글자 색상을 초록색으로 설정합니다. 이 스타일을 해당 제목에만 적용하고 싶기 때문에, 인라인 CSS로 직접 추가한 것입니다.
인라인 CSS는 언제 사용해야 할까?
인라인 CSS 스타일은 주로 웹 페이지의 변경 사항을 미리 확인하거나, 페이지의 특정 한 요소에만 스타일을 추가할 때 사용됩니다.
변경 사항을 미리 볼 때 인라인 스타일이 유용한 이유는, CSS 선택자에 해당하는 모든 요소가 아닌 특정 요소만 골라 다룰 수 있기 때문입니다. 스타일 시트를 수정하지 않고도 간편하게 변화를 미리 확인할 수 있습니다.
또한 인라인 스타일은 웹 페이지의 단일 요소에 CSS 규칙을 추가할 때 유용합니다. 예를 들어 한 문단의 너비를 500px로 지정하는 것은 괜찮지만, 여러 문단의 너비를 모두 500px로 지정하려면 다른 스타일링 방법을 사용하는 것이 좋습니다.
적절히 사용하면 인라인 CSS는 웹 페이지 요소에 스타일을 적용하는 훌륭한 방법입니다. 하지만 과도하게 사용하면 코드가 쉽게 지저분해질 수 있습니다.
인라인 스타일은 각 스타일을 수동으로 하나씩 변경해야 하므로 유지보수가 까다롭습니다. 반면 스타일 시트의 스타일은 폭넓은 선택자를 사용할 수 있어, HTML 문서 내 여러 요소에 한 번에 영향을 줄 수 있습니다.
따라서 많은 규칙을 한 요소에 적용하고 싶다면 내부 CSS나 외부 CSS를 사용하는 것이 일반적으로 더 좋습니다. 여섯 개, 일곱 개처럼 많은 CSS 속성을 한 요소에 적용해야 한다면 인라인 CSS 사용은 피하는 편이 좋습니다.
앞서 말했듯이, 인라인 CSS를 남용하면 코드가 지저분해지기 때문입니다. HTML 요소 안에 CSS 규칙이 여러 개 들어가면, 코드에서 정작 요소 자체를 파악하기가 어려워집니다.
마무리
인라인 CSS 스타일은 웹 페이지의 특정 요소에 스타일을 적용하는 방식입니다. 일반적으로 변경 사항을 미리 확인하거나 몇몇 요소에만 스타일을 적용할 때 인라인 CSS가 가장 적합합니다. 반면 한 요소에 많은 스타일을 적용해야 한다면 내부 또는 외부 스타일 시트를 사용하는 것이 좋습니다.
이번 튜토리얼에서는 예시와 함께 CSS 스타일링의 기본 개념과 인라인 CSS 사용 방법을 알아보았습니다. 이제 전문 웹 개발자처럼 인라인 CSS를 활용할 준비가 되셨습니다.
CSS 코딩에 대해 더 배우고 싶다면, 'CSS 학습 방법' 완전 가이드를 참고해 보세요.