hahahia

CSS 기초 01 본문

Web Programming/HTML & CSS

CSS 기초 01

hahahia 2012. 3. 28. 12:45


CSS(Cascading Style Sheets)

- 웹 페이지의 외형을 명시하고 제어하기 위한 언어

- 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그에 따라 별도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일을 적용한다.

HTML만으로 스타일을 수동적으로 그때그때변경하기 힘들기 때문에

CSS를 이용하여 편하게 외형을 정의할 수 있습니다.


사용하는 방법


<STYLE type="text/css">

H1, H2 { background:url(./bg_sky.jpg) } /* H1,H2의 배경으로 image 사용 */

H3 { background:Navy; color:white } /* H3의 배경을 남색, 글자색을 흰색으로 */

BODY { color:Navy; } /* BODY 태그의 색을 남색으로 지정 속성이 상속되므로 모든

                               글자색이 남색 */

P EM { font-weight:bold; color:red } /* P 태그 안의 EM 태그의 글자를 굵게 */

</STYLE>

// HEAD 안에서 선언을 한 후 BODY구문에서 적용...



간단한 CSS 예제->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 

<style type="text/css">

P {font-size:250%; color:#ff0000} // P 태그에서의 정의

.c1 {font-family:"궁서체"; color:#00cc00} // 클래스(선택자)

#my {width:50px ; height:50px}

P.mySize {font-size:12pt; color:#ff0000} // 같은 P태그에서도 다른 양식 적용(클래스)

</style>

</head>

 <body>

 <p>스타일 연습</p>

 <DIV class="c1"> 클래스 선택자1 연습</div>

 <INPUT type="button" value="버튼" class="c1"></INPUT>

 <INPUT type="button" value="내 버튼" id="my">

 <P class="mySize">글꼴 크기</P>

 <DIV class="mySize">글꼴 크기</DIV>

 </body>

</html>


'Web Programming > HTML & CSS' 카테고리의 다른 글

CSS를 이용한 간단한 예제(선택자)  (0) 2012.04.04
HTML소스(가입양식 폼 만들기)  (0) 2012.03.14
HTML(HyperText Markup Language) part 01  (0) 2012.03.07
'Web Programming/HTML & CSS' Related Articles more
Comments