테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

숙취해소 3년 전 조회 2,004
답변 3
목록 

                
                
</pre>

<pre>
<code><!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: "<a href="http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png"," target="_blank" rel="noopener noreferrer">http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>
                    {src: "<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png"," target="_blank" rel="noopener noreferrer">https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>
                    {src: "<a href="https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png"," target="_blank" rel="noopener noreferrer">https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>
                    {src: "<a href="http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg"," target="_blank" rel="noopener noreferrer">http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>
                    //{src: "<a href="http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg"," target="_blank" rel="noopener noreferrer">http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg",</a> 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></code></pre>

<p><code>

            



COMMUNITY라는 테마를 다운 받아 입맛대로 고쳐가며 연습해보는 중입니다



 



아래 게시판과 이미지칸의 간격을 띄우고 싶은데



줄바꿈에 대해 아는건 <br>뿐이라



</body> 아래에 <br><br> 입력해봐도 달라지는게 없던데 어떻게 입력하면 좋을까요?



 



시간되시는 고수분 답변 주시면 대단히 감사하겠습니다
#줄간격 #간격 #이미지간격 #줄바꿈
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
배
배르만
3년 전

</p>

<p><!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: "<a href="http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png"," target="_blank" rel="noopener noreferrer">http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>

                    {src: "<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png"," target="_blank" rel="noopener noreferrer">https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>

                    {src: "<a href="https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png"," target="_blank" rel="noopener noreferrer">https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>

                    {src: "<a href="http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg"," target="_blank" rel="noopener noreferrer">http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg",</a> width: 440, height: 150, href:"<a href="http://sir.co.kr"}," target="_blank" rel="noopener noreferrer">http://sir.co.kr"},</a>

                    //{src: "<a href="http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg"," target="_blank" rel="noopener noreferrer">http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg",</a> 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> --></p>

<p><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> --></p>

<p></body>

</html></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
숙취해소
3년 전
오... 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

별

그러게요

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
숙취해소
3년 전
감사합니다. 많은 참고가 되었습니다

댓글을 작성하려면 로그인이 필요합니다.

e
eyekiss
3년 전

body css 에

body {margin-bottom:20px;}

이렇게 추가해주면 되기는 하는데..

html 과 css 공부를 해야할 것 같네요..

<body>는 원래 전체 구문을 감싸는 태그 입니다.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
숙취해소
3년 전
네 알겠습니다. 답변 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인