더북(TheBook)

4.2.3 인라인 스타일 사용하기

인라인 스타일(inline style)은 HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법입니다. 태그에 직접 CSS 코드를 작성하는 방식이라서 CSS의 기본 문법 형식에서 선택자 부분이 필요 없습니다.

형식

<태그 style="CSS 코드"></태그>

인라인 스타일 방법으로 h1 태그의 색상을 빨간색, 텍스트 크기를 24px로 지정하려면 다음과 같이 작성합니다.

04/02/inline.html

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

그림 4-5 실행결과

외부 스타일 시트 방법을 사용했을 때와 동일하게 CSS가 적용되어 출력됩니다.

수코딩의 조언

CSS를 적용하는 3가지 방법 중 어떤 방법이 좋은지는 상황에 따라 다를 수 있어서 정답은 없습니다. 다만, 실무에서는 대부분 외부 스타일 시트 방법을 사용합니다. 외부 스타일 시트 방법은 코드를 유지 보수하기가 편하고 성능적으로도 가장 좋기 때문입니다. 참고로 인라인 스타일 방법은 특별한 경우를 제외하고는 실무에서 거의 사용하지 않으니 되도록 사용하지 않는 편이 좋습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.