JDK's blog

1. HTML

<embed src="파일명" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

2. 

<style>

#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

#popup_layer { width:400px; margin-bottom:30px; background:#fff; border:solid 1px #ccc; position:absolute; top:260px; left:50%; margin-left:-200px; box-shadow: 0px 1px 20px #333; z-index:100; display:none;}

</style>

3. script

$(document).ready(function(){

$('#popup_layer, #overlay_t').show(); 

 $('#overlay_t, .close').click(function(e){ 

        e.preventDefault(); 

        $('#popup_layer, #overlay_t').hide(); 

    }); 

css 글자색을 적용해보겠습니다.

file.css

#d{
 color:blue;
 background-color:red;
}
span{
 color:red;
 background-image:url(./XtoX.png);
}

1) background-color : 배경색

ex) background-color:red;

​

2) background-image:url(위치) : 위치는 css가 포함되어 있는 파일기준

​ex) background-image : url(./image.png);

​

3) background-repeat : 그림의 반복여부 (repeat, no-repeat, repeat-x, repeat-y) // repeat가 기본

ex) background-repeat : repeat;

​

4) background-attachment: 고정할 것인지, 스크롤할 것인지 정합니다.(fixed, scroll) // scroll 기본

ex) background-attachment:fixed;

5) background-position: 그림의 위치(left,center,right) (top,center,bottom), x% y%, xpx ypx;

//left top 기본

6) background-size: 그림의 크기를 늘려줍니다. auto, cover, contain, 가로% 세로%, 가로px 세로px;

1. 직접 코드에 style로 넣기

EX) <span style="color:red">테스트</span>

2. 같은 파일 상단에 style넣기

EX) <style type="text/css">

ID기준으로 적용

#d{
 color:blue
}

태그기준으로 적용

span{
 color:red
}

       </style> 

3. 다른파일로 만들어서 link이용하기

<link rel="stylesheet" type="text/css" href="./cssfile/file.css">

2,3 번의 사용예제

<div id="d">div</div>

<span>span></span>

css사용법에 대해서 설명해드렸습니다.