풀스택 개발자 과정 53일차

너구·2026년 7월 23일

풀스택 성장과정

목록 보기
56/79

엑셀, 한글파일 바로가기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        ul {
            list-style: square;
        }

        li a {
            line-height: 30px;
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }

        a[href$=hwp] {
            /* 연결한 파일의 확장자가 hwp인 링크 */
            background: url(../Day04/images/hwp_icon.gif) center right no-repeat;
            /* 배경으로 hwp 아이콘 표시 */
            padding-right: 25px;
            /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
        }

        a[href$=xls] {
            /* 연결한 파일의 확장자가 hwp인 링크 */
            background: url(../Day04/images/excel_icon.gif) center right no-repeat;
            /* 배경으로 hwp 아이콘 표시 */
            padding-right: 25px;
            /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
        }
    </style>
</head>
<body>
    <h3>회사 소개 파일 내려받기</h3>
    <ul>
        <li><a href="intro.hwp">hwp 파일</a></li>
        <li><a href="intro.xls">엑셀 파일</a></li>
    </ul>
</body>
</html>

링크 바로가기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        ul {
            list-style: circle;
        }

        li {
            padding: 5px 30px;
        }

        li a {
            font-size: 16px;
            color: black;
            text-decoration: none;
        }

        a[href *="w3"] {
            /* href 속성값 중에 w3가 있는 a요소를 찾는 선택자 */
            background: blue;
            color: white;
        }
    </style>
</head>
<body>
    <h1>HTML5 참고 사이트</h1>
    <p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
    <ul>
        <li><a href="http://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
        <li><a href="http://caniuse.com/">HTML 지원 여부 체크</a></li>
        <li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어 쿼리</a></li>
    </ul>
</body>
</html>

로그인 페이지

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원 가입</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #ccc;
            padding: 20px;
        }

        #signup {
            background: white;
            border: 1px solid #222;
            border-radius: 5px;
            padding: 20px;
            width: 400px;
            margin: 30px auto;
        }

        #signup fieldset {
            border: 1px solid #ccc;
            margin-bottom: 30px;
        }

        #signup legend {
            font-size: 16px;
            font-weight: bold;
            padding-left: 5px;
            padding-bottom: 10px;
        }

        #signup ul li {
            line-height: 30px;
            list-style: none;
            padding: 5px 10px;
            margin-bottom: 2px;
        }

        #signup button {
            border: 1px solid #222;
            border-radius: 20px;
            display: block;
            font-size: 16px;
            letter-spacing: 1px;
            margin: auto;
            padding: 7px 25px;
        }

        #signup label {
            float: left;
            font-size: 13px;
            width: 110px;
        }

        #signup input[type=text],
        #signup input[type=password],
        #signup input[type=tel],
        #signup input[type=email] {
            /* 속성 선택자 사용 */
            border: 1px solid #ccc;
            /* 텍스트 필드 테두리 지정 */
            border-radius: 3px;
            /* 텍스트 필드 모서리를 둥글게 지정 */
            font-size: 13px;
            /* 텍스트 필드 안의 글자 크기 지정 */
            padding: 5px;
            /* 텍스트 필드와 내용 사이의 패딩 지정 */
            width: 200px;
            /* 텍스트 필드 너비 지정 */
        }

        #signup input[required] {
            /* 필수 입력 필드에 빨간 테두리 지정 */
            border: 1px red solid;
        }

        #signup input[readonly] {
            /* 읽기 전용 필드의 테두리 없애기 */
            border: none;
        }
    </style>
</head>

<body>
    <form id="signup">
        <fieldset>
            <legend>로그인 정보</legend>
            <ul>
                <li>
                    <label for="userid">아이디</label>
                    <input id="userid" name="userid" type="text" required autofocus>
                </li>
                <li>
                    <label for="pwd1">비밀번호</label>
                    <input id="pwd1" name="pwd1" type="password" required>
                </li>
                <li>
                    <label for="pwd2">비밀번호 확인</label>
                    <input id="pwd2" name="pwd2" type="password" required>
                </li>
                <li>
                    <label for="level">회원 등급</label>
                    <input id="level" name="level" type="text" readonly value="준회원">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li>
                    <label for="fullname">이름</label>
                    <input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
                </li>
                <li>
                    <label for="email">메일 주소</label>
                    <input id="email" name="email" type="email" placeholder="abcd@domain.com" required
                        autocomplete="off">
                </li>
                <li>
                    <label for="tel">연락처</label>
                    <input id="tel" name="tel" type="tel" autocomplete="off">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <button type="submit"> 제출 </button>
        </fieldset>
    </form>
</body>

</html>

</html>

링크 스타일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>link 스타일</title>
    <style>
        .container {
            width: 960px;
            margin: 0px auto;
        }

        .navi {
            width: 960px;
            height: 60px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ccc;
        }

        .navi ul {
            list-style: none;
            padding-top: 10px;
            padding-bottom: 5px;
        }

        .navi ul li {
            float: left;
            width: 150px;
            padding: 10px;
        }

        .navi a:link,
        .navi a:visited {
            /* 방문한 링크와 방문하지 않은 링크를 설정 */
            display: block;
            font-size: 14px;
            color: #000;
            padding: 10px;
            text-decoration: none;
            /* 밑줄 없앰 */
            text-align: center;
        }

        .navi a:hover,
        .navi a:focus {
            background-color: #222;
            /* 배경 색 */
            color: #fff;
            /* 글자 색 */
        }

        .navi a:active {
            background-color: #f00;
            /* 배경 색 */
        }

        .contents {
            margin: 30px auto;
            width: 400px;
            padding: 20px;
            border: 1px solid #222;
            border-radius: 5px;
        }

        #intro:target {
            background-color: #0069e0;
            color: #fff;
        }

        #room:target {
            background-color: #ff9844;
        }

        #reservation:target {
            background-color: #fff8dc;
        }
    </style>
</head>
<body>
  <div class="container">
    <nav class="navi">
      <ul>
        <li><a href="#intro">이용 안내</a></li>
        <li><a href="#room">객실 소개</a></li>
        <li><a href="#reservation">예약 방법 및 요금</a></li>
        <li><a href="ps-2.html">예약하기</a></li>
      </ul>
    </nav>
    <div id="intro" class="contents">
        <h2>이용 안내</h2>
        <p>Excepteur do est eiusmod nulla et veniam. 
            Labore officia officia ex aliqua exercitation aliqua 
            laborum Lorem deserunt ut ullamco labore anim. 
            Officia eu duis aliquip incididunt. 
            Do laborum et consequat aliqua sint consectetur.</p>
      </div>
      <div id="room" class="contents">
        <h2>객실 소개</h2>
        <p>Qui magna culpa minim reprehenderit magna in nisi ipsum. 
            Ad cillum tempor minim fugiat est dolor. 
            Cillum sit qui minim sint officia nostrud cillum cupidatat 
            pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
      </div>
      <div id="reservation" class="contents">
        <h2>예약 방법 및 요금</h2>
        <p>Fugiat aliquip mollit proident velit magna esse ea officia eu. 
            Esse do aliqua proident culpa eiusmod duis minim deserunt eu 
            reprehenderit ut tempor. </p>
      </div>  
  </div>
</body>
</html>

회원가입

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원 가입</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
        }

        #signup {
            background: #fff;
            border: 1px solid #222; 
            border-radius: 5px;
            padding: 20px;
            width: 400px;
            margin: 30px auto;
        }

        #signup fieldset {
            border: 1px solid #ccc;
            margin-bottom: 30px;
        }

        #signup legend {
            font-size: 16px;
            font-weight: bold;
            padding-left: 5px;
            padding-bottom: 10pxx;
        }

        #signup ul li {
            line-height: 30px;
            list-style: none;
            padding: 5px 10px;
            margin-bottom: 2px;
        }

        #signup fieldset:first-of-type label {
            float: left;
            font-size: 13px;
            width: 60px;
        }

        #signup input:not([type=radio]) {
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 5px;
            width: 200px;
        }

        #signup input:not([type=radio]):hover {
            border-color: #f00;
        }

        #signup input:checked+label {
            /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
            color: red;
            font-weight: bold;
        }

        #signup button {
            border: 1px solid #222;
            border-radius: 20px;
            display: block;
            font: 16px 맑은고딕, 굴림, 돋움;
            letter-spacing: 1px;
            margin: auto;
            padding: 7px 25px;
        }

        #signup b {
            float: left;
            font-size: 13px;
            width: 110px;
        }
    </style>
</head>
<body>
  <div class="container">
    <form id="signup">    
      <fieldset>
        <legend>개인 정보</legend>
        <ul>
          <li>
            <label for="fullname">이름</label>
            <input id="fullname" name="fullname" type="text" required>
          </li>
          <li>
            <label for="tel">연락처</label>
            <input id="tel" name="tel" type="tel">
          </li>          
        </ul>
      </fieldset>
      <fieldset>  
        <legend>객실 형태</legend>
        <ul>
          <li>
            <input type="radio" name="room" id="basic">
            <label for="basic">기본형(최대 2인)</label>
          <li>      
          <li>
            <input type="radio" name="room" id="family">
            <label for="family">가족형(최대 8인)</label>
          </li>          
        </ul>
      </fieldset>
      <button type="submit"> 제출 </button> 
    </form>
  </div>
</body>
</html>

가상 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 선택자</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
        }

        .contents {
            margin: 30px auto;
            width: 400px;
            padding: 20px;
            border: 1px solid #222;
            border-radius: 5px;
        }

        .contents :nth-child(3) {
            background-color: #ffff00;
        }

        .contents p:nth-of-type(3) {
            background-color: #00b900;
        }
    </style>
</head>
<body>
  <div class="container"> 
    <div class="contents">
      <h2>이용 안내</h2>
      <p>Excepteur do est eiusmod nulla et veniam. 
        Labore officia officia ex aliqua exercitation aliqua laborum Lorem 
        deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. 
        Do laborum et consequat aliqua sint consectetur.</p> 
      <p>Qui magna culpa minim reprehenderit magna in nisi ipsum. 
        Ad cillum tempor minim fugiat est dolor. 
        Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur 
        ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
      <h2>객실 소개</h2>
      <p>Irure incididunt duis ut cupidatat laborum adipisicing veniam irure.</p>
      <h2>예약 방법 및 요금</h2>
      <p>Fugiat aliquip mollit proident velit magna esse ea officia eu. 
        Esse do aliqua proident culpa eiusmod duis minim deserunt eu 
        reprehenderit ut tempor. </p>
    </div>
  </div>
</body>
</html>

가상 클래스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 클래스</title>
    <style>
        #container {
            text-align: center;
            color: #2b2b2b;
        }

        table,
        tr,
        th {
            border: 1px solid #ccc;
        }

        table {
            width: 200px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        td {
            text-align: left;
            padding: 10px;
            padding-left: 20px;
        }

        table tr:nth-of-type(2n+1) {
            /* 홀수번 째 열에만 스타일 적용 */
            background: lightgray;
            color: black;
        }

        table tr:nth-of-type(2n) {
            /* 홀수 번째 열에만 스타일 적용 */
            background: red;
            color: whitesmoke;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>웹 개발</h1>
        <table>
            <tr>
                <td>HTML</td>
            </tr>
            <tr>
                <td>CSS</td>
            </tr>
            <tr>
                <td>Javascript</td>
            </tr>
            <tr>
                <td>React</td>
            </tr>
            <tr>
                <td>
                    node.js
                </td>
            </tr>
            <tr>
                <td>React</td>
            </tr>
            <tr>
                <td>node.js</td>
            </tr>
            <tr>
                <td>React</td>
            </tr>
            <tr>
                <td>node.js</td>
            </tr>
        </table>
    </div>
</body>
</html>

가상 요소

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 요소</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
        }

        ul li {
            margin: 15px;
        }

        li.new::after {
            content: "NEW!!";
            font-size: x-samll;
            padding: 2px 4px;
            margin: 0 10px;
            border-radius: 2px;
            background: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>제품 목록</h1>
        <ul>
            <li class="new">제품 A</li>
            <li>제품 B</li>
            <li>제품 C</li>
            <li class="new">제품 D</li>
        </ul>
    </div>
</body>
</html>

가상요소 2

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 요소</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .icon {
            width: 30px;
            height: 30px;
            position: relative;
        }

        /* Do it! 가상 요소를 사용해 뱃지 표시하기 */
        .icon i::after {
            content: "4";
            font-size: 10px;
            text-align: center;
            background-color: red;
            color: white;
            border-radius: 50%;
            padding: 5px;
            position: absolute;
            top: -5px;
            right: -3px;
        }
    </style>
</head>

<body>
    <div class="icon">
        <i class="fa-regular fa-bell fa-2x"></i>
    </div>
</body>

</html>

다양한 필터 함수

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다양한 filter 함수</title>
    <style>
        .gallery {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }

        .gallery img {
            width: 80%;
            border-radius: 50%;
        }

        .title {
            text-align: center;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .image-container {
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 10px;
            background: #f9f9f9;
        }

        /* Do it! filter 함수 사용해서 스타일 지정하기 */
        .blur {
            filter: blur(5px);
        }

        /* 흐리게 */
        .brightness {
            filter: brightness(2);
        }

        /* 밝기 2배로 */
        .contrast {
            filter: contrast(200%);
        }

        /* 대비 2배로 */
        .drop-shadow {
            filter: drop-shadow(16px 16px 10px black);
        }

        /* 그림자 추가 */
        .grayscale {
            filter: grayscale(100%);
        }

        /* 회색조 */
        .invert {
            filter: invert(100%);
        }

        /* 전체 색상 반전 */
        .sepia {
            filter: sepia(100%);
        }

        /* 세피아 톤으로 변경 */
        .opacity {
            filter: opacity(50%);
        }

        /* 반투명하게 */
        .hue-rotate {
            filter: hue-rotate(90deg);
        }

        /* 모든 hue 값을 90도 이동 */
        .saturate {
            filter: saturate(200%);
        }
    </style>
</head>

<body>

    <div class="orgin">
        <img src="images/cat.jpg" style="border-radius: 50%;">
    </div>
    <div class="gallery">
        <div class="image-container">
            <div class="title">filter:blur(5px)</div>
            <img src="images/cat.jpg" class="blur">
        </div>
        <div class="image-container">
            <div class="title">filter:brightness(2)</div>
            <img src="images/cat.jpg" class="brightness">
        </div>
        <div class="image-container">
            <div class="title">filter:contrast(200%)</div>
            <img src="images/cat.jpg" class="contrast">
        </div>
        <div class="image-container">
            <div class="title">filter:drop-shadow(16px 16px 10px black)</div>
            <img src="images/cat.jpg" class="drop-shadow">
        </div>
        <div class="image-container">
            <div class="title">filter:grayscale(100%)</div>
            <img src="images/cat.jpg" class="grayscale">
        </div>
        <div class="image-container">
            <div class="title">filter:invert(100%)</div>
            <img src="images/cat.jpg" class="invert">
        </div>
        <div class="image-container">
            <div class="title">filter:sepia(100%)</div>
            <img src="images/cat.jpg" class="sepia">
        </div>
        <div class="image-container">
            <div class="title">filter:opacity(50%)</div>
            <img src="images/cat.jpg" class="opacity">
        </div>
        <div class="image-container">
            <div class="title">filter:hue-rotate(90deg)</div>
            <img src="images/cat.jpg" class="hue-rotate">
        </div>
        <div class="image-container">
            <div class="title">filter:saturate(200%)</div>
            <img src="images/cat.jpg" class="saturate">
        </div>


    </div>

</body>

</html>

Q1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q1</title>
    <style>
        img {
            margin-right: 50px;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px #ccc;
        }

        img:first-of-type {
            border: 2px solid #f00;
        }
    </style>
</head>

<body>
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
</body>

</html>

Q2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q2</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .top-menu {
            margin: 50px auto;
            padding: 0;
            list-style: none;
            width: 605px;
            height: 35px;
            box-shadow: 0 3px 4px #8b8b8b;
            background-color: #dadada;
        }

        .top-menu li {
            float: left;
            border-right: 1px solid #929292;
        }

        .top-menu li a:link {
            color: black;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 100px;
            height: 35px;
            line-height: 35px;
        }

        .top-menu li:last-child {
            border-right: none;
        }

        .top-menu li:not(:last-child) a:hover {
            background-color: #555;
            color: #fff;
        }

        .top-menu li:last-child a:hover {
            background-color: #b30000;
            color: #fff;
        }
    </style>
</head>

<body>
    <nav>
        <ul class="top-menu">
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
            <li><a href="#">메뉴4</a></li>
            <li><a href="#">메뉴5</a></li>
            <li><a href="#">메뉴6</a></li>
        </ul>
    </nav>
</body>

</html>

Q3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q3</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        table {
            width: 200px;
            border-collapse: collapse;
        }

        table,
        td {
            border: 1px solid black;
            padding: 10px;
        }

        caption {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        tr:nth-child(odd) td {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div id="container">
        <table>
            <caption>웹 개발</caption>
            <tr>
                <td>HTML</td>
            </tr>
            <tr>
                <td>CSS</td>
            </tr>
            <tr>
                <td>Javascript</td>
            </tr>
            <tr>
                <td>node.js</td>
            </tr>
            <tr>
                <td>Typescript</td>
            </tr>
        </table>
    </div>
</body>

</html>

Q4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q4</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            width: 500px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }

        article h2+p {
            background-color: #ffee00;
        }
    </style>
</head>

<body>
    <div class="container">
        <article>
            <h2>가상 클래스</h2>
            <p>요소의 특정 상태에 따라 스타일을 지정하기 위해 사용한다.</p>
            <p>(예) :hover, :active, :nth-child 등</p>
        </article>
        <article>
            <h2>가상 요소</h2>
            <p>문서에는 없지만 스타일을 적용하기 위해 가상으로 요소를 만든다.</p>
            <p>(예) :: frist-letter, ::before, ::after</p>
        </article>
    </div>
</body>

</html>

Transform 밀기

<!DOCTYPE html>
<!-- 밀기 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform:translate</title>
    <style>
        #container {
            width: 800px;
            height: 200px;
            margin: 20px auto;
        }

        .origin {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;
            margin: 40px;
        }

        .origin>div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #movex:hover {
            transform: translateX(50px);
            /* x축으로(가로) 50px 이동 */
        }

        #movey:hover {
            transform: translateY(20px);
            /* y축으로(세로) 20px 이동 */
        }

        #movexy:hover {
            transform: translate(10px, 20px);
            /* x축으로(가로) 10px y축으로(세로) 20px 이동 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="origin">
            <div id="movex"></div>
        </div>
        <div class="origin">
            <div id="movey"></div>
        </div>
        <div class="origin">
            <div id="movexy"></div>
        </div>
    </div>
</body>
</html>

Transfrom 상하좌우로 늘리기

<!DOCTYPE html>
<!-- 상하좌우로 늘리기 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform:translate</title>
    <style>
        #container {
            width: 800px;
            height: 200px;
            margin: 20px auto;
        }

        .origin {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;
            margin: 40px;
        }

        .origin>div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #movex:hover {
            transform: scaleX(2);
            /* x축으로(가로) 2배 확대 */
        }

        #movey:hover {
            transform: scaleY(1.5);
            /* y축으로(세로) 1.5배 확대 */
        }

        #movexy:hover {
            transform: scale(0.7);
            /* x,y 축으로(가로, 세로) 0.7배 확대 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="origin">
            <div id="movex"></div>
        </div>
        <div class="origin">
            <div id="movey"></div>
        </div>
        <div class="origin">
            <div id="movexy"></div>
        </div>
    </div>
</body>
</html>

Transform 각도 조절

<!DOCTYPE html>
<!-- 각도 조절 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform:rotate</title>
    <style>
        #container {
            width: 800px;
            margin: 20px auto;
        }

        .origin {
            width: 100px;
            height: 100px;
            float: left;
            margin: 40px;
        }

        #rotate1:hover {
            transform: rotate(40deg);
            /* 시계 방향(오른쪽)으로 40도 회전 */
        }

        #rotate2:hover {
            transform: rotate(-40deg);
            /* 시계 반대 방향(왼쪽) 으로 40도 회전 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="origin" id="rotate1">
            <img src="images/tree.jpg">
        </div>
        <div class="origin" id="rotate2">
            <img src="images/tree.jpg">
        </div>
    </div>
</body>
</html>

Transform 원근감

<!DOCTYPE html>
<!-- 원근감 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform</title>
    <style>
        .origin {
            width: 152px;
            height: 180px;
            border: 1px solid black;
            margin: 30px;
            float: left;
        }

        .origin>div {
            width: 152px;
            height: 180px;
        }

        .rotatex:hover {
            transform: rotateX(50deg);
            /* x축으로 50도 회전 */
        }

        #pers {
            perspective: 300px;
            /* 원근감 추가 */
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="rotatex">
            <img src="images/sunset.jpg">
        </div>
    </div>
    <div class="origin" id="pers">
        <div class="rotatex">
            <img src="images/sunset.jpg">
        </div>
    </div>
</body>
</html>

Transform 회전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform</title>
    <style>
        #container {
            width: 800px;
            margin: 20px auto;
        }

        .origin {
            width: 100px;
            height: 100px;
            margin: 40px;
            float: left;
            border: 1px solid black;
            perspective: 200px;
            /* 원근감 추가 */
        }

        .origin>div {
            width: 100px;
            height: 100px;
            background-color: orange;
            transition: all 3s;
            /* 3초동안 회전하도록 트랜지션 적용 */
        }

        #rotatex:hover {
            transform: rotateX(55deg);
            /* X축으로 55도 회전 */
        }

        #rotatey:hover {
            transform: rotateY(55deg);
            /* Y축으로 55도 회전 */
        }

        #rotatez:hover {
            transform: rotateZ(55deg);
            /* Z축으로 55도 회전 */
        }

        #rotatexyz:hover {
            transform: rotate3d(2.5, 1.2, -1.5, 55deg);
            /* x,y,z 축으로 55도 회전 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="origin">
            <div id="rotatex"></div>
        </div>
        <div class="origin">
            <div id="rotatey"></div>
        </div>
        <div class="origin">
            <div id="rotatez"></div>
        </div>
        <div class="origin">
            <div id="rotatexyz"></div>
        </div>
    </div>
</body>
</html>

Transform 비틀기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TransForm</title>
    <style>
        #container {
            width: 600px;
            margin: 20px auto;
        }

        .origin {
            width: 100px;
            height: 100px;
            margin: 10px;
            float: left;
            border: 1px solid black;
        }

        .origin>div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #skewx:hover {
            transform: skewX(30deg);
            /* x축 기준으로 30도 비틀기 */
        }

        #skewy:hover {
            transform: skewY(15deg);
            /* y축 기준으로 15도 비틀기 */
        }

        #skewxy:hover {
            transform: skew(-25deg, -15deg);
            /* x축 기준으로 -25도, y축 기준으로 -15도 비틀기 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="origin">
            <div id="skewx"></div>
        </div>
        <div class="origin">
            <div id="skewy"></div>
        </div>
        <div class="origin">
            <div id="skewxy"></div>
        </div>
    </div>
</body>
</html>

Transition


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition</title>
    <style>
        .box {
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background-color: #07f;
            border: 1px solid #222;
            transition-property: width, height;
            /* 트랜지션 대상 - 너비, 높이 */
            transition-duration: 2s, 1s;
            /* 트렌지션 시간 - 2초, 1초 */
        }

        .box:hover {
            width: 200px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Transition timing function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition timing function</title>
    <style>
        #ex div {
            float: left;
            width: 100px;
            height: 50px;
            margin: 5px 10px;
            padding: 5px;
            color: white;
            background-color: #006aff;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
        }

        #ex:hover div {
            height: 400px;
        }

        #ex .ease {
            transition: 3s ease;
        }

        #ex .linear {
            transition: 3s linear;
        }

        #ex .ease-in {
            transition: 3s ease-in;
        }

        #ex .ease-out {
            transition: 3s ease-out;
        }

        #ex .ease-in-out {
            transition: 3s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="ex">
        <div class="ease">ease</div>
        <div class="linear">linear</div>
        <div class="ease-in">ease-in</div>
        <div class="ease-out">ease-out</div>
        <div class="ease-in-out">ease-in-out</div>
    </div>
</body>
</html>

Transition 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            margin: 50px auto;
            width: 100px;
            height: 100px;
            background-color: #fb5;
            border: 1px solid #222;
            transition: 2s ease-in;
            /* 대상: all 시간: 2초 함수: ease-in */
        }

        /* 여기에 있는 속성이 모두 트랜지션 대상 */
        .box:hover {
            width: 200px;
            height: 200px;
            background-color: #f50;
            transform: rotate(270deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

마무리

오늘도 CSS를 배웠다. 트랜지션을 배우면서 빙글빙글 돌고 비틀리고 그러는 걸 보니 재밌었다.

profile
너구
이전 포스트

풀스택 개발자 과정 52일차

다음 포스트

풀스택 개발자 과정 54일차

0개의 댓글