간격? 섹션분리? 줄바꿈 문의드립니다
본문
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> #a, #b, #c, #d {float:left;}{ border: 1px solid gold; border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px; width: 440px; height: 150px; } </style> <script type="text/javascript"> function random_images(args) { if (args.node.length == args.imgs.length) { args.imgs.sort(function (a, b) { return 0.5 - Math.random(); }); args.imgs.sort(function (a, b) { return 0.5 - Math.random(); }); for (var i = 0, i_len = args.node.length; i < i_len; i++) { args.node[i].innerHTML = ' <a href="'+args.imgs[i].href+'"> <img src="' + args.imgs[i].src + '" width="' + args.imgs[i].width + '" height="' + args.imgs[i].height + '" />'; } } else { alert("length is not equal"); } } document.addEventListener("DOMContentLoaded", function () { var params = { node: [ document.getElementById("a"), document.getElementById("b"), document.getElementById("c"), document.getElementById("d") ], imgs: [ {src: "http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png", width: 440, height: 150, href:"http://sir.co.kr"}, {src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png", width: 440, height: 150, href:"http://sir.co.kr"}, {src: "https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png", width: 440, height: 150, href:"http://sir.co.kr"}, {src: "http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg", width: 440, height: 150, href:"http://sir.co.kr"}, //{src: "http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg", width: 440, height: 150}, ] }; random_images(params); }, false); </script> </head> <body> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> </body> <section class="idx_cnt"> <div class="lt_li lt_li_left"> <!-- 전체 게시판 최신글 --> <div class="lt"> <h2 class="lt_title"><a href="<?php echo G5_BBS_URL ?>/new.php">전체 게시판 최신글</a></h2> <?php // new_latest('스킨', '출력라인', '글자수', 'is_comment', cache_minute) echo new_latest('theme/new_latest', 7, 25, false, 5); ?> <div class="lt_more"><a href="<?php echo G5_BBS_URL ?>/new.php"><span class="sound_only">전체 게시판 최신글</span>더보기</a></div> </div> </div> </html>
COMMUNITY라는 테마를 다운 받아 입맛대로 고쳐가며 연습해보는 중입니다
아래 게시판과 이미지칸의 간격을 띄우고 싶은데
줄바꿈에 대해 아는건 <br>뿐이라
</body> 아래에 <br><br> 입력해봐도 달라지는게 없던데 어떻게 입력하면 좋을까요?
시간되시는 고수분 답변 주시면 대단히 감사하겠습니다
답변 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
#a, #b, #c, #d {float:left;}{ border: 1px solid gold; border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px; width: 440px; height: 150px; }
.wrap_random_images {
margin-bottom: 2em;
}
.wrap_random_images::after {
content: '';
display: block;
clear: left;
}
</style>
<script type="text/javascript">
function random_images(args) {
if (args.node.length == args.imgs.length) {
args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
for (var i = 0, i_len = args.node.length; i < i_len; i++) {
args.node[i].innerHTML += '<a href="'+args.imgs[i].href+'">';
args.node[i].innerHTML += '<img src="' + args.imgs[i].src + '" width="' + args.imgs[i].width + '" height="' + args.imgs[i].height + '" />';
}
} else {
alert("length is not equal");
}
}
document.addEventListener("DOMContentLoaded", function () {
var params = {
node: [
document.getElementById("a"),
document.getElementById("b"),
document.getElementById("c"),
document.getElementById("d")
],
imgs: [
{src: "http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png", width: 440, height: 150, href:"http://sir.co.kr"},
{src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png", width: 440, height: 150, href:"http://sir.co.kr"},
{src: "https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png", width: 440, height: 150, href:"http://sir.co.kr"},
{src: "http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg", width: 440, height: 150, href:"http://sir.co.kr"},
//{src: "http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg", width: 440, height: 150},
]
};
random_images(params);
}, false);
</script>
</head>
<body>
<div class="wrap_random_images">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
<!-- </body> -->
<section class="idx_cnt">
<div class="lt_li lt_li_left">
<!-- 전체 게시판 최신글 -->
<div class="lt">
<h2 class="lt_title"><a href="<?php echo G5_BBS_URL ?>/new.php">전체 게시판 최신글</a></h2>
<?php
// new_latest('스킨', '출력라인', '글자수', 'is_comment', cache_minute)
echo new_latest('theme/new_latest', 7, 25, false, 5);
?>
<div class="lt_more"><a href="<?php echo G5_BBS_URL ?>/new.php"><span class="sound_only">전체 게시판 최신글</span>더보기</a></div>
</div>
</div>
</section>
<!-- </html> -->
</body>
</html>
오... 감사합니다
body css 에
body {margin-bottom:20px;}
이렇게 추가해주면 되기는 하는데..
html 과 css 공부를 해야할 것 같네요..
<body>는 원래 전체 구문을 감싸는 태그 입니다.
네 알겠습니다. 답변 감사합니다.
그러게요
<body> 와</body> 사이에 내용들이 들어가야
하는데 </body> 밑으로 내용이 있네요
위에 소스가 엉망입니다
<section class="idx_cnt">을
<body> 와 </body> 사이 안에 넣으셔야 되고
<section class="idx_cnt"> 도
끝엔 </section> 으로 닫아야 합니다
그리고 이미지 나오는곳도
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</body>
보다는
<div class="slide">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
등으로 body 를 대체하시는게 좋을것 같습니다
그런뒤에 적용하고자 하는곳에 br넣으시면 적용 될거에요
감사합니다. 많은 참고가 되었습니다
답변을 작성하시기 전에 로그인 해주세요.