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

비주얼 스튜디오 코드 45_웹표준) 컨텐츠

by 조반짝 2023. 6. 23.
728x90
반응형

cont_cont 영역 column col4 편집하기

css 편집하기

마우스오버 효과 주기

span에 display:block하고 overflow:hidden을 해야 em이 안보인다.

strong태그 가운데 정렬하기

.hover2 편집하기

.hover4 css 편집하기

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
    <meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
    <meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
    <meta name="generator" content="Visual Studio Code(작성도구)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준_header-contents</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/slick.css">
    <link rel="stylesheet" href="./css/style.css">


    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 스킵 네비게이션 -->
    <div id="skip">
        <a href="#cont_nav">전체 메뉴 바로가기</a>
        <a href="#cont_ban">배너 영역 바로가기</a>
        <a href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>

    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header">
                    <div class="header_menu">
                        <a href="#">로그인 가입</a>
                        <a href="#">CONTACT US</a>
                        <a href="#">ENGLISH</a>
                    </div>
                    <div class="header_tit mt50">
                        <h1>하이미디어 구로캠퍼스</h1><br>
                        <a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
                    </div>
                    <div class="header_icon mt30">
                        <a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
                        <a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
                        <a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
                        <a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
                    </div>
                </div>
            </div>
        </div>
        <section id="contents">
            <article id="cont_nav"> <!--cont_nav-->
            <div class="container">
                <h2 class="ir_su">전체메뉴</h2>
                <div class="nav clearfix">
                    <div>
                        <h3 class="h3">HTML5</h3>
                        <ol class="clearfix">
                            <li><a href="#">html1</a></li>
                            <li><a href="#">html2</a></li>
                            <li><a href="#">html3</a></li>
                            <li><a href="#">html4</a></li>
                            <li><a href="#">html5</a></li>
                            <li><a href="#">html6</a></li>
                            <li><a href="#">html7</a></li>
                            <li><a href="#">html8</a></li>
                            <li><a href="#">html9</a></li>
                            <li><a href="#">html10</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">CSS3</h3>
                        <ol class="clearfix">
                            <li><a href="#">css1</a></li>
                            <li><a href="#">css2</a></li>
                            <li><a href="#">css3</a></li>
                            <li><a href="#">css4</a></li>
                            <li><a href="#">css5</a></li>
                            <li><a href="#">css6</a></li>
                            <li><a href="#">css7</a></li>
                            <li><a href="#">css8</a></li>
                            <li><a href="#">css9</a></li>
                            <li><a href="#">css10</a></li>
                            <li><a href="#">css11</a></li>
                            <li><a href="#">css12</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">웹표준</h3>
                        <ol class="clearfix">
                            <li><a href="#">웹표준1</a></li>
                            <li><a href="#">웹표준2</a></li>
                            <li><a href="#">웹표준3</a></li>
                            <li><a href="#">웹표준4</a></li>
                            <li><a href="#">웹표준5</a></li>
                            <li><a href="#">웹표준6</a></li>
                            <li><a href="#">웹표준7</a></li>
                            <li><a href="#">웹표준8</a></li>
                        </ol>
                    </div>
                </div>
            </div>
            </article>
            <article id="cont_tit"> <!--cont_tit-->
            <div class="container">
                <div class="tit">
                    <h2> &ldquo; 프론트 엔드는 너무 쉬워서 금방 끝난다.&rdquo; </h2>
                    <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                </div>
            </div>
            </article>
            <article id="cont_ban"> <!--cont_ban-->
            <div class="container">
                <div class="ban">
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                </div>
            </article>
            <article id="cont_cont">  <!--cont_cont-->
            <div class="container">
                <div class="cont">
                    <div class="column col1">
                        <h3>
                            <span class="icon_img ir_pm">아이콘1</span>
                            <em class="icon_tit">Notice1</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        <div class="notice1 noti">
                            <h4>공지사항1</h4>
                            <ul>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                            </ul>
                            <a href="#" class="more ir_pm">더보기</a>
                        </div>
                        <div class="notice2 noti">
                            <h4>공지사항2</h4>
                            <ul>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                            </ul>
                            <a href="#" class="more ir_pm">더보기</a>
                        </div>
                    </div><!--col1-->
                    <div class="column col2">
                        <h3>
                            <span class="icon_img ir_pm">아이콘2</span>
                            <em class="icon_tit">Notice2</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                    </div><!--col2-->
                    <div class="column col3">
                        <h3>
                            <span class="icon_img ir_pm">아이콘3</span>
                            <em class="icon_tit">Notice3</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                    </div><!--col3-->
                    <div class="column col4">
                        <h3>
                            <span class="icon_img ir_pm">아이콘4</span>
                            <em class="icon_tit">Notice4</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        <div class="hover1">
                            <h4 class="h4">Mouse Hover1</h4>
                            <ul class="clearfix">
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover1.png" alt="풀">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>풀</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover2.png" alt="커피잔">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>커피잔</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover3.png" alt="바다">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>바다</strong>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="hover2">
                            <h4 class="ir_su">Mouse Hover2</h4>
                            <ul class="clearfix">
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover4.png" alt="반원">
                                            <em>바로가기</em>    
                                        </span>
                                        <strong>반원</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover5.png" alt="책상">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>책상</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover6.png" alt="식물">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>식물</strong>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div><!--col4-->
                    <div class="column col5">
                        <h3>
                            <span class="icon_img ir_pm">아이콘5</span>
                            <em class="icon_tit">Notice5</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                    </div><!--col5-->
                    <div class="column col6">
                        <h3>
                            <span class="icon_img ir_pm">아이콘6</span>
                            <em class="icon_tit">Notice6</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                    </div><!--col6-->
                </div>
            </div>
            </article>
        </section>
        <div id="footer">
            <div class="container"></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./js/slick.js"></script>

    <script>
        // 배너이미지(슬릭)
        $('.ban').slick({
        infinite: true, //무한반복
        slidesToShow: 3, //한번에 보여주는 이미지 갯수
        slidesToScroll: 1, //버튼을 눌렀을 때 넘어가는 이미지 갯수
        autoplay: true, //자동이로 이미지 이동
        autoplaySpeed: 3000, //3초마다 자동으로 이미지 이동
        dots: true, //닷버튼 생성
        });


        $(".tit .btn").click(function(){
            // $(".nav").show();
            // $(".nav").fadeIn(500);
            // $(".nav").slideDown(500);
            // $(".nav").css("display","block"); // block은 보여주는 기능도 있다.
            // $(".nav").toggle();
            $(".nav").slideToggle();

            $(this).toggleClass("on");

        });
    </script>

</body>
</html>

<css>

@charset "utf-8";

#wrap{
    width: 100%;
}

#header{
    width: 100%;
    height: 325px;
    /* 헤더 이미지 높이 고려 */
    background: url(../image/header_bg.jpg) no-repeat top center;
    /* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}

#contents{}
#cont_nav{
    width: 100%;
    /* height: 200px; */
    /* background-color: lightcoral; */
}
#cont_tit{
    width: 100%;
    /* height: 200px; */
    background-color: lightcyan;
}
#cont_ban{
    width: 100%;
    /* height: 200px; */
    /* background-color: lightgray; */
}
#cont_cont{
    width: 100%;
    /* height: 200px;
    background-color: lightgreen; */
}

#footer{
    width: 100%;
    height: 220px;
    background-color: lightseagreen;
}

/* container */
.container{
    width: 990px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(255,255,255,0.3);
}

/* skip */
#skip{
    /* 기준점 잡아주기 */
    position: relative;
}
#skip a{
    position: absolute;
    width: 140px;
    background-color: #333;
    color: #fff;
    height: 30px;
    text-align: center;
    line-height: 30px;
    /* 탭 위치 설정 */
    left:0;
    top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
    top: 0;
}

/* header */
.header{    
    /* height: 325px; */
}

.header .header_menu{
    /* background-color: aqua; */
    /* 메뉴 오른쪽으로 정렬하기 */
    text-align: right;
}
.header .header_menu a{
    color: #fff;
    /* top,left,bottom 여백주기 */
    padding: 10px 0 10px 20px; 
    /* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
    display: inline-block;
    /* 마우스 오버 속도 넣기 */
    transition: all 0.5s;
}

.header .header_menu a:hover{
    /* 마우스 오버시 글자색 바뀔수 있도록 한다. */
    color: #333;
}

.header .header_tit{
    /* background-color: red; */
    text-align: center;

}
.header .header_tit h1{
    color: #fff;
    background-color: #4aa8d4;
    font-size: 28px;
    /* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
    display: inline-block;
    padding: 5px 20px;
    transition: all 0.5s;
    text-shadow: 0 2px 2px darkblue;
    
}

.header .header_tit h1:hover{
    background-color: darkblue;
    cursor: pointer;
}

.header .header_tit a{
    font-size: 18px;
    background-color: #2698cb;
    display: inline-block;
    /* 위아래 박스 여백이 없어짐 */
    padding: 5px 20px;
    color: #fff;
    /* 위아래 박스 겹쳐지게하기 */
    margin-top: -7px;
}

.header .header_icon{
    text-align: center;
}
.header .header_icon a{
    width: 60px;
    height: 60px;
    background-color: #333;
    /* 인라인 구조이기 때문에 display: inline-block 적용*/
    display: inline-block;
    /* 양옆 여백주기 */
    margin: 0 5px;

    /* 아이콘 이미지 넣어주기 */
    background: url(../image/icon.png);
}

.header .header_icon a.icon1{
    background-position: 0px 0px;
    /* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다.  */
}
.header .header_icon a.icon2{
    background-position: 0px -60px;
}
.header .header_icon a.icon3{
    background-position: 0px -120px;
}
.header .header_icon a.icon4{
    background-position: 0px -180px;
}

.header .header_icon a.icon1:hover{
    background-position: -60px 0px;
}

.header .header_icon a.icon2:hover{
    background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
    background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
    background-position: -60px -180px;
}

.header .header_icon a span{
    font-size: 0;
    /* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}

/* nav */

.nav{
    padding: 30px 0;
    /* background-color: #4aa8d4; */
    display: none;
}
.nav > div{
    float: left;
    width: 40%;
    /* 전체너비의 40%사용 */
}

.nav > div:nth-of-type(3){
    width: 20%;
    /* 마지막 div 전체너비의 20%사용 */
}

/* .nav > div > h3{
    font-size: 18px;
    font-weight: bold;
    color: #25a2d0;
    하단 여백 띄워주기
    margin-bottom: 4px;
} */

.nav > div > ol{}
.nav > div > ol > li{
    width: 50%;
    float: left;
}

.nav > div:nth-of-type(3) li{
    width: 100%;
}

.nav > div > ol > li > a{}

.nav > div > ol > li > a:hover{
    text-decoration: underline;
}

/* .tit */
.tit{
    position: relative;
}
.tit h2{
    font-size: 40px;
    /* 아이콘 사이여백 넣기 위해 10px 추가 */
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
    width: 60px;
    height: 60px;
    background: url(../image/icon.png) 0px -600px;
    display: block;
    position: absolute;
    right: 0;
    top: 5px;
}

.tit a.btn:hover{
    background-position: -60px -600px;
}

.tit a.btn.on{
    background-position: 0px -660px;
}

.tit a.btn.on:hover{
    background-position: -60px -660px;
}

/* ban */
.ban{
    padding: 30px 0px 30px 20px;
    position: relative;
}
.slick-prev{
    /* 이전아이콘 위치잡아주기 */
    position: absolute;
    top: 65px;
    left: -80px;
    /* 아이콘이미지 불러오기 */
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px 0;
    /* 글씨없애주기 */
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}

.slick-prev:hover{
    background-position: -193px 0;
    cursor: pointer;
}

.slick-next{
    position: absolute;
    top: 65px;
    right: -80px;
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px -43px;
    font-size: 0;
    line-height: 0;
    text-indent: 99999px;
}

.slick-next:hover{
    background-position: -193px -43px;
    cursor: pointer;
}

.ban img{
    /* border: 4px solid #dcdcdc; */
    border: 4px solid transparent;
    /* 마우스오버시 이미지크기가 변경되지 않도록 고정하는 역할 */
}

.ban img:hover{
    border: 4px solid red;
}

.ban .slick-dots{
    /* background-color: #2698cb; */
    text-align: center;
    /* 위치 잡아주기 위해 포지션을 띄움 */
    position: absolute;
    bottom: 0px;
    /* position을 띄우면서 너비값을 잃음 다시 너비값 넣어줌 */
    width: 100%;
    margin-left: -22px;
}

.ban .slick-dots li{
    /* 위치 잡아주기 */
    display: inline-block;
    margin: 10px;
}
.ban .slick-dots li button{
    /* 닷 만들어주기 */
    width: 15px;
    height: 15px;
    background-color: aqua;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}

.ban .slick-dots li.slick-active button{
    background-color: #2698cb;
}
 

/* cont */
.cont{
    /* 위쪽 여백주기 */
    padding-top: 30px;
    overflow: hidden;
}

/* 여섯개의 박스를 동시에 편집할 수 있음 */
.cont .column{
    width: 289px;
    height: 363px;
    /* border 오른쪽 선 넣어주기 */
    border-right: 1px solid #2698cb;
    /* 박스 안쪽여백 */
    padding-right: 30px;
    /* 박스 바깥 쪽 여백 */
    margin: 0 30px 30px 0;
    /* 박스 옆으로 나열 */
    float: left;    
    /* 아이콘의 기준점 */
    position: relative;
}
/* 행의 마지막 박스는 border, padding=right, margin-right 삭제해야 위로 올라가 배치됨 */
.cont .col1{}
.cont .col2{}
.cont .col3{
    border: 0;
    margin-right: 0;
    padding-right: 0;
}
.cont .col4{}
.cont .col5{}
.cont .col6{
    border: 0;
    margin-right: 0;
    padding-right: 0;
}

.cont .column .icon_img{
    /* span 태그이기 때문에 넓이값 가지기 위해 block구조로 변경 */
    display: block;
    width: 60px;
    height: 60px;
    /* 배경을 복합적으로 사용할 때 background 사용 */
    background: url(../image/icon.png);
    /* 아이콘 배치 */
    position: absolute;
    top:0;
    left: 0;
}

/* 아이콘 이미지를 각 각 변경하기 위해 col1 -6 을 따로 편집 */
.cont .col1 .icon_img{background-position: 0px -240px;}
.cont .col2 .icon_img{background-position: 0px -300px;}
.cont .col3 .icon_img{background-position: 0px -360px;}
.cont .col4 .icon_img{background-position: 0px -420px;}
.cont .col5 .icon_img{background-position: 0px -480px;}
.cont .col6 .icon_img{background-position: 0px -540px;}

/* 마우스 오버시 아이콘 변경되게하기 */
.cont .col1 .icon_img:hover{background-position: -60px -240px;}
.cont .col2 .icon_img:hover{background-position: -60px -300px;}
.cont .col3 .icon_img:hover{background-position: -60px -360px;}
.cont .col4 .icon_img:hover{background-position: -60px -420px;}
.cont .col5 .icon_img:hover{background-position: -60px -480px;}
.cont .col6 .icon_img:hover{background-position: -60px -540px;}


.cont .column .icon_tit{
    font-size: 18px;
    color: #2698cb;
    /* 타이틀 위치배치 */
    padding-left: 70px;
    /* padding 과 margin의 차이점  */
    font-weight: bold;
}
.cont .column .icon_desc{
    /* 설명 위치배치 */
    padding-left: 70px;
    /* 아랫선 배치 */
    border-bottom: 1px solid #2698cb;
    /* 선 위아래 여백 */
    padding-bottom: 15px; /*선 위 여백*/
    margin-bottom: 15px; /*선 아래 여백*/
}

.cont .col1 .noti{
    /* a.more의 기준점 */
    position: relative;
}

.cont .col1 .noti a.more{
    display: block;
    width: 17px;
    height: 17px;
    background: url(../image/icon.png) -150px -90px;
    /* 아이콘 배치하기 */
    position: absolute;
    right: 0;
    top: 0;
}
.cont .col1 .notice1{}
.cont .col1 .notice1 ul{}
.cont .col1 .notice1 ul li{
    position: relative;
}
.cont .col1 .noti ul li::before{
    position: absolute;
    content: "";
    width: 2px;
    height: 9px;
    background-color: #aaa;
    left: 5px;
    top: 5px;
    border-radius: 5px;
}
.cont .col1 .notice1 ul li a{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 10px;
    po
}

.cont .col1 .notice2{
    margin-top: 15px;
}
.cont .col1 .notice2 ul{}
.cont .col1 .notice2 ul li{
    overflow: hidden;
    position: relative;
}


.cont .col1 .notice2 ul li a{
    display: block;
    width: 65%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
    /* box-sizing 이 있어야 글자가 밀리지 않음 */
    box-sizing: border-box;
}
.cont .col1 .notice2 ul li span{
    display: block;
    width: 30%;
    float: right;
}

/* col4 */
.col4{}
.col4 .hover1{}
.col4 .hover1 h4{}
.col4 .hover1 ul{
    /* overflow: hidden을 사용하면 93px 이상으로 잘라버린다. >> clearfix사용해서 하는 방법이 좋다.*/
    /* overflow: hidden; */
}
.col4 .hover1 ul li{

    /* strong이 보일 수 있도록 높이값을 높인다. */

    /* 위치잡아주기 */
    float: left;
    margin-right: 5px;
    /* em의 기준점 */
    position: relative;
}
.col4 .hover1 ul li:nth-of-type(3){
    margin-right: 0;
}

.col4 .hover1 ul li a{}
.col4 .hover1 ul li a span{
    position: relative;
    width: 93px;
    height: 93px;
    overflow: hidden;
    display: block;    
}
.col4 .hover1 ul li a span img{
    /* 사이즈 100%로 맞춰줘야 비율이 맞게 나온다. */
    width: 100%;
}
.col4 .hover1 ul li a span em{
    display: block;
    width: 93px;
    height: 93px;
    background-color: rgba(0,255,255,0.3);
    text-align: center;
    line-height: 93px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}
.col4 .hover1 ul li:hover a span em{
    top: 100px;
    
}

.col4 .hover1 ul li a strong{
    /* strong 가운데정렬하기 */
    display: block;
    width: 100%;
    text-align: center;
    
}

.col4 .hover2{
    margin-top: 15px;
}
.col4 .hover2 ul{}
.col4 .hover2 ul li{
    float: left;
    margin-right: 5px;
    
}
.col4 .hover2 ul li:nth-of-type(3){
    margin-right: 0;
}
.col4 .hover2 ul li a{}
.col4 .hover2 ul li a strong{
    text-align: center;
    display: block;
}
.col4 .hover2 ul li a span{
    display: block;
    overflow: hidden;
    position: relative;
    width: 93px;
    height: 93px;   
}
.col4 .hover2 ul li a span img{
    width: 100%;
}
.col4 .hover2 ul li a span em{
    background-color: rgba(0,255,255,0.3);
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 50px;
    bottom: -50px;
    left: 0;
    color: #fff;
    transition: all 0.5s;
    width: 93px;
    height: 50px;
}
.col4 .hover2 ul li a span:hover em{
    bottom: 0;
}
728x90
반응형
저작자표시 비영리 변경금지

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

[JAVASCRIPT] 4. 마우스 오버 효과  (0) 2023.06.23
비주얼 스튜디오 코드 46_ flex  (0) 2023.06.23
[JAVASCRIPT] 자바스크립트 이벤트 연결하기  (0) 2023.06.22
비주얼 스튜디오 코드 43_웹 표준) 컨텐츠  (0) 2023.06.22
비주얼 스튜디오 코드 42_ 지도 넣기  (0) 2023.06.22

관련글

티스토리툴바