본문 바로가기

HTML / CSS / Java Script

스타일시트(CSS) 3가지 적용방법

적용


스타일시트 적용방법


스타일 시트에서 Linked Style 방식은 웹사이트에 통일감을 주고 싶을때 사용함?
웹사이트 모든 문서에 동일한 폰트, 색상, 등을 적용하고 싶을때 해당 웹문서마다 코드를 입력하지 않고, 스타일시트를 만들어서 필요한 문서에 열결하여 사용하는것입니다.


<link rel="stylesheet"  type="text/css" href="스타일시트파일이름.css">


Embedded Style 방식은웹문서 내부에 보통 HEAD 영역에 스타일시트를 정의해서 특정한 효과를 줄때 사용함
<!-- --> 주석태그를 사용하는 이유는 스타일태그에 인식하지 못하는 웹브라우저에서 스타일시트 구문이 화면에 그대로 표시되는걸 막기위해서 입니다.


<STYLE type="text/css">
<!-- 
  태그 {스타일속성(Property):값(value);}
-->
</STYLE>


Inline Style는 특정태그만 스타일 시트를 적용하고 싶을때 사용


<태그 style="스타일속성(Property):값(value);" >

참고

스타일 시트에서 사용하는 단위

- 절대 단위
in : 인치
cm : 센티미터
mm : 밀리미터
pt : 포인트(1포인트=1/72인치)
pc : 파이카(1파이카=12포인트)

- 상대 단위
% : 기준이 되는 크기에 대한 비율
px : 1픽셀을 1로 하는 단위(해상도에따라 상대적임?)
ex : 범위에서 유효한 폰트의 소문자 x높이를 1로하는 단위
em : 범위에서 유요한 폰트의 높이를 1로하는 단위


em,ex