2022/5/12

jungkwanlee·2022년 5월 18일

코딩일지

목록 보기

37/108

1) 학습한 내용

:hover

hover는 html에서 요소에 마우스를 올렸을 때 반응하게 하는 css요소이다.

Example of hover

위와 같은 코드를 작성할 때, id는 클래스와 다르게 #으로 작성한다. 참고로 클래스는 '.'을 먼저 작성한다. 그리고, hover는 마우스를 갖다 댈 때, 크기가 커졌다가 다시 글자에서 떼내면 다시 작아지는 것은 transition 뒤에 폰트 사이즈를 3초로 작성했기 때문이다.

이미지 움직이기

        .movex:hover{
            -webkit-transform: translatex(50px);
            -ms-transform: translatex(50px);
            -moz-transform: translatex(50px);
            -o-transform: translatex(50px);
            transform: translatex(50px);
        }
        .movey:hover{transform: translateY(50px);}
        .movexy:hover{transform:translate(10px, 20px);}
        /* 이미지 확대, 축소 */
        .scalex:hover{transform: scalex(1.5);}
        .scaley:hover{transform: scaley(1.5);}
        .scalexy:hover{transform: scale(0.5,0.5);}
        /*기울임 - 각도*/
        .skewx:hover{transform: skewx(40deg);}
        .skewy:hover{transform: skewy(20deg);}
        .skewxy:hover{transform: skew(0deg, -30deg);}
        /*회전*/
        .rot:hover{transform: rotate(90deg);}
        /*3차원*/
        .rotx:hover{transform: rotatex(45deg);}
        .roty:hover{transform: rotatey(45deg);}
        .rotz:hover{transform: rotatez(45deg);}
        .rotxyz:hover{transform: rotate3d(2.5, 1.2,-1.5, 45deg);}

위의 코드는 이미지를 움직일 때, 사용되는 CSS의 코드로 움직임에는 move를 쓰고 이미지를 확대/축소 시킬 시에는 scale을 쓴다. 이미지 기울기를 정하는 것에 skew를 사용하며, 3차원을 사용할때는 rot를 사용한다.

테이블을 작성하는 공식

    <table>
        <caption>1학기 성적</caption>
        <thead>
            <tr>
                <th>이름</th>
                <th>HTML</th>
                <th>CSS</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>황ㅇㅇ</td>
                <td>80</td>
                <td>70</td>
            </tr>
            <tr>
                <td>이ㅇㅇ</td>
                <td>90</td>
                <td>89</td>
            </tr>
            <tr>
                <td>안ㅇㅇ</td>
                <td>78</td>
                <td>89</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>합계</th>
                <th>300</th>
                <th>270</th>
            </tr>
        </tfoot>
    </table>

table을 작성하는 방식은 위의 코드와 같은 방식으로 작성하면 된다. caption은 소제목 역할을 하기에 thead위에 작성을 하고 thead는 테이블의 머릿말 역할을 하며 tbody는 중간에 위치하며 tfoot은 마지막에 주로 작성된다. 머릿 말에는 thead 다음에 tr -> th순으로 작성된다면, tbody와 tfoot은 tr -> td 순으로 작성된다.

Box에 그림자 추가하기

    <style>
        div{width: 600px; height: 250px;
            background: url('./images/book.png') no-repeat;
            border: solid 1px #ccc;}
        #example1{box-shadow: 5px 10px;}
        #example2{box-shadow: 5px 10px #888;}
        #example3{box-shadow: 5px 10px 10px skyblue;}
        #example4{box-shadow: 2px 2px 2px black,
                                0   0   25px blue,
                                0 0 5px darkblue;}
        #example5{box-shadow: 5px 5px 5px 5px gray inset;}
    </style>
</head>
<body>
    <div id="example1"></div>
    <br><br>
    <div id="example2"></div>
    <br><br>
    <div id="example3"></div>
    <br><br>
    <div id="example4"></div>
    <br><br>
    <div id="example5"></div>
    <br><br>
</body>

CSS에서 그림자 효과를 추가할 때, 작성했던 코드로 코드로 작성된 것을 토대로 각 div 태그가 있는 박스에다가 적용 시켰을 때,
example1에는 오른쪽으로 5px, 아래쪽으로 10px정도의 그림자를 추가시켰다.
example2에서는 색을 추가해서 회색을 추가해서 그림자의 색을 지정할 수가 있다.
example3에서는 5px 10px 뒤에 10px를 추가시켰는데, 10px는 블러할 크기를 지정하는 것으로 skyblue는 그림자 색을 지정하는 것을 나타낸다.
example4를 통해서 여러개의 그림자를 중복시켜서 표현할 수가 있다. 이걸 토대로 현실적인 그림자 효과를 만들어 볼 수도 있다. 다만, 이럴 경우 코드가 길어질 수가 있다.
example5는 inset가 추가되었는데 이 효과는 그림자 위에 있는 것이 아니라 움푹 파여있다는 시각적 효과를 제공한다.