티스토리 강좌 / CSS / 스타일을 적용하는 방법 세 가지

CSS로 HTML 요소를 꾸미는 방법은 세 가지가 있습니다.

  • Inline Style Sheet
  • Internal Style Sheet
  • Linking Style Sheet

어떤 방법이 무조건 좋다라는 것은 아니고, 상황에 맞게 적절한 방법을 사용하면 됩니다.

Book Club 스킨에서 블로그 이름을 빨간색으로 바꾸는 것을 세 가지 방법으로 해보겠습니다. 스킨 편집에서 [HTML 편집]을 클릭 후 따라해보세요.

Inline Style Sheet

요소에 직접 모양을 지정합니다. HTML에서 다음 코드를 찾아서...

<a href="[##_blog_link_##]">

다음으로 변경하면 블로그 이름이 빨간색으로 바뀝니다.(코드 수정 후 [새로 고침]을 클릭하거나 Ctrl+S를 누르세요.)

<a href="[##_blog_link_##]" style="color: red;">

Internal Style Sheet

HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. (다른 위치에 넣어도 되지만) </head> 위에 다음 코드를 추가하면, 블로그 이름의 색이 바뀝니다.

<style>
	#header h1 a { color: red; }
</style>

Linking Style Sheet

별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. CSS의 (다른 곳에 넣어도 되지만) 제일 밑에 다음 코드를 추가하면 블로그 이름의 색이 바뀝니다.

#header h1 a { color: red; }

상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 E-MAIL : jb@jbfactory.net 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침