You cannot see this page without javascript.

HTML문서에 CSS를 사용하는 3가지 방법

HTML Tag 조회 수 382 추천 수 0 2015.02.06 10:49:44

HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다.

  • 외부 스타일 시트(External Style Sheet)
  • 내부 스타일 시트(Internal Style Sheet)
  • HTML태그내에 스타일 지정(Inline Styles)

외부 스타일 시트(External Style Sheet)

css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.

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

이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.

반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다. 그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.

그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 합니다.

내부 스타일 시트(Internal Style Sheet)

HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법입니다.

<head>
<style type="text/css">
<!--
body {font-size:9pt;}
//-->
</style>
</head>

HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.

HTML태그내에 스타일 지정(Inline Styles)

위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.

<p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p>

이 문단의 색상은 회색으로 지정됩니다.

내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법입니다.

그러나 위의 소스에서도 보듯이 직관적으로 사용이 가능하다는 장점이 있기에 강좌를 진행할때는 주로 이 방법을 사용하겠습니다.

엮인글 :
List of Articles
번호 제목 글쓴이 날짜sort 조회 수
369 Windows7 OEM을 활용하여 클린설치 file [11] LynX 2010-11-06 765
368 Windows7 에서 시스템을 백업/복원하는 가장 쉬운 방법!! file LynX 2010-11-07 334
367 탐색기 메뉴에 '명령 프롬프트 열기'와 '메모장으로 열기' 추가하기 file [14] LynX 2010-11-08 591
366 인터넷 익스플로러 리플레쉬 file LynX 2011-05-02 286
365 활성 네트워크 중복으로 인한 인터넷 연결 안되는 문제 file [12] LynX 2011-05-26 971
364 32bit Driver을 64bi로 설치하기 [8] LynX 2011-06-21 325
363 설치파일(inf)에 대한 이해 [7] LynX 2011-06-22 603
362 inf 설치시 경고창 안뜨게 하기 file [10] LynX 2011-06-22 430
361 로우 포맷(Low level format, 저수준 포맷) 하기 file [11] LynX 2011-07-06 722
360 Win XP Crack file [8] LynX 2011-10-31 269
359 윈도우7 메모리 인식 문재 file [13] LynX 2011-11-30 530
358 RoundCube 첨부 용량 변경 / 한글 수정 [10] LynX 2012-01-31 836
357 윈도우7 알수없는장치 file [8] LynX 2012-03-13 273
356 디지털 서명 file [1] LynX 2012-03-15 445
355 아레한글 사용시 출력물에 음영이 나타나는 현상. file [11] LynX 2012-03-29 1155
354 Xyview DVR서버 연결 [8] LynX 2012-04-19 295
353 HP Officejet 6500A (Plus) 호환 드라이버 [8] LynX 2012-05-16 294
352 IIS에 FastCgi모듈 활성화 시키기 file [12] LynX 2012-11-21 1283
351 윈도우 2008서버에 XE 설치 절차 [9] LynX 2012-11-22 230
350 Windows Server 2012 설치 file LynX 2012-11-23 477

XE Login