데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 25일차 강의 정리

CSS

10. 전환, 변환

실습 1. transition

<!DOCTYPE html>
<html lang="ko">
<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>
        .box {
            width: 100px;
            height: 100px;
            margin: 50px;
            background: red;

            /*
            transition-property: all;
            transition-duration: 2s;
            transition-property: background;
            transition-duration: 7000.as
            */
            /* /속성, 지속시간, d*/
            transition: 1s cubic-bezier(0.65, 0, 0.66,-0.56 )
            
        }

        .box::hover {
            width: 300px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

실습 2. transformation

<!DOCTYPE html>
<html lang="ko">
<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>
        div[class^="box"] {
            width: 200px;
            height: 200px;
            background: orange;
            margin: 50px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            transition: 2s;
        }

        .box1:hover {
            transform:rotate(-720deg);
        }

        .box2:hover {
            transform: translateX(100px);
        }

        .box3:hover {
            transform: scale(0.7, 1.5);
        }

        .box4:hover {
            transform: skew(0, 20deg);
        }

        .box5:hover {
            transform: translate(30px, -20px) skewX(-20deg) scale(0.7);
        }

    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
</body>
</html>

11. animation

실습 1. name, duration

<!DOCTYPE html>
<html lang="ko">
<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>
        .box {
            width: 100px;
            height: 100px;
            background: green;
        }

        .box:hover {
            /*
            animation-name: grow-up;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-delay: 1s;
            animation-direction: alternate-reverse;
            */

            animation: grow-up 1s ease-in-out 1s infinite alternate;
        }   

        @keyframes grow-up {
            0% {
                width: 100px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

실습 2. direction

<!DOCTYPE html>
<html lang="ko">
<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>
        .box {
            width: 100px;
            height: 100px;
            background: tomato;
            border-radius: 10px;
            margin: 30px;
            animation: move 1s linear 0.5s infinite alternate-reverse;
        }

        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(100px, 0);
            }
            50% {
                transform: translate(100px, 100px);
            }
            75% {
                transform: translate(0px, 100px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

실습 3. fill-mode

<!DOCTYPE html>
<html lang="ko">
<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>
        .box {
            width: 100px;
            height: 100px;
            background: tomato;
            border-radius: 10px;
            margin: 30px;
            animation: move 2s 2s;
            animation-fill-mode: forwards;
        
            /* 
                animation-fill mode 속성들
                none : 기존 위치 시작 -> 애니메이션 시작 위치 이동 -> 애니메이션 동작-> 기존 위치로 가서 종료
                forwards : 기존 위치에서 시작 -> 애니메이셔 시작 위치 이동 -> 애니메이션 동작 -> 애니메이션 종료 위치에서 종료
                backwards : 애니메이션 시작 위치에 시작 -> 동작 후 기존 위치로 이동
                both : 애니메이션 시작 위치에서 시작 -> 동작 후 애니메이션 종료 지점에서 종료.
            */
        }

        @keyframes move {
        0% {
            transform: translate(100px, 100px);
            background: dogerblue;
        }
        100% {
            transform: translate(300px, 100px);
            background: yellowgreen;
        }
    }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

실습 4. play-state

<!DOCTYPE html>
<html lang="ko">
<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>
        .box {
            width: 100px;
            height: 100px;
            background: tomato;
            border-radius: 10px;
            margin: 30px;
            animation: size-up 3s linear infinite alternate;

            text-align: center;
            line-height: 100px;
        }

        @keyframes size-up {
            0% {
                width: 100px;
            }
            100% {
                width: 100%;
            }
        }

        .box::before {
            content: '재생중';
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }

        .box:hover {
            animation-play-state: paused;
            background-color: skyblue;
        }

        .box:hover::before {
            content: '중지됨';
            color: #000;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

프레임워크

부트스트랩은 현재 버전이 5버전까지 나와 있으나, 여기서는 bootstarpk의 3버전 기준으로 사용하기로 한다.

12. 부트스트랩

실습 1. form-sample

<!DOCTYPE html>
<html lang="ko">
<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>

    <link rel="stylesheet" href="./css/bootstrap.css">

</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="user">이름</label>
                    <input type="text" class="form-control" id="user"> <br>
                    <label for="pwd">비밀번호</label>
                    <input type="password" class="form-control" id="pwd"> <br>

                    <select class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

실습 2. 그리드 예제

<!DOCTYPE html>
<html lang="ko">
<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>

    <!-- 합쳐지고 최소화된 원본 부트스트랩 css -->
    <link rel="stylesheet" href="./css/bootstrap.css">

    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="./css/bootstrap-theme.css">

    <!-- 자바스크립트 기능 사용을 위한 원본 파일 -->
    <link rel="stylesheet" href="./js/bootstrap.js">

    <style>
        div[class^="col"] {
            border: 1px solid red;
            padding: 10px;
        }

        .inner {
            border-color: blue;
            background: #ccc;
        }
    </style>

</head>
<body>

    <!--
        bootstrap의 grid 시스템은
        하나의 행에 박스를 수평으로 쉽게 배치할 수 있습니다.
        col-md-?의 총 합은 한 행당 12가 되어야 합니다.

        그리드의 class 속성에는
        xs: 항상 가로로 배치 (모바일)
        sm: 768px 이하에서는 세로로 표시 시작 (태블릿)
        md: 992px 이하에서는 세로로 표시 시작 (노트북, 데스크탑)
        lg: 1200px 이하에서 세로로 표시 시작 (데스크탑)

    -->


    <!-- 클래스 이름이 container 안에서 작성하는 것을 권장. -->
    <div class="container">
        <!-- 블록 요소의 한 행을 차지하게 하는 박스 영역. -->
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-1 col-lg-2">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
        </div>

        <div class="row">
            <div class="col-md-8">
                <div class="col-md-6 inner">1-1박스</div>
                <div class="col-md-6 inner">1-2박스</div>
            </div>
            <div class="col-md-4">
                <div class="col-md-6 inner">1-1박스</div>
                <div class="col-md-6 inner">1-2박스</div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-5">col-md-5</div>
            <div class="col-md-offset-2 col-md-5">col-md-5</div>
        </div>

        <div class="row">
            <div class="col-md-offset-1 col-md-4">col-md-4</div>
            <div class="col-md-7">col-md-7</div>
        </div>

    </div>


    
</body>
</html>

실습 3. 레이아웃 예시

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

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

    <link rel="stylesheet" href="./css/bootstrap.css">

    <style>
        header {
            height: 100px;
            background: skyblue;
            border-radius: 15px;
            padding: 10px;
            margin: 10px auto;
            text-align: center;
            line-height: 100px;
        }
        ul {
            background: #ccc;
            padding: 10px;
            border-radius: 10px;
            list-style: none;
        }

        #banner {
            background: #ccc;
            height: 200px;
            padding: 10px;
            border-radius: 10px;
        }
        footer {
            text-align: center;
        }
    </style>

</head>

<body>

    <div class="container">
        <header>
            <h2>그리드 시스템을 이용한 레이아웃</h2>
        </header>
        <div class="row">
            <div id="menu" class="col-md-2">
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                    <li>menu4</li>
                </ul>
            </div>
            <div id="content" class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nulla velit. Vivamus
                            facilisis vel quam vel condimentum. Phasellus facilisis mi id convallis gravida. Nam egestas
                            diam enim, eu hendrerit turpis ornare eget. Sed justo massa, congue id feugiat a,
                            condimentum quis ipsum. Phasellus convallis, ex nec molestie gravida, nunc dui varius quam,
                            mollis dictum urna eros eu enim. Nullam tristique sollicitudin ultrices. Suspendisse
                            vulputate, mi id suscipit mollis, lectus sapien egestas magna, sit amet fermentum risus eros
                            a ipsum. In quam diam, auctor eu urna eget, ornare accumsan odio.

                        </p>
                    </div>
                    <div class="col-md-6">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nulla velit. Vivamus
                            facilisis vel quam vel condimentum. Phasellus facilisis mi id convallis gravida. Nam egestas
                            diam enim, eu hendrerit turpis ornare eget. Sed justo massa, congue id feugiat a,
                            condimentum quis ipsum. Phasellus convallis, ex nec molestie gravida, nunc dui varius quam,
                            mollis dictum urna eros eu enim. Nullam tristique sollicitudin ultrices. Suspendisse
                            vulputate, mi id suscipit mollis, lectus sapien egestas magna, sit amet fermentum risus eros
                            a ipsum. In quam diam, auctor eu urna eget, ornare accumsan odio.

                        </p>
                    </div>
                </div>
            </div>
            <div id="banner" class="col-md-2">
                여기는 기타 부가적인 배너 자리
            </div>
        </div>
        <hr>
        <footer>
            여기는 하단 푸터 부분입니다.
        </footer>
    </div>

</body>

</html>

실습 4. table-sample

<!DOCTYPE html>
<html lang="ko">
<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>

    <link rel="stylesheet" href="./css/bootstrap.css">

</head>
<body>

    <div class="container">
        <h4 class="text-primary">기본 table 코드</h4>
        <table class="table table-hover table-bordered table-condensed">
            <thead>
                <tr class="warning">
                    <th>번호</th>
                    <th>제목</th>
                    <th>글쓴이</th>
                </tr>
            </thead>
            <tbody>
                <tr class="info">
                    <td>1</td>
                    <td>테이블 테스트 테이블 테스트</td>
                    <td>홍길동</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>테이블 테스트 테이블 테스트</td>
                    <td>김철수</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>테이블 테스트 테이블 테스트</td>
                    <td>박영희</td>
                </tr>
            </tbody>
        </table>
    </div>
    
</body>
</html>

실습 5. modal-sample

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

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

    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.css">

</head>

<body>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#testModal">
        모달창 열기
    </button>


    <div id="testModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">모달 제목</h4>
                </div>
                <div class="modal-body">
                    <p>모달 내용은 어쩌고 저쩌고....</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
    <script src="./js/bootstrap.js"></script>
</body>

</html>

좋은 웹페이지 즐겨찾기