문돌이가 가르치는 웹...

CSS“이게�� 뭐지?” “왜�� 쓰는�� 거지?”

CSSCascading�� Style�� Sheets

http://pattle.github.io/simpsons-in-css/

CSS 제거 전

CSS 제거 후

웹의�� 옷

Text�� Editor

Brackets

SublimeText

Editplus

메모장

등등등.....

<html> <head> <meta charset="utf-8"> <style> </style> </head> <body> </body></html> CSS�� 코드를�� 입력하는�� 부분

<html> <head> <meta charset="utf-8"> <style> </style> </head> <body> </body></html>

HTML�� 코드를�� 입력하는�� 부분

태그명 {속성1 : 값; 속성2 : 값;}.클래스 {속성1 : 값; 속성2 : 값;}#아이디 {속성1 : 값; 속성2 : 값;}

CSS HTML

Div {background:red;} <div> Content </div>THIS IS<div> HTML </div><span> Document </span>

http://plegic.com/DETS/1.html

CSS HTML

.class {background:red;}#id {background:blue;}

<div class=“class”>클래스

</div><div id=“id”>

아이디</div><div> 적용 안된 div </div>


CSS HTML

#box1, #box2{

background:blue;}

<div id="box1">CSS 적용됨

</div><div id="box2">

CSS 적용됨</div><div id="box3">

CSS 적용안됨</div>


CSS HTML

#box{

background:blue;width:300px;

height:300px;}

<div id="box">정사각형

</div>


CSS HTML

#margin {background:red;margin:50px;

}#padding {

background:blue;padding:50px;

}

<div id="margin">바깥 여백 적용

</div><div id="padding">

안쪽 여백 적용</div>


CSS HTML

#color { color:red; }#size { font-size:20pt; }#underline { text-decoration:underline;}#overline {text-decoration:overline;}#linethrogh {text-decoration:line-through;}

<div id="color">빨간 글씨</div><div id="size">글자크기</div><div id="underline">밑줄</div><div id="overline">윗줄</div><div id="linethrogh">취소선</div>


CSS HTML

#lighter{ font-weight:lighter;}#normal{ font-weight:normal;}#bold{ font-weight:bold;}#bolder{ font-weight:bolder;}

<div id="lighter">얇은 글씨</div><div id="normal">기본</div><div id="bold">굵은 글씨</div><div id="bolder">매우 굵은 글씨</div>


CSS HTML

#right{ text-align:right; }#left { text-align:left; }#center { text-align:center;}

<div id="right">우측 정렬

</div><div id="left">

좌측 정렬</div><div id="center">

가운데 정렬</div>


CSS HTML

#red{ background:red; }#blue { background:blue; }#green { background:green;}

<div id="red">빨강 배경

</div><div id="blue">

파랑 배경</div><div id="green">

초록 배경</div>


CSS HTML

#image{background-image:url('http://plegic.com/DETS/image/image.JPG');height:500px;}

<div id="image">배경 이미지

</div>


CSS HTML

#norepeat{background-image:url('http://plegic.com/DETS/image/image.JPG');background-repeat: no-repeat;height:500px;}#repeatx {background-image:url('http://plegic.com/DETS/image/image.JPG');background-repeat: repeat-x;height:500px;}#repeaty {background-image:url('http://plegic.com/DETS/image/image.JPG');background-repeat: repeat-y;height:1500px;}

<div id="norepeat">배경 이미지 반복 안함

</div><div id="repeatx">

배경 이미지 가로반복</div><div id="repeaty">

배경 이미지 세로반복</div>


CSS HTML

#position1{background-image:url('http://plegic.com/DETS/image/image.JPG');background-repeat: no-repeat;background-position:100px 100px;height:500px;}#position2{background-image:url('http://plegic.com/DETS/image/image.JPG');background-repeat: no-repeat;background-position:center center;height:500px;}

<div id="position1">배경 이미지 위치 100px

</div><div id="position2">

배경 이미지 위치 중앙</div>


CSS HTML

#crosshair {cursor:crosshair}#pointer {cursor:pointer}#move {cursor:move}#e-resize {cursor:e-resize}#ne-resize {cursor:ne-resize}#nw-resize {cursor:nw-resize}#n-resize {cursor:n-resize}#se-resize {cursor:se-resize}#s-resize {cursor:s-resize}#w-resize {cursor:w-resize}#wait {cursor:wait}#help {cursor:help}

<p id="crosshair">Crosshair</p><p id="pointer">Pointer</p><p id="move">Move</p><p id="e-resize">e-resize</p><p id="ne-resize">ne-resize</p><p id="nw-resize">nw-resize</p><p id="n-resize">n-resize</p><p id="se-resize">se-resize</p><p id="s-resize">s-resize</p><p id="w-resize">w-resize</p><p id="wait">Wait</p><p id="help">Help</p>


CSS HTML

#border1{border:1px solid green;}#border2{border:3px dotted red;}

<div id="border1">초록 외곽선

</div><div id="border2">

굵은 빨강 점선</div>


CSS HTML

#radius1{border:1px solid green;border-radius:0 0 5px 5px;}#radius2{border:1px solid green;border-radius:5px 5px 0 0;}

<div id="radius1">테두리 둥글게

</div><div id="radius2">

테두리 둥글게</div>


CSS HTML

#box {border-left:1px solid green;margin-right:20px;padding-top: 30px;padding-bottom: 30px;}

<div id="box">적용됨

</div>


CSS HTML

#shadow1 {text-shadow:1px 1px 5px black;}#shadow2 {text-shadow:3px 7px 2px blue;}

<div id="shadow1">글자 그림자

</div><div id="shadow2">

글자 그림자</div>


CSS HTML

#shadow1 {box-shadow:1px 1px 5px black;}#shadow2 {box-shadow:3px 7px 2px blue;}

<div id="shadow1">상자 그림자

</div><div id="shadow2">

상자 그림자</div>


- ㅜ_ㅜ -

막상 1차시를 만들어 진행해보니시간이 부족해 CSS 부분만연강을 진행했습니다.

EB13 조동현

[email protected]

문돌이가 가르치는 웹...

Technology

Transcript of 문돌이가 가르치는 웹...