HTML&CSS 실습8 (정리x)

728x90

<!DOCTYPE html>
<html lang="ko">
<link rel="stylesheet" href="240320_헤더.css">

<head>
    <meta charset="UTF-8">
    <title>헤더만들기 연습</title>
    <script src="https://kit.fontawesome.com/265655aec0.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <svg xmlns='http://www.w3.org/2000/svg' width='100' height='32.939' viewBox='0 0 100 32.939'><g id='Logo' transform='translate(-88.414 -468.005)'><path id='íŒ¨ìŠ¤_1' data-name='íŒ¨ìŠ¤ 1' d='M150.8,496.543l0-24.144a4.325,4.325,0,0,1,4.316-4.394h.47a4.394,4.394,0,0,1,4.394,4.394v24.144a4.394,4.394,0,0,1-4.4,4.39h-.5a4.3,4.3,0,0,1-4.282-4.39' transform='translate(-30.302)' fill='#002053'/><path id='íŒ¨ìŠ¤_2' data-name='íŒ¨ìŠ¤ 2' d='M218.424,470.885l9.763,15.889c2.107,3.434,2.6,4.327,2.6,6.853a7.254,7.254,0,0,1-6.818,7.048H210.773a4.117,4.117,0,0,1-4.343-4.067v-.279a4.341,4.341,0,0,1,4.343-4.342l8.086,0c.509,0,.822-.069.96-.387a.855.855,0,0,0-.133-.939l-5.757-9.238c-.093-.155-.2-.367-.379-.367s-.313.212-.393.379l-8.792,15.1c-1.373,2.392-2.981,4.146-5.382,4.146H182.069a6.878,6.878,0,0,1-6.426-6.429V472.412a4.347,4.347,0,0,1,4.342-4.349h.555a4.351,4.351,0,0,1,4.348,4.349l0,17.839a1.146,1.146,0,0,0,1.185,1.179l8.4,0a3.259,3.259,0,0,0,3.131-1.818l11.306-18.729a5.462,5.462,0,0,1,4.834-2.739,5.246,5.246,0,0,1,4.682,2.739' transform='translate(-42.369 -0.028)' fill='#002053'/><path id='íŒ¨ìŠ¤_3' data-name='íŒ¨ìŠ¤ 3' d='M98.841,501.022a1.181,1.181,0,0,0-1.18,1.184l0,6.076a4.345,4.345,0,0,1-4.346,4.344h-.555a4.345,4.345,0,0,1-4.341-4.344V497.233a5.1,5.1,0,0,1,5.177-5.177h17.652a4.348,4.348,0,0,1,4.343,4.344v.281a4.343,4.343,0,0,1-4.343,4.341Z' transform='translate(-0.001 -11.682)' fill='#002053'/><path id='íŒ¨ìŠ¤_4' data-name='íŒ¨ìŠ¤ 4' d='M92.809,469.229h20.567a4.323,4.323,0,0,1,4.392,4.31v.273a4.393,4.393,0,0,1-4.392,4.4H92.809a4.4,4.4,0,0,1-4.4-4.4v-.3a4.3,4.3,0,0,1,4.4-4.279' transform='translate(0 -0.595)' fill='#002053'/></g></svg>

        <nav id="main-menu-nav">
            <ul>
                <li>WOMAN</li>
                <li>MEN</li>
                <li>KIDS</li>
                <li>BRAND</li>
            </ul>
        </nav>

        <nav>
            <ul>
                <li><i class="fa-solid fa-magnifying-glass"></i></li>
                <li><i class="fa-regular fa-map"></i></li>
                <li id="main-menu-li">
                    <i class="fa-regular fa-user"></i>
                    <div id="user-menu-div">
                        <a href="#">로그인</a>
                        <a href="#">회원가입</a>
                        <a href="#">아이디/비밀번호 찾기</a>
                        <a href="#">이벤트</a>
                    </div>
                </li>
                <li><i class="fa-solid fa-bars"></i></li>
            </ul>
        </nav>
    </header>
    <main>
        <video muted loop autoplay src="https://filacdn.styleship.com/filacontent2/data/contentsfile/mov_top_our sport_d_240229.mp4">"></video>
        <section>
            <h1>SO-HEE IN FILA'S SPRING</h1>
            <button>자세히보기</button>
            <div id="carousel-bar-container">
                <!-- 프로그래스바 같은 느낌의 bar / carousel: 움직이는 바 -->
                <!-- 가느다란 긴 선(몸체) -->
                <div id="carousel-bar-body">
                    <!-- 움직이는 굵은 통 -->
                    <div></div>
                </div>
                <!-- 화살표들 -->
                <div id="arrows-container">
                    <i class="fa-solid fa-chevron-left"></i>
                    <i class="fa-solid fa-chevron-right"></i>
                </div>
            </div>
        </section>


    </main>

</body>
</html>

@font-face { /* 웹에서 받아쓰는 웹폰트 */
    font-family: 'SUIT-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: SUIT-Regular;
}
a {
    text-decoration: none;
    color: black;
}

/*******************************/

header{
    position: fixed;
    box-sizing: border-box;
    width: 100vw;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px; /* 위아래, 양옆 */
    z-index: 99;
}
ul{
    list-style: none;
}

li {
    display: inline-block;
    padding: 10px 0;
    margin: 0 15px;
    font-size: 1rem;
    cursor: pointer;
}
#main-menu-nav li{
    border: 3px solid white;
    font-weight: bold;
}

#main-menu-nav li:hover{
    border-bottom: 2px solid black;
}

/****************************************/
#main-menu-li:hover #user-menu-div{
    display: flex;
}
#main-menu-li{
    transition-duration: 1s;
}

#user-menu-div{
    position: absolute;
    display: none;
    right: 25px;
    margin-top: 10px;
    flex-direction: column;
    width: 190px;
    box-shadow: 0 0 9px dimgray ; /* 옆, 뒤, 퍼진정도, 색상 */
    background-color: white;
    font-size: 0.92rem;
    font-weight: bold;
    padding: 20px 17px;
    border-radius: 0.7rem;
    transition-duration: 1s;
}
#user-menu-div > a{
    color: black;
    margin: 5px 0;
}
#user-menu-div > a:hover{
    color: rgba(100,100,100,0.9);
}
/****************************************/
main{
    background-color: black;
    width: 100vw;
    height: 100vh;
    display: flex;
}


video {
    width: 100%;
    object-fit: cover;
}
/****************************************/
main{
    position: relative;
}
main > section{
    position: absolute;
    bottom: 80px;
    width: 80%;
    left: 50%;
    transform: translateX(-50%); /* left만 하면 시작점 기준 50%라서 transform으로 -50% 가줘야함 !  */
    padding: 10px 10px; /* 위아래, 양옆 */
    color: white;
    /*background-color: white;*/
}
h1{
    font-size: 2.8rem;
    margin: 20px 0;
}

main > section > button {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    padding: 13px 23px;
    border: 1px solid white;
    border-radius: 1.8rem;
    background-color: unset; /* 색이 없는거 */
    margin-bottom: 25px;
    cursor: pointer;
}
main button:hover{
    color: black;
    background-color: white;
}
/****************************************/
#carousel-bar-container{
    display: flex;
    align-items: center;
}
#carousel-bar-body{
    display: flex;
    align-items: center;
    padding-right: 15px;
    height: 2px;
    background-color: rgba(0,0,0,0.3);
    flex: 1;
}
/* 움직이는 굵은 통 */
#carousel-bar-body > div{
    width: 500px;
    height: 3.5px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 4.3px;
}
/****************************************/
#arrows-container > i {
    padding: 3px 5px;
    font-size: 1.4rem;
    cursor: pointer;
}

728x90

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

'💜 HTML,CSS' 카테고리의 다른 글

HTML&CSS 실습10 (정리x) (0)	2024.03.23
HTML&CSS 실습9 (정리x) (0)	2024.03.23
HTML&CSS 25일차 (정리x) (0)	2024.03.23
HTML&CSS 24일차 (정리x) (0)	2024.03.23
HTML&CSS 23일차 (정리x) (0)	2024.03.23

'💜 HTML,CSS' 카테고리의 다른 글

티스토리툴바