이야기/tag정보
화면 고정및 전체테두리
air fly 500
2008. 4. 25. 15:23
(1) 배경그림 고정 시키기.
<head>와
<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/m/16648684","name":null},"url":"https://airfly500.tistory.com/m/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 -->
</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>
지금 보시는 화면의 가장자리에 진분홍색 테두리가 보이지요.
위의 소스에서 테두리 색상과 두께는 마음대로 수정할 수 있습니다.
상,하,좌,우의 색이나 두께를 다르게 정 할 수도 있구요.