간격? 섹션분리? 줄바꿈 문의드립니다

간격? 섹션분리? 줄바꿈 문의드립니다

QA

간격? 섹션분리? 줄바꿈 문의드립니다

본문




<!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넣으시면 적용 될거에요

답변을 작성하시기 전에 로그인 해주세요.
전체 123,157 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT