국비 36일차 css 정리 2

2021. 2. 26. 18:29

2021.02.26 국비교육 36일차

[TOC]

display

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 실습</title>
<style type="text/css">
p {
    display: inline;
}

div.two { /* div태그 -> class가 two인 것 찾기 */
    display: none; /* 안보임 */
}
</style>

</head>
<body>
    <div class="one">
        <p>Hello</p>
        <p>World</p>
    </div>
    <div class="two">
        <p>Hello2</p>
        <p>World2</p>
    </div>
</body>
</html>

inline-block

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 실습</title>
<style type="text/css">

#box{
    /* display : inline-block; */
    display : inline-block;
    background-color : red;
    width : 300px;
    height : 50px;
    margin :10px;
}

</style>

</head>
<body>
<div>
    <span>dummy</span>
    <div id = "box">
        <span>죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다.</span>
    </div>
    <span>dummy</span>
</div>
</body>
</html>

visibility

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility 실습</title>
<style type="text/css">

#box{
    visibility : hidden; /* visible */
}

</style>

</head>
<body>
<div>
    <span>dummy</span>
    <div id = "box">
        <span>죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다.</span>
    </div>
    <span>dummy</span>
</div>
</body>
</html>

collapse

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility 실습</title>
<style type="text/css">

table{ /* 0~1사이 투명도 */
    visibility : collapse;
}

</style>

</head>
<body>
<div>
    <span>dummy</span>
    <table>
        <tr>
            <td>Test1</td>
        </tr>
        <tr>
            <td>Test2</td>
        </tr>        
        <tr>
            <td>Test3</td>
        </tr>
    </table>            
    <span>dummy</span>
</div>
</body>
</html>

opacity (투명도)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>opacity 실습</title>
<style type="text/css">

    #box{
        opacity:0.7;
    }

</style>

</head>
<body>
<div>
    <span>dummy</span>
    <div id = "box">
        <span>죽는 날까지 하늘을 우러러 한점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다.</span>
    </div>
    <span>dummy</span>
</div>
</body>
</html>

box

width height

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
    div{
        width : 100px;
        height : 100px; /* content의 넓이 높이 지정 */
        background-color : red;
    }

</style>

</head>
<body>
<div>
</div>
</body>
</html>

max-width

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
    div{
        margin:10px; /* 바깥여백 */
    }


    #one{
        width : 500px;
        height : 100px;
        background-color : red;
    }
    #two{
        height : 100px; 
        background-color : red;
    }
    #three{
        max-width : 500px;
        height : 100px; 
        background-color : red;
    }

</style>

</head>
<body>
<div id = "one">one</div>
<div id = "two">two</div>
<div id = "three">three</div>
</body>
</html>

padding

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
    div{
        width : 100px;
        height : 100px;
        background-color : red;
        /* border없음 */
        margin :10px;
        padding : 30px;

    }


</style>

</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">

    #one{
        width:100px;
        height:100px;
        background-color : red;
    }

    #two{
        width:100px;
        height:100px;
        background-color : red;

        margin : 10px;
        padding : 30px;
    }

</style>

</head>
<body>
<div id="one"></div>
<div id="two"></div>

</body>
</html>

margin

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">

    div{
        width:100px;
        height : 100px;
        background-color:red;
    }

    #one{
        margin-top : 10px;
        margin-right : 10px;
        margin-bottom : 10px;
        margin-left : 10px;
    }
    #two{
        margin : 10px 5px 10px 3px; /* 상 우 하 좌 */
    }
    #three{
        margin : 10px /* 상 우 하 좌 */
    }
    #four{
        margin: 10px 20px; /* 상하 : 10px 좌우: 20px */
    }
    #five{
        margin : 10px 20px 30px; /* 상 10px 하 30px 좌우 20px */
    }

</style>

</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

</body>
</html>

border

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
div {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
}

#one {
    border-top-width: 10px;
    border-right-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: black;
}

#two {
    border-width: 10px 20px; /*상하 우좌  */
    border-style: solid dotted;
    border-color: black;
}

#three {
    border-width: 10px;
    border-style: solid;
    border-color: black;
}

#four{
    border : 10px solid black; /* width, style, color */
}
</style>

</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
</body>
</html>

padding

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
div {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
    border: 10px solid black;
}

#one {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

#two {
    padding: 10px 10px 10px 10px; /* 상우하좌 */
}

#three {
    padding: 10px;
}

#four {
    padding: 50px 20px; /* 상하 50px 좌우 20px */
}

#five {
    padding: 50px 20px 30px; /* 상 50px 좌우 20px 하 30px */
}
</style>

</head>
<body>
    <div id="one">Hello</div>
    <div id="two">Hello</div>
    <div id="three">Hello</div>
    <div id="four">Hello</div>
    <div id="five">Hello</div>
</body>
</html>

box-sizing

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">

#one {
    width : 300px;
    height : 100px;
    border : 1px solid blue;
    box-sizing : border-box;
}
#two {
    width : 300px;
    height : 100px;
    padding : 50px;
    border : 1px solid red;
    box-sizing : border-box;
}



</style>

</head>
<body>
    <div id="one">Hello</div>
    <div id="two">Hello</div>

</body>
</html>

background-color

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">

    h1{
        background-color:green;
    }

    div{
        background-color:#00ffff;
    }

    p{
        background-color:rgb(0,200,255);
    }


</style>

</head>
<body>
    <h1>홍길동</h1>
    <div>
        이순신
        <p>강감찬</p>
        background-color 실습
    </div>
</body>
</html>

background-image

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    body{
        background-image :url("../images/BackgroundFront.png"),url("../images/BackgroundBack.png");
    }

</style>

</head>
<body>
</body>
</html>

background - repeat

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    body{
        background-image :url("../images/bg.jpg");
        background-repeat : repeat-x; /* no-repeat */
    }

</style>

</head>
<body>
</body>
</html>

background-attachment (그림 고정)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    body{
        background-image :url("../images/BackgroundFront.png"),url("../images/BackgroundBack.png");
        background-repeat : no-repeat;  
        background-attachment : fixed;
    }
</style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>



</body>
</html>

background-position

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    body{
        background-image :url("../images/BackgroundFront.png"),url("../images/BackgroundBack.png");
        background-repeat : no-repeat;  
        background-attachment : fixed;
        background-position : bottom;
    }
</style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>
    <p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
    <p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
    <p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum.</p>



</body>
</html>

font-family

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    .font-arial{
        font-family: '없는 폰트', sans-serif;
    }
    .font-roman{
        font-family: '없는 폰트', serif;
    }
    .font-ansang{
        font-family: '없는 폰트', sans-serif;
    }
</style>
</head>
<body>

<h1 class = "font-arial">Lorem ipsum</h1>
<h1 class = "font-roman">Lorem ipsum</h1>
<h1 class = "font-ansang">Lorem ipsum</h1>

</body>
</html>

font-size

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    .a{
        font-size : xx-small;
    }
    .b{
        font-size : x-small;
    }
    .c{
        font-size : small;
    }
    .d{
        font-size : medium;
    }
    .e{
        font-size : large
    }
    .f{
        font-size : x-large;
    }
    .g{
        font-size : xx-large;
    }

</style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <h1 class="a">Lorem ipsum</h1>
    <h1 class="b">Lorem ipsum</h1>
    <h1 class="c">Lorem ipsum</h1>
    <h1 class="d">Lorem ipsum</h1>
    <h1 class="e">Lorem ipsum</h1>
    <h1 class="f">Lorem ipsum</h1>
    <h1 class="g">Lorem ipsum</h1>


</body>
</html>

font-weight

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    p{
        font-size : 2em;
        font-style : italic;
        font-weight : bold;
    }

</style>
</head>
<body>
    <p>Lorem ipsum</p>

</body>
</html>

font-align

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    h1{
        text-align : center;
    }
    h2{
        text-align : left;
    }
    h3{
        text-align : right;
    }

</style>
</head>
<body>
    <h1>Heading 1 (center)</h1>
    <h2>Heading 2 (left)</h2>
    <h3>Heading 3 (right)</h3>

</body>
</html>

text-align(박스에 맞게 글자 정렬)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    div{
        border : 1px solid black;
        padding : 10px;
        width : 200px;
        height : 250px;
        text-align : justify; /* 모든 라인의 width가 늘어감  // 박스 사이즈에 맞게 글자 정렬 */
    }

</style>
</head>
<body>
    <div>
        In my younger and more vulnerable years my father 
      gave me some advice that I've been turning over 
      in my mind ever since. 'Whenever you feel like criticizing 
      anyone,' he told me, 'just remember that all the people in 
      this world haven't had the advantages that you've had.'

    </div>    
</body>
</html>

text-decoration (글자의 데코레이션 / 줄긋기)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
    h1{
        text-decoration: overline;
    }
    h2{
        text-decoration: line-through;
    }
    h3{
        text-decoration:underline;
    }
    a{
        text-decoration:none; /* a태그의 링크 제거 */
    }

</style>
</head>
<body>
    <h1>Heading 1</h1>    
    <h2>Heading 2</h2>    
    <h3>Heading 3</h3>
    <a href="#">링크</a>    <!-- #넣으면 클릭해도 이동x  -->
</body>
</html>

text-transform (대소문자 변경)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">

    p.uppercase{
        text-transform : uppercase;
    }
    p.lowercase{
        text-transform : lowercase;
    }
    p.capitalize{
        text-transform : capitalize;
    }


</style>
</head>
<body>
    <p class = "uppercase">This is some text.</p>
    <p class = "lowercase">This is some text.</p>
    <p class = "capitalize">This is some text.</p>

</body>
</html>

text-indent(첫라인 들여쓰기)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">

    div{
        text-indent : 50px;
    }
</style>
</head>
<body>
<div>
    In my younger and more vulnerable years my father 
      gave me some advice that I've been turning over 
      in my mind ever since. 'Whenever you feel like criticizing 
      anyone,' he told me, 'just remember that all the people in 
      this world haven't had the advantages that you've had.'


</div>

</body>
</html>

letter-spacing(글자 간격)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">

    h1{
        letter-spacing :3px
    }
    h2{
        letter-spacing :-3px
    }
</style>
</head>
<body>
<h1>This is Heading1</h1>
<h2>This is Heading2</h2>

</body>
</html>

line-height(줄 간격)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}
</style>
</head>
<body>
    <p>
        standard line-height.<br> standard line-height.<br>
    </p>

    <p class="small">
        smaller line-height.<br> smaller line-height.<br>
    </p>

    <p class="big">
        bigger line-height.<br> bigger line-height.<br>
    </p>
</body>
</html>

word-spacing

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기존box 모델 실습</title>
<style type="text/css">
h1 {
    word-spacing: 10px
}

h2 {
    word-spacing: -5px
}
</style>
</head>
<body>
    <h1>This is Heading1</h1>
    <h2>This is Heading2</h2>

</body>
</html>

'ETC > 국비교육' 카테고리의 다른 글

국비 38일차 Javascript operator  (0) 2021.03.03
국비 37일차 CSS(position, overflow, float) + javascript 기초  (0) 2021.03.02
국비 35일차 css 정리  (0) 2021.02.25
국비 34일차 html(colspan, rowspan, ol, li, dl, div, span, form)  (0) 2021.02.24
국비 33일차 Html  (0) 2021.02.23

+ Recent posts

티스토리툴바