리스트와 버튼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List and Button</title>
    <style>
        body {
            margin: 0;
        }
        .myList {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .myList li {
            padding: 5px;
            margin-bottom: 5px;
            border-bottom: 1px solid #efefef;
        }
        ol.myList li:last-child { border-bottom: none; }
        .myList li:first-child { color: skyblue; }
        .myList li:nth-child(2) { color: tomato; }

        /* 버튼 스타일 */
        .btn {
            /* 버튼 크기 */
            padding: 15px 30px; 
            /* 버튼의 모서리를 둥글게 */
            border-radius: 5px;
            color: white;

        }
        .btn1 {
            background-color: red;
            border: 1px solid red;
        }
        .btn2 {
            background-color: blue;
            border: 1px solid blue;
        }
        .btn3 {
            background-color: green;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <!-- 리스트 -->
    <ul class="myList">
        <li>순서 없는 목록의 아이템1</li>
        <li>순서 없는 목록의 아이템2</li>
        <li>순서 없는 목록의 아이템3</li>
    </ul>

    <ol class="myList">
        <li>순서 있는 목록의 아이템1</li>
        <li>순서 있는 목록의 아이템2</li>
        <li>순서 있는 목록의 아이템3</li>
    </ol>

    <!-- 버튼 -->
    <button class="btn btn1">버튼1</button>
    <button class="btn btn2">버튼2</button>
    <button class="btn btn3">버튼3</button>
</body>
</html>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d7ac90f6-61fd-41ab-ae59-cd8558e3ac94/Untitled.png

배경화면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style>
        body {
            /* 여백을 초기화 */
            padding: 0;
            margin: 0;
        }
        .bg1 {
            background: url(bg1.jpg) left top no-repeat;
            background-size: cover;
            /* cover 는 body 의 크기에 맞춰줌 */
            /* height 는 사진의 세로 (가로는 div 태그는 100%임) */
            height: 100vh;
        }
        .bg2 {
            background: url(bg2.jpg) left top no-repeat;
            background-size: cover;
            /* cover 는 body 의 크기에 맞춰줌 */
            height: 100vh;
        }
        .bg3 {
            background: linear-gradient(45deg, red,yellow,green,blue);
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
</body>
</html>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            margin: 0 auto;
            height: 300px;
            position: relative;
            border: 2px solid gray;
            }
        .box {
            width: 100px;
            height: 100px;
            }
        .red {
            background: tomato;
            }
        .green {
            background: yellowgreen;
            }
        .blue {
            background: skyblue;
            }
        .float-left {
			float:left
		}
		.float-right {
			float:right
		}
		.clear {
			clear: both;
		}	
    </style>
</head>
<body>
    <!-- .container 치면 아래와 같이 만들어진다 (아이디는 #) -->
    <div class="container">
        <div class="box red float-right"></div>
        <div class="box green float-right"></div>
        <div class="box blue clear"></div>
    </div>

    <!-- h1.title 치면 아래와 같이 -->
    <h1 class="title"></h1>

    
</body>
</html>

position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
        width: 600px;
        margin: 0 auto;
        height: 300px;
        position: relative;
        border: 2px solid gray;
        }
        .box {
        width: 100px;
        height: 100px;
        }
        .red {
        background: tomato;
        }
        .green {
        background: yellowgreen;
        }
        .blue {
        background: skyblue;
        }
        /* 상대좌표 : 원래 위치에서 이동 */
        .relative {
            position: relative;
            top: 15px;
            left: 25px;
        }
        /* 절대좌표 : 상위 기준 태그에서 이동 */
        .absolute {
        position: absolute;
        bottom: 0px;
        right: 0px;
        }
        /* 화면 크기에 상관없이 간격유지 */
        .fixed {
        background: violet;
        position: fixed;
        bottom : 20px;
        right : 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box red"></div>
        <div class="box green absolute"></div>
        <div class="box blue"></div>
        <div class="box fixed"></div>
    </div>
</body>
</html>