ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [CSS] layout
      VScode/CSS 2022. 9. 8. 16:51

      layout

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout01.html</title>
    <style type="text/css">
        body{margin:0;}
        #base{position:relative; width:100%; height:500px; border:3px dotted black; top:100px;}
        #box1{position:absolute; width:50%; height:100%; background:yellow; border:3px solid green;
            /* left:0px; top:0px;  right:100px; bottom:100px; */ }
            /* absolute position의 기본 위치는 -10px, top:0px;  */
        #box2{position:absolute; width:50%; height:400px; 
              background:orange; border:3px solid red; right:5%; top:50px;}
        #box3{position:absolute; width:100px; height:100px; background:blue;}
        #box4{position:absolute; width:100px; height:100px; background:blue; right:0;}
        #box5{position:absolute; width:100px; height:100px; background:blue; right:0; bottom:0;}
        #box6{position:absolute; width:100px; height:100px; background:blue; bottom:0;}
    </style>
</head>
<body>
    <div id="base">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
    </div>
</body>
</html>

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout02.html</title>
    <style type="text/css">
        body{margin:0;}
        #base{position:relative; width:100%; height:500px; 
              background:#EEEEEE; border:1px solid black; top:200px;}
        .box{position:absolute; width:200px; height:400px; 
             top:50px; border:1px solid gray; box-shadow: -3px 3px 3px 3px gray;}    
        #box1{background:orange; right:51% }
        #box2{background:#FFFF22; right:65%; }
        #box3{position:absolute; background:#FFFFAA; width:50%; 
            height:400px; border:1px solid black; top:50px; left:50%; box-shadow: -3px 3px 3px 3px gray;}
    </style>
</head>
<body>
    <div id="base">
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <div id="box3"></div>
    </div>
</body>
</html>

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #first{position:relative; width:100%; height:100px; border:1px dashed black;}
        #first_text{position:relative; width:250px; height:100px; margin:0 auto; border:1px solid red; text-align:center; 
                    line-height:120px; font-size:200%; font-family:Verdana;  font-weight:bold;}
        #second{position:relative; width:100%; height:100px;  border:1px dashed black;}
        #second_text{position:relative; width:450px; height:100px; margin:0 auto;  border:1px solid blue; color:gray;}
        #third{position:relative; width:100%; height:600px; border:1px dashed black;}
        #view{position:relative;width:1100px; height:600px; border:2px solid red;  margin:0 auto;}
        #box1{position:absolute; width:800px; height:500px; background:red; left:0; top:0; color:white;}
        #box2{position:absolute; width:800px; height:500px; overflow:hidden; right:0; bottom:0;}
        #box3{position:absolute; width:400px; height:300px; background:white; left:100px; bottom:50px; 
              box-shadow:5px 5px 5px; border:1px solid black;}
        #box3_title{position:relative; width:350px; height:110px; margin:0 auto; border:1px solid green; 
                    font-size:190%; text-align:center; line-height:110px; font-family:Verdana; font-weight:bold;}
        #box3_text{position:relative; width:350px; height:190px; margin:0 auto; border:1px solid green; color:silver;}
    </style>
</head>
<body>
    <div id="first">
        <div id="first_text">Content Title</div>
    </div>
    <div id="second">
        <div id="second_text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
    </div>
    <div id="third">
        <div id="view">
            <div id="box1">빨간색 배경</div>
            <div id="box2"><img src="images/Penguins.jpg" width="800"></div>
            <div id="box3">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
        </div>
    </div>
</body>
</html>

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout05.html</title>
    <style type="text/css">
    #first{position:relative; width:100%; height:200px;  background:rgb(231, 243, 168); }
    #first_title{position:relative; width:400px;  height:100px; background:yellowgreen;
				 margin:0 auto; font-weight:bold; font-size:150%;  text-align:center; line-height:70px}
    #first_text{position:relative; width:400px; height:100px; background:#B2B554; margin:0 auto; font-size:90%; }

    .second{position:relative; width:100%; height:200px; background:#bffcc0; margin-top:20px;}
    .view{position:relative; width:1100px; height:200px; background:#f9b97c; margin:0 auto;}

            .circle{position:relative; width:200px; height:200px; overflow:hidden; border-radius:50%;
                    float:left;  background:white;}
            .rect{position:relative; width:350px; height:200px; background:#f9977c; float:left; }
            .title{position:relative; width:320px; height:70px; border:1px dashed blue; font-weight:bold; 
                   font-size:150%;  text-align:center; line-height:70px; margin:0 auto;}
            .text{position:relative; width:320px; height:130px;  border:1px dashed blue; margin:0 auto; font-size:90%;}
    </style>
</head>
<body>
    <div id="first">
        <div id="first_title">Content02 Title</div>
        <div id="first_text">제3항의 승인을 얻지 못한 때에는 
              그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
    </div>
    <div class="second">
        <div class="view">
            <div class="circle"><img src="images/Koala.jpg" height="200"></div>
            <div class="rect">
                <div class="title">SegmentTitle</div>
                <div class="text">제3항의 승인을 얻지 못한 때에는 
                    그 처분 또는 명령은 그때부터 효력을 상실한다.
                  <br/><img src="images/content01.jpg"></div>
            </div>
            <div class="circle"><img src="images/Koala.jpg"  height="200"/></div>
            <div class="rect">
                <div class="title">SegmentTitle</div>
                <div class="text">제3항의 승인을 얻지 못한 때에는 
                     그 처분 또는 명령은 그때부터 효력을 상실한다.
                  <br/><img src="images/content01.jpg"></div>
            </div>
        </div>
    </div>
    <div class="second">
        <div class="view">
            <div class="circle"><img src="images/Koala.jpg" height="200"/></div>
            <div class="rect">
                <div class="title">SegmentTitle</div>
                <div class="text">제3항의 승인을 얻지 못한 때에는 
                       그 처분 또는 명령은 그때부터 효력을 상실한다. 
                  <br/><img src="images/content01.jpg"></div>
            </div>
            <div class="circle"><img src="images/Koala.jpg" height="200"/></div>
            <div class="rect">
                <div class="title">SegmentTitle</div>
                <div class="text">제3항의 승인을 얻지 못한 때에는 
                       그 처분 또는 명령은 그때부터 효력을 상실한다.
                  <br/><img src="images/content01.jpg"></div>
            </div>
        </div>
    </div>
</body>
</html>

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout06.html</title>
    <style type="text/css">
    #first{position:relative; width:100%; height:140px;  border:1px solid black; }
        #first_title{position:relative; width:400px; height:70px; border:1px solid green; margin:0 auto; 
                     font-weight:bold; font-size:200%; line-height:70px; text-align:center; }
        #first_text{position:relative; width:400px; height:70px; 
                    border:1px solid green;  margin:0 auto; font-size:80%; }
    #second{position:relative; width:100%; height:600px;  border:1px solid black;}
        #view{position:relative; width:1100px; height:600px; border:1px solid red; margin:0 auto;}
    .rect{position:relative; width:348px; height:600px; 
          border:1px solid blue;  margin-right:24px; float:left;}
        .rect:last-child{margin-right:0px;}
    .img{position:relative; width:350px; height:300px; overflow:hidden;}
    .box{position:relative; width:310px; height:280px; border:1px solid black; margin:0 auto;
        box-shadow:5px 5px 5px; top:-30px; background:white; }
    .button{position:absolute; width:150px; height:40px; background:blue; color:white; font-weight:bold;
            font-size:150%; line-height:40px; text-align:center;  bottom:30px; right:0;}
        .title{position:relative; width:280px; height:80px; border:1px dashed black; font-weight:bold; 
               font-size:150%;  text-align:center; line-height:70px; margin:0 auto; }
        .text{position:relative; width:280px; height:200px; border:1px dashed black;  margin:0 auto; font-size:90%;} 
</style>
</head>
<body>
    <div id="first">
        <div id="first_title">Content02 Title</div>
        <div id="first_text">제3항의 승인을 얻지 못한 때에는 
              그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
    </div>

    <div id="second">
        <div id="view">
            <div class="rect">
                <div class="img"><img src="images/Penguins.jpg"  height="300"></div>
                <div class="box">
                    <div class="title">Segment Title</div>
                    <div class="text">제3항의 승인을 얻지 못한 때에는 
                   그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
                </div>
                <div class="button">Button</div>
            </div>
            <div class="rect">
                <div class="img"><img src="images/Desert.jpg" height="300"></div>
                <div class="box">
                    <div class="title">Segment Title</div>
                    <div class="text">제3항의 승인을 얻지 못한 때에는 
                    그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
                </div>
                <div class="button">Button</div>
            </div>
            <div class="rect">
                <div class="img"><img src="images/Lighthouse.jpg" height="300"></div>
                <div class="box">
                    <div class="title">Segment Title</div>
                    <div class="text">제3항의 승인을 얻지 못한 때에는 
                   그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
                </div>
                <div class="button">Button</div>
            </div>
        </div>
    </div>
</body>
</html>

      작성해야할 코드가 길어질 때 text/css 파일만 따로 만들어 작성할 수 있음.

      webapp폴더 안에 새로운 폴더 생성해 .css로 파일 만듦

      .

      @charset "UTF-8";

#first{position:relative; width:100%; height:150px; border:1px dotted black;}
#first_title{position:relative; width:400px; height:75px; border:1px solid green; margin:0 auto; font-size:200%;font-weight:bold; line-height:75px; text-align:center;}
#first_text{position:relative; width:400px; height:75px; border:1px solid green; margin:0 auto; font-size:90%;}

#second{position:relative; width:100%; height:600px; border:1px dotted black;}
#view{position:relative; width:1200px; height:600px; border:1px solid red; margin:0 auto;}

#left_view{position:relative; width:600px; height:600px; background:yellow; float:left; overflow:hidden;}
#right_view{position:relative; width:600px; height:600px; background:yellowgreen; float:left;}

.rect{position:absolute; width:600px; height:188px; background:white;}
#rect1{top:0;}
#rect2{top:206px;}
#rect3{bottom:0;}

.left{position:relative; width:400px; height:188px; float:left; }
.title{position:relative; width:370px; height:50px; margin:0 auto; text-align:right; line-height:50px; font-size:150%; font-weight:bold; border-top:3px solid black;}
.text{position:relative; width:370px; height:133px; margin:0 auto; text-align:right; border-bottom:3px solid black;}

.right{position:relative; width:196px; height:188px; float:left; }
.circle{position:absolute; width: 188px; height:188px; right:0; top:0; border-radius:50%; overflow:hidden;}

      head 안에 <link rel="stylesheet" type="text/css" href="만든 폴더/파일 이름.css"/> 을 작성하여 저장해놓은 css 파일을 불러옴.

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout07.html</title>
    <link rel="stylesheet" type="text/css" href="css/Layout07.css"/>
</head>
<body>
    <div id="first">
        <div id="first_title">Content02 Title</div>
        <div id="first_text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
    </div>
    <div id="second">
        <div id="view">
            <div id="left_view"><img src="images/Lighthouse.jpg" width="600" height="600"></div>
            <div id="right_view">
                <div class="rect" id="rect1">
                    <div class="left">
                        <div class="title">Segment Title</div>
                        <div class="text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
                    </div>
                    <div class="right">
                        <div class="circle"><img src="images/Koala.jpg" height="188"></div>
                    </div>
                </div>
                <div class="rect" id="rect2">
                    <div class="left">
                        <div class="title">Segment Title</div>
                        <div class="text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
                    </div>
                    <div class="right">
                        <div class="circle"><img src="images/Penguins.jpg" height="188"></div>
                    </div>
                </div>
                <div class="rect" id="rect3">
                    <div class="left">
                        <div class="title">Segment Title</div>
                        <div class="text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
                    </div>
                    <div class="right">
                        <div class="circle"><img src="images/Jellyfish.jpg" height="188"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

      저작자표시

      'VScode > CSS' 카테고리의 다른 글

      [CSS] transition  (0) 2022.09.08
      [CSS] position, display, visibilty, shadow  (0) 2022.09.08
      [CSS] background, font, button, gradiant  (0) 2022.09.08
      [CSS] pseudoclass  (0) 2022.09.08
      [CSS] border, checked, box model, list  (0) 2022.09.08

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바