CSS = Cascading Style Sheets. 웹페이지를 꾸미려고 작성하는 스타일시트 언어이다.
HTML, xml 문서에 있는 요소들에 스타일을 적용할 수 있다.
CSS 기본 틀
전체 구조는 rule set 혹은 줄여서 rule 이라고 한다.
각각의 rule set은 반드시 { } 로 감싸져야 한다.
각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 (;)을 사용해야만 합니다.
selector
선택자 = rule set의 맨 앞에 있는 HTML 요소, ID, Class, 속성, 수도 클래스 등의 이름을 기재하여 스타일시트를 지정해줄 수 있다 (이 예에서, p 요소).
2569
선택자에 대해서는 CSS - 기초 - 선택자를 참고하자.
declaration
선언 = 꾸미기 원하는 선택자의 속성과 속성값을 명시한다 (이 예에서, color 속성).
font, color, width, height, border, padding, margin 등이 사용된다.
img에는 보통 max-width: 100%; height: auto; 가 사용된다.
img 사이즈가 상위 박스 요소보다 크다면 박스 요소의 width 100%로 표시, 작다면 그냥 그대로 표시하고 비율을 일정하게 보여준다.
선언에는 속성과 속성값이 들어간다.
property and property value
속성 = 주어진 선택자의 어떤 속성을 꾸밀지 입력한다. (이 예에서, color는 p 요소).
속성 값 = 속성을 선언한 후 속성 값을 입력한다. (아 얘에서, color의 값에는 red).
속성과 속성 값에 대한 자세한 사항은 CSS - 기초 - 속성과 속성값를 참고하자.
CSS 추가
스타일시트를 추가할 때 여러가지 방법을 이용할 수 있다.
1. 외부 스타일시트- 외부 스타일시트에 또 다른 외부 스타일시트 추가2. 내부 스타일시트3. 인라인 스타일시트
외부 스타일시트
<link> 태그를 이용하여 html 태그안에 외부 스타일시트를 추가한다.
/* 일반적인 스타일시트 추가 방법 */ <link rel="stylesheet" href="styles/style.css"> /* 미디어쿼리 지정하여 스타일시트 추가하는 방법 */ <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> /* 대체 스타일시트 추가하는 방법 */ <link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" title="Basic">
대체 스타일시트 추가하는 방법은 대체 스타일시트 추가 참고하자.
외부 스타일시트에 또 다른 외부 스타일시트 추가
외부 스타일 시트안에 @import 태그를 이용하여 또 다른 외부 스타일시트를 추가할 수 있다.
기본 스타일시트에는 레이아웃에 대한 스타일시트만 추가해놓고 색상에 대한 스타일시트를 추가한다던지, 미디어 쿼리별 레이아웃을 외부 스타일시트로 추가할 수 있다.
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
내부 스타일시트
<head> … </head> 사이에 <style> … </style> 태그 입력 후 스타일시트 추가
<html>
<head>
<title>홈페이지 제목</title>
<style>
body{
background-color: #FFCCCC;
}
</style>
</head>
<body>
<div>
안녕하세요?
</div>
</body>
</html>
안녕하세요?
인라인 스타일시트
요소 태그에 인라인 스타일시트를 추가한다.
<html> <head> <title>홈페이지 제목</title> </head> <body> <div style="color: #FFCCCC;"> 안녕하세요? </div> </body> </html>
안녕하세요?