(1) 배경그림 고정 시키기.
<head>와
<style type="text/css">.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/style/revenue.css"/>
<link rel="canonical" href="https://airfly500.tistory.com/16648684"/>
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://airfly500.tistory.com/16648684","name":null},"url":"https://airfly500.tistory.com/16648684","headline":"화면 고정및 전체테두리","description":"(1) 배경그림 고정 시키기. 와 사이에 아래의 소스를 넣으세요. 등산복차림의 소녀 이미지가 하단 오른쪽에 고정돼 있습니다. 스크롤바를 움직여도 글자만 오르내리지 이미지는 그냥 있지요. 위의 소스에서 넣고싶은 이미지 주소로 바꿔 주시고 소스 끝에 있는 위치를 수정해주면 됩니다. [위치 정하기 ..","author":{"@type":"Person","name":"air fly 500","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2008-04-25T15:23:18+09:00","dateModified":"2008-04-25T15:23:18+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/script/common.js"></script>
</head>사이에 아래의 소스를 넣으세요.
<style type="text/css"> <!--
body {background:url(http://aj425.com.ne.kr/imge/i.gif) no-repeat fixed right bottom} -->
</style>
등산복차림의 소녀 이미지가 하단 오른쪽에 고정돼 있습니다.
스크롤바를 움직여도 글자만 오르내리지 이미지는 그냥 있지요.
위의 소스에서 넣고싶은 이미지 주소로 바꿔 주시고
소스 끝에 있는 위치를 수정해주면 됩니다.
[위치 정하기 참고]
left top=> 왼쪽 위. center top=> 윗부분 가운데. right top=> 오른쪽 위.
left center=> 왼쪽 중간. center center=> 가운데. right center=> 오른쪽 중간
left bottom=> 왼쪽 아래. center bottom=> 아래쪽 가운데 right bottom=> 오른쪽 아래.
2. 화면 전체에 간단히 테두리 넣기.
아래 소스를 <body>와 </body>사이에 넣어 주세요.
<style type="text/css">
<!--
body {border-color: #7983d5 #7983d5 #414572 #7983d5; border-
style: solid; border-top-width: 5; border-right-width:
5; border-bottom-width: 5; border-left-width: 5}
-->
</style>
지금 보시는 화면의 가장자리에 진분홍색 테두리가 보이지요.
위의 소스에서 테두리 색상과 두께는 마음대로 수정할 수 있습니다.
상,하,좌,우의 색이나 두께를 다르게 정 할 수도 있구요.
등산복차림의 소녀 이미지가 하단 오른쪽에 고정돼 있습니다.
스크롤바를 움직여도 글자만 오르내리지 이미지는 그냥 있지요.
위의 소스에서 넣고싶은 이미지 주소로 바꿔 주시고
소스 끝에 있는 위치를 수정해주면 됩니다.
[위치 정하기 참고]
left top=> 왼쪽 위. center top=> 윗부분 가운데. right top=> 오른쪽 위.
left center=> 왼쪽 중간. center center=> 가운데. right center=> 오른쪽 중간
left bottom=> 왼쪽 아래. center bottom=> 아래쪽 가운데 right bottom=> 오른쪽 아래.
2. 화면 전체에 간단히 테두리 넣기.
아래 소스를 <body>와 </body>사이에 넣어 주세요.
<style type="text/css">
<!--
body {border-color: #7983d5 #7983d5 #414572 #7983d5; border-
style: solid; border-top-width: 5; border-right-width:
5; border-bottom-width: 5; border-left-width: 5}
-->
</style>
지금 보시는 화면의 가장자리에 진분홍색 테두리가 보이지요.
위의 소스에서 테두리 색상과 두께는 마음대로 수정할 수 있습니다.
상,하,좌,우의 색이나 두께를 다르게 정 할 수도 있구요.
'이야기 > tag정보' 카테고리의 다른 글
| hyperlink(하이퍼링크)에 관한 설명 (0) | 2008.04.25 |
|---|---|
| 화면을 자동으로 이동시키는 태그 (0) | 2008.04.25 |
| 사진위에글 올리기 (0) | 2008.04.25 |
| 사진위에 글올리기 (0) | 2008.04.25 |
| tag집합 (0) | 2008.03.06 |