html 과 css
DESCRIPTION
HTML 과 CSS. hodduc@sparcs. Cascading Style Sheet. css. “ 마크업 언어 ” 가 실제로 어떻게 보일지 를 기술하는 또 다른 언어. Css 2 vs css 3. Selector { Attribute1: Value1; Attribute2: Value2; Attribute3: Value3; }. < h1> 이거슨 제목 < h2 class="red"> 이거슨 red Class - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/1.jpg)
HTML 과 CSShodduc@sparcs
![Page 2: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/2.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
CSSCascading Style Sheet
![Page 3: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/3.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
“ 마크업 언어”가 실제로
어떻게 보일지를 기술하는 또 다른 언어
![Page 4: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/4.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
CSS 2 VS CSS 3
![Page 5: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/5.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
Selector {Attribute1: Value1;Attribute2: Value2;Attribute3: Value3;
}
![Page 6: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/6.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
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>
![Page 7: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/7.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
h1 { font-size: 50px; }.red { color: red; }#hodduc { text-decoration: underline; font-weight:
bold;}
![Page 8: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/8.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
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“ class=“red”> Hodduc </h3></body>
![Page 9: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/9.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
h1 { font-size: 50px; }.red { color: red; }#hodduc { text-decoration: underline; font-weight:
bold;}
![Page 10: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/10.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
.intro { background-color: blue; }#hodduc { background-color: green; }span { background-color: red; }
<span id="hodduc“ class=“intro”> Hodduc</span>
![Page 11: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/11.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
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>
![Page 12: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/12.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
body { font-size: 20px; }#container { border: 1px solid black; color: red;}#birthday { color: black; }
![Page 13: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/13.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
왜 COLOR 만 상속되었을까 ?여기서 질문
![Page 14: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/14.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 16: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/16.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
스타일을 적용하는 몇 가지 방법
![Page 17: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/17.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
방법 1. INLINE-STYLE
![Page 18: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/18.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
<div style="font-align: right“> 오른쪽 정렬 </div><div style="font-align: center“> 가운데 정렬</div><div style="font-align: left“> 왼쪽 정렬 </div>
![Page 19: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/19.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
장점• 모든 스타일을 덮어씀
( 가장 강력한 Rule)• 쉽고 빠르게 !
단점• 마크업과 스타일이 섞임• 특히 섞어쓰면 헷갈림 !• 재사용 불가
1. 임시로 잠깐 사용할 스타일2. 외부 파일이나 <head> 부분을 고칠 수 없을 때3. 개발 도중 어떻게 보일지 미리보고 싶을 때
이 럴 때 사 용 하 세 요
![Page 20: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/20.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
방법 2. STYLE 태그 사용
![Page 21: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/21.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
<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>
![Page 22: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/22.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
장점• Inline-style 다음으로
우선 적용됨• 개발 단계에 적합
단점• 다른 페이지에서 재사용
불가• 캐시되지 않음
1. 개발 단계에서 임시로 .
이후 배포시에는 외부 CSS 로 분리
이 럴 때 사 용 하 세 요
![Page 23: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/23.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
방법 3. 외부 CSS 사용
![Page 24: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/24.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
<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
![Page 25: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/25.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
텍스트 꾸미기
![Page 26: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/26.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 27: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/27.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
@charset "utf-8";
body { line-height: 1.5em;}
iu.css
![Page 28: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/28.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 29: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/29.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
@charset "utf-8";
body { font-family: 궁서 ; line-height: 1.5em;}
iu.css
![Page 30: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/30.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 31: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/31.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
@charset "utf-8";
body { font-family: “ 맑은 고딕” , 궁서 ; line-height: 1.5em;}
iu.css
![Page 32: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/32.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 33: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/33.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 34: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/34.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
사용자 컴퓨터에 있는 글꼴만 !웹폰트 이런건 ( 아직은 ) 비표준 ! IE 를 깝시다 IE 는 나의 적
![Page 35: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/35.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
@charset "utf-8";
body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em;}
iu.css
![Page 36: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/36.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
@charset "utf-8";
body { font-family: “ 맑은 고딕” , Dotum, 돋움 , Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em;}h1 { letter-spacing: -4px;}
iu.css
![Page 37: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/37.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 38: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/38.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
자간 -4px
자간 -2px
자간 0px
자간 4px
![Page 39: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/39.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
..( 생략 )..#content:first-letter { background: #eee; font-size: 400%; border: 2px solid #ccc; float: left; margin: 4px 10px 10px 0; line-height: 1em;}
iu.css
![Page 40: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/40.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 41: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/41.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
TEXT-ALIGN아까 했죠 ?
<div style="font-align: right“> 오른쪽 정렬 </div><div style="font-align: center“> 가운데 정렬</div><div style="font-align: left“> 왼쪽 정렬 </div>
![Page 42: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/42.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 43: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/43.jpg)
@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;}
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
iu.css
![Page 44: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/44.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 45: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/45.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
TEXT-TRANSFORM
![Page 46: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/46.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 47: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/47.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
@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
![Page 48: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/48.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
text-transform: capital-ize;
text-transform: upper-case;
text-transform: lower-case;
![Page 49: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/49.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
@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
![Page 50: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/50.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 51: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/51.jpg)
@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
![Page 52: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/52.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 53: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/53.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
그 외에도 많아요
![Page 54: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/54.jpg)
2011 Spring / Topic Seminar / WEB : hodduc@sparcs
![Page 55: HTML 과 CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081506/56814c1a550346895db91b04/html5/thumbnails/55.jpg)
THANK YOU!hodduc@sparcs
2011 Spring / Topic Seminar / WEB : hodduc@sparcs