Chap5 CSS

Let's Just Go·2022년 4월 24일
CSShtml
0

CSS

목록 보기
5/5

CSS


Trainsition

  • 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>Transition</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            margin: 50px;
            background: blue;

            /* transition-property: width; */
            /* 어디를 변화시킬지 지정 */
            /* transition-duration: 5s; */
            /* 변화되는 시간 */

            /* transition-property: background;
            transition-duration: 700ms; */
            /* box의 색깔이 0.7초안에 색깔이 바뀌는 것을 확인 */

            transition: width 3s 1s cubic-bezier(.19,.79,.94,-0.7);
            /* transition : 속성, 지속시간, 딜레이시간, 타이밍함수 */
            /* 타이밍함수 : ease(처음에는 빨랐다가 이후 느려짐)
                           ease-in(느리다가 빨라짐)
                           ease-out(빠르다가 느리게)
                           ease-in-out(느리게 빠르게 느리게) 
                           linear(균일하게)
                           cubic-bezier()함수를 통해 수동으로 설정가능*/

        }

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

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

Transform

  • Transform

    • 요소에 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>Transform</title>

    <style>
        div[class^="box"] {
            /* 클래스이름이 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);
        }
        /* transform : rotate(720deg) 720도 오른쪽으로 돌도록 지정 */

        .box2:hover{
            transform: translate(100px, 300px);
        }
        /* transform : translate(100px, 300px) 100px 오른쪽 이동과 아래로 300px*/

        .box3:hover{
            transform: scale(2, 3);
        }
        /* scale : x축 y축으로 몇배씩 커지거나 작아질지 */

        .box4:hover{
            transform:skew(0, 20deg);
        }
        /* skew : x축 y축으로 기울이는 것 */

        .box5:hover{
            transform: translate(30px, -20px) skew(-20deg) scale(1.5);
        }
        /* 여러개의 함수를 동시에 사용할 수 있음 */

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

Animation

  • Animation

    • Transition과 Transform보다 조금 더 동적인 효과를 보여줌

    • 사용자가 원하는 효과를 내기 위해 Custom 진행 가능

    • @keyframes 이름{}으로 Animation 생성

      <!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>Name&Duration</title>
    <style>

        .box{
            font-size: 30px;
            width: 150px;
            height: 300px;
            background: beige;
            line-height: 300px;
            color: blue;
        }

        @keyframes 메롱 {
            /* 내가 만든 animation을 정의 */
            0% {
                width: 300px;
            }

            50%{
                width: 700px;
            }

            100%{
                width: 500px;
            }
            /* 구간을 세부적으로 나눌 수 있음 */
        }
        /* 내가 설정한 animation을 통해서 커스텀된 효과를 줄 수 있음 */

        .box:hover{
            /* box클래스에 hover가 발생하면 animation 실행 */
            /* animation-name: 메롱;
            animation-duration: 3s;
            animation-iteration-count: infinite; */
            /* animation의 반복을 지정 */

            /* animation-timing-function: ease-in-out;
            animation-delay: 1s;
            animation-direction: alternate; */
            /* animation의 진행방향을 설정해주는것 
                alternate : 0 -> 50 -> 100 -> 50 -> 0을 반복*/

            animation: 메롱 3s ease-in-out 1s infinite alternate;
            /* 필수사항 : name duration */
        }
    </style>
</head>
<body>
    <div class="box">
        배고프다.
    </div>
</body>
</html>

Direction

  • Direction

    • 움직이는 방향을 pixel단위로 설정 가능

      <!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>Direction</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            line-height: 300px;
            background: beige;
            border-radius: 20px;
            margin: 30px;
            font-size: 25px;
            font-weight: bold;
            color: springgreen;
            padding-left: 20px;
            animation: move 1s linear 0.5s infinite ;
        }
        @keyframes Move{
            0%{
                transform: translate(0,0);
            }

            25%{
                transform: translate(200px, 0);
            }

            50%{
                transform: translate(200px, 50px);
            }

            75%{
                transform: translate(0, 200px);
            }

            100%{
                transform: translate(0,0);
            }
            /* 시작과 끝을 동일하게 하면 자연스러운 animation 가능 */
        }

        .box:hover{
            animation: Move 500ms infinite ;
        }
    </style>
</head>
<body>
    <div class="box">
        배가 상당히 고프구만...
    </div>
</body>
</html>

fill-mode

  • fill-mode
    • 애니메이션 시작과 종료 위치 설정
      <!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>fill-mode</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            line-height: 300px;
            background: beige;
            border-radius: 20px;
            margin: 30px;
            font-size: 25px;
            font-weight: bold;
            color: springgreen;
            padding-left: 20px;
        }

        @keyframes Move{
            0%{
                transform: translate(100px,200px);
                background: dodgerblue;
            }

            100%{
                transform: translate(300px,500px);
                background: yellowgreen;
            }
            /* 100,100에서 시작해서 300, 100으로 이동하면서 background color도 바뀌고 있음 */
        }
        /* fill-mode : animation의 시작과 끝을 설정할 수 있음
                        기존의 box 위치가 중요하지 않고 animation 시작위치가 중요 */

        .box:hover{
            animation: Move 2s infinite both ;
            /* animation-fill-mode:both; */

            /* animation-fill-mode
                none : 기존 위치에서 시작 -> 애니메이션 시작 위치 이동 -> 애니메이션 동작 -> 기존 위치로 가서 종료 
                forwards : 기존 위치에서 시작 -> 애니메이션 시작 위치 이동 -> 애니메이션 동작 -> 애니메이션 종료 위치에서 종료
                backwards : 애니메이션 시작 위치에서 시작 -> 동작 후 기존 위치로 이동 후 종료
                both : 애니메이션 시작 위치에서 시작 -> 동작 후 애니메이션 종료 지점에서 종료(내가 지정한 영역에서만 이동)
                 */
            
        }
    </style>
</head>
<body>
    <div class="box">다음시간 점심시간~</div>
</body>
</html>

Play-state

  • Play-state

    • Animation을 잠시 멈추는 기능

    • 조금 더 동적으로 화면을 구성할 수 있음

      <!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>Play-state</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            line-height: 300px;
            background: beige;
            border-radius: 20px;
            margin: 30px;
            font-size: 25px;
            font-weight: bold;
            color: springgreen;
            padding-left: 20px;
            animation: size-up 2s linear infinite alternate both;
            text-align: center;
        }
        @keyframes size-up{
            0%{
                width: 100px;
            }
            100%{
                width: 100%;
            }
        }
        
        .box::before{
            content:'재생중';
            font-size: 24px;
            font-weight: bold;
            color:royalblue;
        }

        .box:hover{
            animation-play-state: paused;
            /* 마우스를 가져다 대면 애니메이션 잠시 멈춤 */
            background: yellowgreen;
        }

        .box:hover::before{
            content: '잠시 멈춤';
            font-size: 20px;
            font-weight: bold;
            color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        호오~
    </div>
</body>
</html>

  • Bootstrap에
    • 누가 만든 스타일을 가져와서 사용
    • class이름만 같이 지정해주면 해당 스타일을 html에서 적용 가능하고 원하는 기능 추가 가능
    • 반응형 웹
      • 데스크탑, 태블릿, 모바일 등 다양한 환경에서도 동일한 정보를 보여줄 수 있도록 유동적으로 변하는 브라우저를 말하는 것 같다.
      • class=”클래스 이름을 넣어 다양한 환경에서도 유동적으로 변할 수 있는 브라우저를 만들 수 있음”
    • Form-Sample
      • 누군가 만든 틀을 연결해서 사용
    • Bootstrap은 디자인을 container 안에서 작성하는 것을 원함 이후 row를 통해서 블록 요소의 한 행을 차지
      <!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>form-sample</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>
                    <!-- id와 pw를 입력할 수 있는 창을 만듬 -->

                    <select class="form-control">
                        <option value="잠온다">잠</option>
                        <option value="졸리다">졸리</option>
                        <option value="피곤쓰">피곤</option>
                    </select>
                    <!-- class에 form-control을 하게 되면 부모의 width와 height를 따라감
                         크기를 일정하게 맞출 수 있음 -->
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Grid

  • Grid

    • 그리드의 class 속성(col- 로 시작)에 따라서 박스의 배치를 유동적으로 조절할 수 있음

    • 하나의 행에는 12개의 box가 들어갈 수 있으며 col-md-2를 하면 하나의 행에 6개의 박스가 존재할 수 있음

    • 12칸을 넘어가면 줄 개행이 일어나고 class이름에 row를 적어도 줄 개행

      <!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>GridExample</title>

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

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

    <!-- JS 기능 사용을 위한 원본 파일 -->
    <link rel="stylesheet" href="./js/bootstrap.js">
    <style>
        div[class^="col"]{
            /* 클래스이름이 col로 시작한다면 */
            border: 1px solid blue;
            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-lg-2 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 class="col-md-1">col-md-1</div>
            <!-- 하나의 행에 12칸(12열)을 따로 지정하지 않아도 부트스트랩을 사용해서 나눌 수 있음 -->
            <!-- 클래스를 여러개 지정해서 사용자가 어떤 화면에서 보더라도 그에 맞게 크기 조절 가능  -->
        </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>
        <!-- row를 작성하면 줄 개행 -->

        <div class="row">
            <div class="col-md-8">col-md-8</div>
            <!-- 12칸 중 8칸을 차지하라 -->
            <div class="col-md-4">col-md-4</div>
            <!-- 12칸 중 4칸을 차지하라 -->
        </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>
            <!-- 12칸중 8칸을 차지하고 있는 박스안에서 또다시 2개로 나눔 -->

            <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>
            <!-- 12칸중 4칸을 차지하고 있는 박스안에서 또다시 2개로 나눔 -->

        
        <div class="row">
            <div class="col-md-5">col-md-5</div>
            <div class="col-md-5">col-md-5</div>
        </div>
        <!-- 5칸을 차지하는 박스가 2개 존재하고 오른쪽에 두칸의 공간이 남아있음 -->

        <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>
        <!-- col-md-offset-숫자 : 공백을 넣고 싶은 클래스 이름 앞에 넣어서 얼만큼 공백을 줄건지 표현가능  -->
        <!-- d -->

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

Layout

  • Layout
    • Grid를 통해서 Layout 설정 가능
      <!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>Layout</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;
        }

        #content{
            border: 4px solid blue;
        }

        
    </style>
</head>

<body>

    <div class="container">
        <header>
            <h2>그리드 시스템을 이용한 레이아웃</h2>
        </header>

        <div class="row">
            <div id="menu" class="col-md-2">
                <!-- 2칸만큼 가지는 menu 설정 -->
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                    <li>menu4</li>
                </ul>
            </div>
            <!-- 12칸 중 2칸 -->

            <div id="content" class="col-md-8">
                
                <div class="row">
                    <div class="col-md-6">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla condimentum
                            augue, ut blandit arcu egestas in. Fusce id gravida sem. In eros erat, sodales at lorem eu,
                            lacinia placerat dolor. Vestibulum fermentum lobortis mauris, et tristique lectus maximus
                            id. Duis et magna ac erat sagittis molestie a eu diam. Fusce sed dolor id leo vestibulum
                            ornare. Proin a purus quis sem semper blandit ut pellentesque lectus. Fusce congue ultricies
                            lacinia.
                        </p>
                    </div>
                    <div class="con-md-6">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla condimentum
                            augue, ut blandit arcu egestas in. Fusce id gravida sem. In eros erat, sodales at lorem eu,
                            lacinia placerat dolor. Vestibulum fermentum lobortis mauris, et tristique lectus maximus
                            id. Duis et magna ac erat sagittis molestie a eu diam. Fusce sed dolor id leo vestibulum
                            ornare. Proin a purus quis sem semper blandit ut pellentesque lectus. Fusce congue ultricies
                            lacinia.
                        </p>
                    </div>
                    <!-- 12칸중 8칸의 박스에서 6칸씩 분할 -->
                </div>
            </div>
            <!-- 12칸 중 8칸 -->

            <div id="banner" class="col-md-2">
                기타 부가자리 배너

            </div>
            <!-- 12칸 중 2칸 -->
        </div>

        <hr>

        <footer>
            하단 footer section.
        </footer>
    </div>

</body>

</html>

Table

  • Table

    • Bootstrap에서 미리 지정해준 스타일을 적용하여 테이블 구성 가능

      <!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>Table</title>

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

</head>
<body>
    
    <div class="container">

        <h4 class="text-primary">
            기본 table 코드 
            <!-- bootstrp의 기본 텍스트 스타일 -->
        </h4>

        <table class="table table-hover table-bordered table-condensed">
            <!-- 클래스를 적음으로 테이블을 만들어주고 테이블에 커서가 있으면 표시해주고 테이블에 선을 작성 
                 Bootstrap에서 미리 만들어 놓은 스타일임 -->
            <thead>
                <tr class="info"> 
                    <th>번호</th>
                    <th>제목</th>
                    <th>글쓴이</th>
                </tr>
            </thead>

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

    • Modal을 클릭하여 새로운 창을 열 수 있도록 하는 기능

    • Modal을 연결할 부분의 id와 Modal의 data-toggle의 이름을 일치시켜야 연동 가능

      <!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>Modal</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#testModal">
        모달창 열기
    </button>
    <!-- 모달창 열기를 클릭하면 새롭게 나오는 창
         즉, 모달창열기에서 data-target에서 지정한 id selector와 div의 id selector를 연결  -->
    <!-- 버튼과 모달은 id로 연결 -->
    <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">새창을 끌게요~</button>
                    <button type="button" class="btn btn-primary">바뀐 부분을 저장할게요~</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>
profile
Let's Just Go
안녕하세요! 공부한 내용을 기록하는 공간입니다.
이전 포스트

Chap4 CSS

0개의 댓글