<![CDATA[
<p> </p><p>백그라운드를 가로로만 도배하는 속성 </p><span style="color: rgb(204, 61, 61); font-size: 10pt;"><p> </p><p><strong>background-repeat: repeat-x</strong></p><p><strong></strong> </p></span><p> </p><div class="txc-textbox" style="padding: 10px; border: 1px solid rgb(238, 238, 238); border-image: none; background-color: rgb(238, 238, 238);"><p> </p><div style=' background-image: url("img.jpg"; <strong><span style="color: rgb(204, 61, 61); font-size: 10pt;">background-repeat: repeat-x</span></strong>)'><p>나의글</p></div></div><p> </p><p> </p><p>앞글에서는 백그라운드 벽지를 세로로만 도배하여 마치 책장과 같은 시각효과를 주는 방법이었습니다. </p><p>그렇다면 가로로 도배하는 것으로 해서도 응용한다면 뭔가 기술을 만들수도 있을 것입니다. </p><p> </p><p>예를 들자면
스프링노트라든가 아니면 족자같은 것이 있을 것입니다. </p><p>
<center>
<img style="clear: none; float: none;" src="https://t1.daumcdn.net/cfile/cafe/263F7C505511FC7118" border="0">
</center>
소개드리는 방법은 이 조각그림을 세로로 도배하여 스프링노트처럼 시각효과를 주는 방법입니다.
<p> </p><div style="width: 100%; max-width: 600px;"><br>
<div style='width: 80%; height: 50px; margin-left: 10%; background-image: url("http://cfile263.uf.daum.net/image/263F7C505511FC711866C9"); background-repeat: repeat-x;'></div>
<div style="width: 80%; margin-left: 10%; position: relative; background-color: rgb(248, 247, 229);">
<div style="padding: 50px;">
나의 글
<div>
<div>
<div></div></div></div></div></div></div><p> </p><p> </p><p><HTML 소스><br></p>
<div class="txc-textbox" style="padding: 10px; border: 1px solid rgb(238, 238, 238); border-image: none; background-color: rgb(238, 238, 238);"><p><div style="width: 100%; max-width: 600px;"><br><br><div style='width: 80%; height: 50px; margin-left: 10%; background-image: url("<a href="http://cfile263.uf.daum.net/image/263F7C505511FC711866C9"); background-repeat: repeat-x;'></div">http://cfile263.uf.daum.net/image/263F7C505511FC711866C9"); <span style="color: rgb(204, 61, 61); font-size: 10pt;"><strong>background-repeat: repeat-x</strong></span>;'></div</a>></p><p><div style="width: 80%; margin-left: 10%; position: relative; background-color: rgb(248, 247, 229);"><br><div style="padding: 50px;"></p><p>나의 글<br><div><br><div><br><div><br></p></div><p> </p><p> </p><p>소스입니다. 기본적인 원리는 바로 앞글에서 설명드린 내용과 같으므로 설명은 생략합니다. </p><p>복사하여 나의글 부분만 고쳐서 사용하시면 됩니다. </p>
이 소스는 복사해서 그대로 사용하실수도 있지만 HTML를 배우실때 실험용 기초소스로 사용하실 수도 있습니다.
이 소스에서 사용한 모든 속성들은 조금씩 고쳐가면서 원하는 모양으로 꾸미실 수가 있습니다.
<p> </p><p> </p><p>웹편집기에서는 빨간 화살표가 가르키는 버튼을 누루면 자동으로 적용됩니다. </p><p> </p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/250B7143551200C70B" class="txc-image" width="524" style="clear: none; float: none;" border="0" vspace="1" hspace="1" actualwidth="524" exif="{}" data-filename="spring.png" id="A_250B7143551200C70BEC8C"/></p><p> </p><p> </p><p> </p>
<!-- -->
]]>
카페 게시글
컴퓨터지식
스프링노트 처럼 보이는 백그라운드 효과 HTML 소스
즉비
추천 0
조회 249
15.03.25 09:45
댓글 2
다음검색
삭제된 댓글 입니다.
==================================================================
<div style="width: 100%; max-width: 600px;"><br>
<div style='width: 80%; height: 50px; margin-left: 10%; background-image: url("http://cfile263.uf.daum.net/image/263F7C505511FC711866C9") ; background-repeat: repeat-x;'></div>
<div style="width: 80%; margin-left: 10%; position: relative; background-color: rgb(248, 247, 229);">
<div style="padding: 50px;">
나의 글
<div>
<div>
<div>
==================================================
오타가 있었네요 ㅎㅎ 위에 부분을 복사하셔서 다시 해보시고 그래도 안되면 다시 댓글 주세요