여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - 기초
CSS – 기초
4개월전 작성
2개월전 수정

CSS = Cascading Style Sheets. 웹페이지를 꾸미려고 작성하는 스타일시트 언어이다.

HTML, xml 문서에 있는 요소들에 스타일을 적용할 수 있다.

CSS 기본 틀

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 태그안에 외부 스타일시트를 추가한다.

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 태그를 이용하여 또 다른 외부 스타일시트를 추가할 수 있다.

기본 스타일시트에는 레이아웃에 대한 스타일시트만 추가해놓고 색상에 대한 스타일시트를 추가한다던지, 미디어 쿼리별 레이아웃을 외부 스타일시트로 추가할 수 있다.

CSS
@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
<html>
	<head>
		<title>홈페이지 제목</title>
		<style>
			body{
				background-color: #FFCCCC;
			}
		</style>
	</head>
	<body>
		<div>
			안녕하세요?
		</div>
	</body>
</html>
기본 예시

안녕하세요?

인라인 스타일시트

요소 태그에 인라인 스타일시트를 추가한다.

HTML
<html>
	<head>
		<title>홈페이지 제목</title>
	</head>
	<body>
		<div style="color: #FFCCCC;">
			안녕하세요?
		</div>
	</body>
</html>
기본 예시

안녕하세요?

참고
관련 포스트
CSS - 기초 - 현재글
Mingg`s Diary
밍구
공부 목적 블로그