앞에서는 스타일 시트가 무엇인지 어떻게 사용하는지 기본적인 사용법을 보았다!

이번에는 여러 스타일 시트를 알아볼 것 이다@_@!


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

,