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;}

<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; }

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

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

구글링의 생활화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아까 했죠 ?

@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

html&css 3 - introduction to css

cours html/css

html & css

html 與 css

html css javascript

html&css truquesmagicos

html & css presentation

html & css - brookdale cc...

clase html + css

html + css

html/css tutorial

html e css

html & css guideline

html css bases

html y css

primo. html & css

spisak kandidata za testiranje iz napredne informatike ·...

html css (myanmar)

centrado (html + css)

html & css basic19032013