データ融合JAVAアプリケーション開発者企業招聘連絡研修課程25日目まとめ

125639 ワード
bootstrap html CSS データ融合JAVAアプリケーション開発者企業招聘連絡研修課程 テキストリンク

CSS


10.変換


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

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


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

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

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

実習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.ガイドテープ


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

実習メッシュの例

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

実習レイアウトの例

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

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

実習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>
テストstl
優先順位キューPriorityQueueテストは、自動的にソートされます.