html 과 css

HTML 과 CSShodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

CSSCascading Style Sheet


“ 마크업 언어”가 실제로

어떻게 보일지를 기술하는 또 다른 언어


CSS 2 VS CSS 3


Selector {Attribute1: Value1;Attribute2: Value2;Attribute3: Value3;

}


h1 { font-size: 50px; }.red { color: red; }#hodduc { text-decoration: underline; font-weight:

bold;}

<body> <h1> 이거슨 제목 </h1> <h2 class="red"> 이거슨 red Class </h2> <span id="hodduc"> Hodduc </h3></body>



bold;}



bold;}

<body> <h1> 이거슨 제목 </h1> <h2 class="red"> 이거슨 red Class </h2> <span id="hodduc“ class=“red”> Hodduc </h3></body>



bold;}


.intro { background-color: blue; }#hodduc { background-color: green; }span { background-color: red; }

<span id="hodduc“ class=“intro”> Hodduc</span>


body { font-size: 20px; }#container { border: 1px solid black; color: red;}#birthday { color: black; }

<div id="container"> <div id="intro“> 아이유 </div> <div id="birthday“> 1993 년 5 월 16 일 </div></div>


body { font-size: 20px; }#container { border: 1px solid black; color: red;}#birthday { color: black; }


왜 COLOR 만 상속되었을까 ?여기서 질문


구글링의 생활화http://lmgtfy.com

http://lmgtfy.com/


스타일을 적용하는 몇 가지 방법


방법 1. INLINE-STYLE


장점• 모든 스타일을 덮어씀

( 가장 강력한 Rule)• 쉽고 빠르게 !

단점• 마크업과 스타일이 섞임• 특히 섞어쓰면 헷갈림 !• 재사용 불가

1. 임시로 잠깐 사용할 스타일2. 외부 파일이나 <head> 부분을 고칠 수 없을 때3. 개발 도중 어떻게 보일지 미리보고 싶을 때

이 럴 때 사 용 하 세 요


방법 2. STYLE 태그 사용


<html> <head> <style type="text/css"> .leftbox { text-align: left; } .rightbox { text-align: right; } .centerbox { text-align: center; } </style> </head> <body> <div class="leftbox"> 오른쪽 정렬 </div> <div class="centerbox"> 가운데 정렬 </div> <div class="rightbox"> 왼쪽 정렬 </div> </body></html>


장점• Inline-style 다음으로

우선 적용됨• 개발 단계에 적합

단점• 다른 페이지에서 재사용

불가• 캐시되지 않음

1. 개발 단계에서 임시로 .

이후 배포시에는 외부 CSS 로 분리

이 럴 때 사 용 하 세 요


방법 3. 외부 CSS 사용


<html> <head> <link rel=“stylesheet” type=“text/css” href=“style.css” /> </head> <body> <div class="leftbox"> 오른쪽 정렬 </div> <div class="centerbox"> 가운데 정렬 </div> <div class="rightbox"> 왼쪽 정렬 </div> </body></html>@charset "utf-8";

.leftbox { text-align: left; }

.rightbox { text-align: right; }

.centerbox { text-align: center; }

test7.html

style.css


텍스트 꾸미기


@charset "utf-8";

body { line-height: 1.5em;}

iu.css


@charset "utf-8";

body { font-family: 궁서 ; line-height: 1.5em;}

iu.css


@charset "utf-8";

body { font-family: “ 맑은 고딕” , 궁서 ; line-height: 1.5em;}

iu.css


사용자 컴퓨터에 있는 글꼴만 !웹폰트 이런건 ( 아직은 ) 비표준 ! IE 를 깝시다 IE 는 나의 적


@charset "utf-8";

body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em;}

iu.css


@charset "utf-8";

body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em;}h1 { letter-spacing: -4px;}

iu.css


자간 -4px

자간 -2px

자간 0px

자간 4px


..( 생략 )..#content:first-letter { background: #eee; font-size: 400%; border: 2px solid #ccc; float: left; margin: 4px 10px 10px 0; line-height: 1em;}

iu.css


TEXT-ALIGN아까 했죠 ?

<div style="font-align: right“> 오른쪽 정렬 </div><div style="font-align: center“> 가운데 정렬</div><div style="font-align: left“> 왼쪽 정렬 </div>

@charset "utf-8";

body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify;}h1 { letter-spacing: -4px; text-align: center;}


iu.css


TEXT-TRANSFORM


@charset "utf-8";

body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify; text-transform: capitalize;}h1 { letter-spacing: -4px; text-align: center;}

iu.css


text-transform: capital-ize;

text-transform: upper-case;

text-transform: lower-case;


@charset "utf-8";

body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify; text-transform: capitalize; font-variant: small-caps;}h1 { letter-spacing: -4px; text-align: center;}

iu.css

@charset "utf-8";

body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify; text-transform: capitalize; font-variant: small-caps; text-indent: 1em;}h1 { letter-spacing: -4px; text-align: center;}

iu.css


그 외에도 많아요

THANK YOU!hodduc@sparcs


html 과 css

Documents