앞에서는 스타일 시트가 무엇인지 어떻게 사용하는지 기본적인 사용법을 보았다!
이번에는 여러 스타일 시트를 알아볼 것 이다@_@!
<--Background style site-->
Background style site는 백그라운드를 건드릴 수 있는 site이다.
<--종류-->
Site |
옵션 |
값 |
설명 |
background |
-color |
색상 값 |
백그라운드 색상 저장 |
-image |
URL |
백그라운드 이미지 |
|
-repeat |
repeat |
백그라운드 이미지가 반복된다. |
|
no-repeat |
반복되지 않고 한번만 나타난다. |
||
repeat-x |
배경 그림이 가로방향으로 반복 |
||
repeat-y |
배경 그림이 세로방향으로 반복 |
||
-attachment |
scroll |
스크롤 되면 배경그림도 같이 스크롤 됨. |
|
fixed |
스크롤이 될 때배경그림은 스크롤 되지 않음. |
||
-position |
left,center,right % (가로) |
백그라운드 위치를 지정해 준다. |
|
top, center,bottom, % (세로) |
Ex)
<!DOCTYPE html>
<html>
<head>
<title>Meta tag</title>
<style type="text/css">
body {background-image: url(https://t1.daumcdn.net/cfile/blog/2278414F532114D212);
background-attachment: fixed;
background-position: 100% 20%;
}
.blue p {background-color: #3366cc}
.red p {background-color: #FF0000}
</style>
</head>
<body>
<div class = "red"><p>red color<br></p></div>
<div class = "blue"><p>blue color<br></p></div>
</body>
</html>
▲위 사진처럼 .red p, .blue p 는 백그라운드에 색깔이 생겼고 배경화면은 움직여서 달이 가운데로 오게 되었다.
<--border style site-->
border은 테두리를 꾸며주는 site이다.
<--종류-->
site |
종류 |
옵션 |
설명 |
border |
-style |
none |
테두리를 지정하지 않는다. |
dotted |
테두리가 점으로 나타난다. |
||
dashed |
테두리가 점선으로 나타난다. |
||
solid |
테두리가 1줄 선으로 나타난다. |
||
double |
테두리가 2줄 선으로 나타난다. |
||
groove |
테두리가 입체감 있게 나타난다. |
||
ridge |
테두리가 볼록하게 나타난다. |
||
inset |
테두리 전체가 보이는 형태. |
||
outset |
테두리 전체가 튀어나고에 보임. |
||
-color |
색깔 |
테두리에 색깔이 들어감 |
|
-방향-width | 크기 | 지정한 방향을 크기만큼 늘림. |
Ex)
<!DOCTYPE html>
<html>
<head>
<title>Meta tag</title>
<style type="text/css">
.none {border-style: none;}
.dotted{border-style: dotted; border-color: #FFBB00}
.dashed{border-style: dashed; border-color: #FF5E00 #FFBB00}
.solid{border-style: solid; border-color: #1DDB16 #FFBB00 #002266 #FF5E00}
.double{border-style: double;padding: 40px 8px 6px 4px;}
.groove{border-style: ridge; margin: 40px 8px 6px 4px}
.inset{border-style: inset; width: 50px; height: 30px}
.outset{border-style: outset;}
</style>
</head>
<body>
<p class = "none">none</p>
<p class = "dotted">dotted</p>
<p class = "dashed">dsahed</p>
<p class = "solid">solid</p>
<p class = "double">double</p>
<p class = "groove">groove</p>
<p class = "ridge">ridge</p>
<p class = "inset">inset</p>
<p class = "outset">outset</p>
</body>
</html>
△보이는대로 선이 생기었다.
▲효과들은 써보긴 했는데 하나하나 기술하려면 너무 길어 직접 해보아라@_@
<--margin & padding style site-->
site |
옵션 | 값 | 설명 |
margin |
-top | 크기 |
바깥 쪽 여백 |
-bottom |
|||
-left |
|||
-right |
|||
padding |
-top |
안 쪽 여백 |
|
-bottom |
|||
-left |
|||
-right |
Ex)
<!DOCTYPE html>
<html>
<head>
<title>Meta tag</title>
<style type="text/css">
.padding {background-color: #FF9900 ; padding: 40px 30px 10px 50px;}
.margin {background-color: #F9F900 ; margin: 40px 30px 10px 50px;}
</style>
</head>
<body>
<p class = "padding">HTML5+CSS3 padding tset</p>
<p class = "margin">HTML5+CSS3 margin test</p>
</body>
</html>
▲padding은 안의 여백을 나타내고 margin은 바깥쪽 여백을 나타내는 것을 볼 수 있다.
<--color & font style site-->
site |
옵션 | 값 | 설명 |
color |
X | 색깔 |
색깔 지정 |
font |
-family | 글꼴 이름 | 글꼴 지정 |
-style | normal, italic... |
글자 형태 지정 |
|
-weight | normal, bold,100~900 |
굵기 지정 |
|
-size | 크기 |
글자 크기 지정 |
Ex)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meta tag</title>
<style type="text/css">
.font {font-size: 15pt; font-family: 궁서; font-weight: bold; color : red;}
</style>
</head>
<body>
<p class = "font">HTML5+CSS3 padding tset 궁서?</p>
</body>
</html>
▲위를 보면 잘 적용이 된 것을 볼 수 있다.
△위의 meta는 한글이 깨지지않도록 해준 것이다.
<--문단과 문자를 꾸미는 CSS-->
site | 옵션 | 값 | 설명 |
letter | -spacing
| 크기 | 글자와 글자 사이의 간격을 조정 |
word | 단어와 단어 사이의 간격을 조정 | ||
line | -height | 크기 | 줄 간격 지정 |
white | -space | normal, pre, nowrap | 공백과 줄바꿈 지정 |
Ex)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meta tag</title>
<style type="text/css">
#normal {font-size: 15px}
.letter {letter-spacing: 10px}
.word {word-spacing: 10px}
.line {line-height: 80px; color: blue;}
.white{white-space: pre;}
</style>
</head>
<body>
<p id = "normal">normal style</p>
<p class="letter">letter space is very good</p>
<p class = "word">word space is very good</p>
<p class = "line">line space is very good<br> Why?</p>
<p class = "white">white space is very good</p>
</body>
</html>
▲위를 보면 보기 편하라고 드레그 해서 캡쳐했다.
<--text style stie-->
site |
옵션 |
값 |
설명 |
text |
-indent |
크기 |
문단 들여쓰기 |
-decoration |
underline, none, overline,line-through |
글자에 밑줄 긋기 |
|
-transform |
none, uppercase,lowercase,capitalize |
대/소문자 속성 |
Ex)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meta tag</title>
<style type="text/css">
.Tap {text-indent: 30px}
.decoration {text-decoration: underline;}
.trans {text-transform: uppercase;}
</style>
</head>
<body>
<p class = "Tap" >들여 쓰기</p>
<p class = "decoration">밑줄</p>
<p class = "trans">Abc</p>
</body>
</html>
▲들여쓰기와 밑줄 및 소문자-> 대문자 변환이 잘 된것을 볼 수 있다.
<--list style type & <a>를 꾸미는style site-->
site |
옵션 |
값 |
설명 |
list-style |
-type |
none,circle,disc,square.lower-roman, lower-alpha, decimal, upper-roman, upper-alpha |
목록의 머리기호 바꾸기 |
-image |
url(그림파일) |
머리기호 만들기 |
|
-position |
inside, ouside |
목록의 머리기호 들여쓰기 여부 |
Ex)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meta tag</title>
<style type="text/css">
.circle{list-style:circle;}
.disc{list-style:disc;}
.square{list-style:square;}
.decimal{list-style:decimal;}
.a_roma{list-style:lower-roman;}
.A_roma{list-style:upper-roman;}
.a{list-style:lower-alpha;}
.A{list-style:upper-alpha;}
.no{list-style:none;}
</style>
</head>
<body>
<li class = "circle">흰 원</li>
<li class = "disc">검은 원</li>
<li class = "square">사각형</li>
<li class = "decimal">10진수</li>
<li class = "a_roma">소문자</li>
<li class = "A_roma">대문자</li>
<li class = "a">소문자</li>
<li class = "A">대문자</li>
<li class = "no">지정 안함</li>
</body>
</html>
<--<a> Style site-->
태그 |
옵션 | 설명 |
a |
:link | 기본 |
:hover | 마우스 포인터 올리면 상태 |
|
| :active | 클릭하였을 때 상태 |
|
| :visited | 방문한 뒤에 하이퍼링크 상태 |
Ex)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meta tag</title>
<style type="text/css">
a:link{color: #3366CC; text-decoration: none;}
a:hover{color: #cc0000; text-decoration: underline;}
a:active{color: #ff9900; text-decoration: none;}
a:visited{color: #009966; text-decoration: none;}
</style>
</head>
<body>
<a href="#">www.naver.com</a>
</body>
</html>
▲가만히 있을 때 파란색, 마우스를 올리면 빨간색, 실행 후는 초록색인 것을 볼 수 있다.
<--CSS의 꽃 <display>를 알아보자!-->
※엄청 중요하다고 해도 과언이 아님!..
태그 |
속성 |
설명 |
display |
:inline |
요소를 inline요소로 표현. 앞뒤로 줄바꿈. |
:block |
요소를 block요소처럼 표시. 앞뒤 줄바꿈. |
|
:none |
박스가 생성되지 않는다. |
|
:inline-block | 요소는 inline인데 내부는 block처럼 표시.박스모양이 inline처럼 옆으로 늘어섬 |
'Programming > Html5 + CSS' 카테고리의 다른 글
| CSS3 기초 (1) | 2015.12.02 |
|---|---|
| 여러 태그03 (0) | 2015.12.02 |
| 여러 태그02 (0) | 2015.11.29 |
| HTML5 시멘틱 구조 및 여러 태그 (0) | 2015.11.25 |
| HTML5기본 구조 & Meta 테그 (0) | 2015.11.25 |
KimMinSung
