비주얼 스튜디오 코드 23_ 마우스오버 효과②

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 23_ 마우스오버 효과②

조반짝 2023. 6. 12. 11:24

728x90

wrap으로 내용을 감싸주는 영역 넣어주기

h3부터 쓴 이유

h3인 이유는 태그 순서에 따라 figcaption 3번째이기 때문에 h3 웹표준에 따르는 것이 좋음

● 블럭구조: h태그, p태그

● vh : ex) height: 100vh - 높이값을 가로로 100개를 나눠서 100개를 사용하겠다.

● letter-spacing: 글자 자간

[이미지사이즈]

이미지 사이즈 설정 시에 이미지 width : 100% 로 설정해주는 것이 좋음

이미지 사이즈 수정 시 이미지의 부모 태그 사이즈만 수정하면 된다.

부모의 사이즈가 수정되면 이미지 사이즈도 자동으로 변경된다.

●position 을 넣어주면 너비값을 잃기 때문에 너비값을 넣어줘야함

가상요소 넣어주기(플러스 마우스오버효과)

● 한 태그에 가상요소를 최대 2개까지 생성 가능(before,after)

가상요소로 세로선 만들어주기

세로선이 움직여야하기 때문에 ho1(부모태그)에 기준점을 두고 (position:relative;) 가상요소에 position: absolute 설정

transform: translate로 세로선이 사진의 테두리의 정중앙에 위치하도록 이동시켜줌

h1에 마우스 오버시 마우스 효과를 줘야하기 때문에 ho1:hover 를 준다.

transition으로 선이 움직이는 속도 조정 해주면 움직인다.

가로선 만들어주기

가로선도 마찬가지로 움직여야하기 때문에 ho1(부모태그)에 기준점을 두고 (position:relative;) 가상요소에 position: absolute 설정

가상요소와 마우스오버 가상요소에 opacity명령도 추가해줘야한다.

그림 배경 색 마우승오버 시 변경되게 하기

ho1에 배경색 깔아주기

#wrap ho1:hover img{} 로 ho1 마우스 오버시 opacity 값 추가 해주고 img 에 transition 속도값을 넣어주어 서서히 배경색이 나타나도록 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스오버효과2</title>
    <link rel="stylesheet" href="./css/style.css">
    <!-- 링크걸어도 안될 때는 지우고 다시 링크걸어주기 -->
</head>
<body>
    <div id="wrap">
        <figure class="ho1">
            <img src="./images/img1.png" alt="음식이미지">
            <figcaption>
                <h3>마우스오버효과</h3>
                <!-- h3인 이유는 태그 순서에 따라 figcaption 3번째이기 때문에 h3 웹표준에 따르는 것이 좋음 -->
                <p>가상요소를 이용한 중심점잡기(top, right)</p>
            </figcaption>
        </figure>
        <figure class="ho2"></figure>
    </div>
</body>
</html>

@charset "utf-8";

@font-face {
    font-family: 'TTTogether';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'TTTogether';
    letter-spacing: 1px;
    /* 글자 자간 */
    color: #fff;
}

li{
    list-style: none;
}

img{
    display: block;
}

.clearfix::after,
.clearfix::before{
    content: "";
    /* 가상요소에 반드시 들어가야함 */
    display: block;
    clear: both;
}

body{
    height: 100vh;
    /* 높이값을 가로를 100개로 나눠서 100개를 사용하겠다. */
    background-color: #0f2027;
    background: linear-gradient(to right, #2c5364, #203a43, #0f2027);

}

#wrap{
    height: 100vh;
    display: flex;  /*자식요소를 가로로 정렬해 주는 명령어*/
    align-items: center; /*자식요소를 세로의 중간에 넣어주는 명령어*/
    justify-content: center; /*자식요소를 가로의 중간에 넣어주는 명령어*/
}

#wrap .ho1{
    width: 400px;
    margin: 20px;
    position: relative;
    background-color: red;
    border-radius: 5px;
}
#wrap .ho1::before{
    content: "";
    position: absolute;
    top: 0;
    /* 위에서 아래로 움직이게 하려면 top에서 조정해야함 */
    left: 50%;
    width: 2px;
    height: 30px;
    background-color: #fff;
    transform: translate(-50%,-50%);
    transition: all 0.5s;
    opacity: 0;
}
#wrap .ho1:hover::before{
    top: 50%;
    opacity: 1;
}
#wrap .ho1::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transform: translate(50%,-50%);
    transition: all 0.5s;
    opacity: 0;
}
/* 한 태그에 가상요소를 최대 2개까지 생성가능(before,after) */

#wrap .ho1:hover::after{
    right: 50%;
    opacity: 1;
}

#wrap .ho1 img{
    width: 100%;
    /* 이미지사이즈를 100% 맞춰서 넣어줘야한다. 수정할 시 부모(ho1)만 사이즈만 수정하면 됨, 부모의 사이즈가 수정되면 이미지사이즈도 자동으로 변경됨*/
    border-radius: 5px;
    transition: all 0.5s;
}

#wrap .ho1:hover img{
    opacity: 0.5;
}
#wrap .ho1 figcaption{
    background-color: rgba(255,255,255,0.5);
    padding: 20px; /*안쪽 여백*/
    position: absolute;
    /* 포지션을 넣어주면 너비값을 잃게 된다. */
    width: 100%;
    left: 0;
    bottom: 0;
}
#wrap .ho1 figcaption h3{
    color: #0f2027;
}
#wrap .ho1 figcaption p{
    color: #0f2027;
}

마우스효과 2

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스오버효과2</title>
    <link rel="stylesheet" href="./css/style.css">
    <!-- 링크걸어도 안될 때는 지우고 다시 링크걸어주기 -->
</head>
<body>
    <div id="wrap">
        <figure class="ho1">
            <img src="./images/img1.png" alt="음식이미지">
            <figcaption>
                <h3>마우스오버효과</h3>
                <!-- h3인 이유는 태그 순서에 따라 figcaption 3번째이기 때문에 h3 웹표준에 따르는 것이 좋음 -->
                <p>가상요소를 이용한 중심점잡기(top, right)</p>
            </figcaption>
        </figure>
        <figure class="ho2">
            <img src="./images/img2.png" alt="음식이미지2">
            <figcaption>
                <h4>마우스오버효과2</h4>
                <p>가상요소를 이용한 중심점잡기(bottom, left)</p>
            </figcaption>
        </figure>
    </div>
</body>
</html>

css

@charset "utf-8";

@font-face {
    font-family: 'TTTogether';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'TTTogether';
    letter-spacing: 1px;
    /* 글자 자간 */
    color: #fff;
}

li{
    list-style: none;
}

img{
    display: block;
}

.clearfix::after,
.clearfix::before{
    content: "";
    /* 가상요소에 반드시 들어가야함 */
    display: block;
    clear: both;
}

body{
    height: 100vh;
    /* 높이값을 가로를 100개로 나눠서 100개를 사용하겠다. */
    background-color: #0f2027;
    background: linear-gradient(to right, #2c5364, #203a43, #0f2027);

}

#wrap{
    height: 100vh;
    display: flex;  /*자식요소를 가로로 정렬해 주는 명령어*/
    align-items: center; /*자식요소를 세로의 중간에 넣어주는 명령어*/
    justify-content: center; /*자식요소를 가로의 중간에 넣어주는 명령어*/
}

#wrap .ho1{
    width: 400px;
    margin: 20px;
    position: relative;
    background-color: red;
    border-radius: 5px;
}
#wrap .ho1::before{
    content: "";
    position: absolute;
    top: 0;
    /* 위에서 아래로 움직이게 하려면 top에서 조정해야함 */
    left: 50%;
    width: 2px;
    height: 30px;
    background-color: #fff;
    transform: translate(-50%,-50%);
    transition: all 0.5s;
    opacity: 0;
}
#wrap .ho1:hover::before{
    top: 50%;
    opacity: 1;
}
#wrap .ho1::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transform: translate(50%,-50%);
    transition: all 0.5s;
    opacity: 0;
}
/* 한 태그에 가상요소를 최대 2개까지 생성가능(before,after) */

#wrap .ho1:hover::after{
    right: 50%;
    opacity: 1;
}

#wrap .ho1 img{
    width: 100%;
    /* 이미지사이즈를 100% 맞춰서 넣어줘야한다. 수정할 시 부모(ho1)만 사이즈만 수정하면 됨, 부모의 사이즈가 수정되면 이미지사이즈도 자동으로 변경됨*/
    border-radius: 5px;
    transition: all 0.5s;
}

#wrap .ho1:hover img{
    opacity: 0.5;
}
#wrap .ho1 figcaption{
    background-color: rgba(255,255,255,0.5);
    padding: 20px; /*안쪽 여백*/
    position: absolute;
    /* 포지션을 넣어주면 너비값을 잃게 된다. */
    width: 100%;
    left: 0;
    bottom: 0;
}
#wrap .ho1 figcaption h3{
    color: #0f2027;
}
#wrap .ho1 figcaption p{
    color: #0f2027;
}

#wrap .ho2{
    width: 400px;
    margin: 20px;
    position: relative;
    background-color: blue;
    border-radius: 5px;
}

#wrap .ho2::before{
    content: "";
    width: 2px;
    height: 30px;
    background-color: #fff;
    bottom: 0%;
    right: 50%;
    position: absolute;
    transform: translate(50%,50%);
    transition: all 0.5s;
    opacity: 0;
    
}

#wrap .ho2:hover::before{
    bottom: 50%;
    opacity: 1;
}

#wrap .ho2::after{
    content: "";
    width: 30px;
    height: 2px;
    background-color: #fff;
    top: 50%;
    left: 0;
    position: absolute;
    transform: translate(-50%,50%);
    transition: all 0.5s;
    opacity: 0;
}

#wrap .ho2:hover::after{
    left: 50%;
    opacity: 1;
}


#wrap .ho2 img{
    width: 100%;
    border-radius: 5px; 
    transition: all 0.5s;       
}

#wrap .ho2:hover img{
      opacity: 0.5;
}

#wrap .ho2 figcaption{
    background-color: rgba(255,255,255,0.5);
    padding: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 포지션 띄워서 너비값을 잃기 때문에 꼭 다시 width값 넣어줘야함!! */
}
#wrap .ho2 figcaption h4{
    color: #203a43;
    font-size: 17px;
}
#wrap .ho2 figcaption p{
    color: #203a43;
    font-size: 14px;
}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 25_ 탭 메뉴 ② (1)	2023.06.12
비주얼 스튜디오 코드 24_ 마우스오버 효과③ (2)	2023.06.12
비주얼 스튜디오 코드 22_ 탭 메뉴 (0)	2023.06.09
비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기 (0)	2023.06.09
비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer (0)	2023.06.09

현재글비주얼 스튜디오 코드 23_ 마우스오버 효과②

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

position, HTML, 웹디자인, 자바스크립트, SQL, 비주얼스튜디오코드, 프론트엔드, 코딩테스트, Java, ACTIVE, JavaScript, if문, media, 자바, offset, 이클립스, For문, float, Parallax, CSS,

Today :
Yesterday :

조반짝의 도전일지