[CSS] 2.CSS 기본문법


CSS 기본문법



CSS는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등의 세가지 종류가 있습니다.

외부 스타일시트가 가장 많이 쓰이며, 우선순위는 인라인, 내부, 외부 스타일 순입니다.



내부 스타일 시트



내부 스타일시트는 문서의 표현(디자인 꾸미기)을 위한 명령들을

HTML 문서 안에 스타일 태그로 기재하여 스타일이 HTML 안에 함께 저장되는 형태입니다!

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>example</title>
	<!-- CSS 내부스타일시트 -->
	<style>
		p{color:red;} /* 내부 스타일시트 */
	</style>
</head>
<body>
	<p>안녕하세요.</p>
</body>
</html>



css에서는 html과 다르게 주석을 다음과 같이씁니다.


<html에서의 주석>


<!--  주석입니다 -->


<css에서의 주석>


/*    주석입니다    */



외부 스타일시트



외부 스타일시트는 문서의 표현을 위한 명령들을 따로 CSS파일로 저장하여

HTML 문서에 파일명으로 연결해주는 형태입니다.


<!-- html 문서 -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>example</title>
	<!-- CSS 외부 스타일시트 -->
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<p>안녕하세요.</p>
</body>
</html>



/*  style.css */


p {color: red;}



외부 스타일시트 형식이 또 하나 있는데 다음과 같습니다.

@import



이것은 스타일 태그나 스타일 파일안에 가장 윗줄에 써주어야 합니다.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>example</title>
	<!-- CSS 외부 스타일시트 -->
	<style>
		@import url("reset.css"); /* 스타일 파일을 연결*/
		p{color: red;}
	</style>
</head>
<body>
	<p>안녕하세요.</p>
</body>
</html>



그리고 reset.css 는 미리 각 브라우저의 스타일을 초기화하기 위해

미리 정의된 css파일이며,

다음과 같습니다.


/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:12px;line-height:1.5;font-family:'돋움',dotum,sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}



reset.css를 css 작성 전에 미리 연결해주는 것이 좋습니다!



인라인 스타일시트



인라인 스타일시트는 문서의 표현을 위한 명령들을 HTML 마크업의 속성으로 입력하는 것입니다.

<body>
	<p style="color : red;">꾸리블로그</p>
</body>