티스토리 뷰

CSS 란?



CSS(cascading style sheet)


- 스타일 선언이 위에서 아래로 순차적으로 적용이 되고, 마지막에 선언된 스타일이 우선순위 갖음


- 마크업 언어(HTML/XHTML) 가 실제 화면에 표시되는 방법을 기술하는 언어


- HTML문서의 레이아웃과 스타일을 정의한다.


- W3C에서 표준안을 만들어 내고 있으며 1996년 CSS Level 1 이후, 현재 CSS Level 2.1에서 CSS Level 3까지 보급되고 있음





CSS 선언 방식



 in-line 방식


<body>

 <strong style=“font-size:14px; color:blue;”>안녕하세요</strong>

 <span style=“color:red;”>만나서 반갑습니다~</span>

<body>

</html>


• HTML Tag에 직접 style 속성 값을 지정




 internal 방식


<html>

<head>

 <style type="text/css">

 h1 { font-size: 20px; }

 strong { font-size: 16px; }

 </style>

</head>


• HTML 문서 내부에 style tag로 선언

• head tag안에 넣는것이 정석이지만, 상황에 따라 body안에도 선언이 가능




 external 방식


<html>

<head>

 <link rel="stylesheet" href="common.css" type="text/css“ />

 <link rel="stylesheet" href=“main.css" type="text/css“ />

</head>


• CSS를 따로 파일로 저장하여 불러오는 방식

• 파일을 여러개 불러올 수 있기 때문에 공통/자주 사용되는 부분을 따로 저장하여 사용하기에 용이함





CSS 수치 단위


em, % (상대단위) 

 • 브라우저의 기본 글꼴을 기준. 1em = 100%

 • 브라우저 메뉴의 글꼴 크기 변화에 따라 유동적임


px, pt (절대단위) 

 • px (픽셀, 1px = 1dot) – 모니터의 1 픽셀

 • pt (포인트, 1pt=1/72 인치) 



- 브라우저의 기본 글꼴을 기준으로 1em = 12pt = 16px = 100%


- 상대단위를 사용하면 접근성이 향상되나, 단위 환산의 어려움과 스타일 수정 시 다양한 환경에서 일관적이지 못한 화면을 나타낼 문제가 있음.


- 디자인 제작시 기본 단위가 px로 이루어져, 다른 단위보다 빠르게 대응 할 수 있는 px을 사용



※ download & Next Menu



저작자 표시 비영리 변경 금지
신고
댓글