본문 바로가기
카테고리 없음

웹 퍼블리셔 - 웹퍼블리싱 (Logitech 웹페이지)

리턴 투 개발 2023. 10. 6. 03:29

두번째 웹페이지 제작에 들어갔다 두번째로 만들 웹페이지는 Logitech이다. 평소에 로지텍 물건에 관심이 많았기에,

해당 웹페이지의 UI는 어떻고 어떻게 구현되는지 궁금해서 만들어보았다.

 

먼저 오늘 코드를 진행하면서 여러 코드의 반복성을 어떻게 해결 할 수 있을까? 였다.

 

마우스 over와 leave 되었을때의 스크립트를 어떻게 더 줄여서 쓸 수 있을까? 이부분과, slide 메뉴를 만들기위한 grid작업이 오늘 작업시간을 많이 차지 한 것 같다. 그래도 만족스러운 결과가 나와서 좋다.

 

먼저 html를 확인해보면

 

 {/*Header*/}
            <div className={"header"}>
                {/*Logo*/}
                <div className={"logo"}>
                    <img style={{display:"flex"}} ref={logoup}
                        onMouseOver={handleLogoOver}
                        src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/logitechg-grey.svg"} alt="로고회색"/>

                    <img style={{display:"none"}} ref={logodown}
                        onMouseLeave={handleLogoLeave}
                        src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/logitechg.svg"} alt="로고흑색"/>
                </div>

                {/*Brand*/}
                <div className={"brand"}>
                    <button onClick={handle_brandlogo_Click}>우리 브랜드 {/*화살표 아이콘*/}{arrow} </button>
                    <ul style={{display:"none"}} className="hidden_brand" ref={hidden_brand}>
                        <li onMouseOver={handle_brandlogo_Over1} onMouseLeave={handle_brandlogo_Leave1}>
                            <img width="80px"src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/streamlabs-grey.svg"} alt ="브랜드1"/>
                            <img width="80px" style={{display:"none"}} src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/streamlabs.svg"} alt ="브랜드1"/>
                        </li>
                        <li style={{paddingLeft:"15px"}}onMouseOver={handle_brandlogo_Over2} onMouseLeave={handle_brandlogo_Leave2}>
                            <img width="50px" src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/ultimate-ears-grey.svg"} alt = "브랜드2"/>
                            <img width="50px" style={{display:"none"}} src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/ultimate-ears.svg"} alt="브랜드2"/>
                        </li>
                        <li onMouseOver={handle_brandlogo_Over3} onMouseLeave={handle_brandlogo_Leave3}>
                            <img width="70px" src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/jaybird-grey.svg"} alt="브랜드3"/>
                            <img width="70px" style={{display:"none"}} src={"https://www.logitech.com/content/dam/logitech/en/nav/brand-logos/jaybird.svg"} alt="브랜드3"/>
                        </li>
                    </ul>
                </div>

                {/*language*/}
                <div className={"language"}>
                    <button>{language} 대한민국</button>
                </div>
            </div>

header부분의 메뉴바 부분을 먼저 만들었다.

메뉴바에는 두가지의 큰 이벤트 리스너가 있는데,

 

먼저 첫번째로는 로고에 마우스를 가져다놓았으때 색상이 바꿔지는 이벤트 리스너이다.

이것을 useState를 사용하여 true값과 false값으로 만들어볼려고했는데 leave부분에도 똑같이 필요성을 느낄것같아서 그냥 두가지 이벤트를 만들어주었다.

 

두가지의 이미지를 가져와서 마우스를 올렸을때에 따라서 display가 달라지는것을 사용하였다.

 

다음으로 여러 브랜드를 보여주는 곳에서 버튼태그를 만들어서 click이벤트를 만들어주었다.

click을하면 상세 정보가 보일수있도록, 이것은 useState를 사용하여서 true false로 삼항연산자를 사용하였다.

또한 상세 메뉴에 마우스를 올리면 색상이 다른 이미지가 노출되도록 만들어주었다.

 

 

다음으로 중간 배너이다 중간배너에 있는 메뉴에는 스크립트를 또하나 만들어서 마우스 over시 상세 메뉴를 보여주도록 할 것 이다.

{/*Banner*/}
            <div className={"main_banner"}>
                <div className={"main_banner_menubar"}>
                    <img src={"https://upload.wikimedia.org/wikipedia/commons/1/17/Logitech_logo.svg"} alt = "메인배너"/>
                    {/*mouse script 필요*/}
                    <div className={"main_banner_menu"}>
                        <ol>
                            <li>제품</li>
                            <li>새로운</li>
                            <li>비즈니스</li>
                            <li>지원</li>
                        </ol>
                    </div>
                    <div className={"main_banner_icon"}>
                        <ol>
                            <li>{search}</li>
                            <li>{user}</li>
                        </ol>
                    </div>
                </div>
                <div className={"main_banner_text"}>
                    <h2>끝없는 몰입. <br/> 완벽하게 마스터.</h2>
                    <p>로지텍 MX Keys S 콤보를 소개합니다. <br/> 최고급 무선 키보드 MX Keys S, 아이코닉한 <br/> 마우스  MX Master 3S, 팜레스트까지.</p>
                    <p><button>MX Keys S 콤보 알아보기</button></p>
                </div>
            </div>

 

다음으로 shop배너이다. 딱히 어려운 부분은 없었다.

 

{/*shop Banner*/}
            <div className={"main_banner1"}>
                <div className={"shop_banner"}>
                    <div className={"shop_banner_container"}>
                        <h3>더 깨끗하게 더 밝게 더 좋게</h3>
                        <p>Brio 100으로 더 나은 사진, 오디오 및 통화를 경험하십시오. 화상 통화에서 최고의 모습을 보여줄 수 있는 간단하고 저렴한 웹캠입니다.</p>
                        <a href="/">BRIO 100 더 알아보기 {arrow_right} </a>
                    </div>
                    <div className={"shop_banner_container"}>
                        <h3>나만의 컬러. 나만의 감성.</h3>
                        <p>새로운 5가지 컬러를 만나보세요. 휴대하기 좋은 슬림하고 컴팩트한 디자인으로 어디서든 나만의 감성을 표현할 수 있습니다.</p>
                        <div>
                            <a href="/">K380S {arrow_right}</a>
                            <a href="/">M350S {arrow_right}</a>
                            <a href="/">PEBBLE 2 콤보 {arrow_right}</a>
                        </div>
                    </div>
                    <div className={"shop_banner_container"}>
                        <h3>이제 리프트로 업해보세요!</h3>
                        <p>리프트 인체공학 버티컬 마우스</p>
                        <a href="/">리프트 알아보기 {arrow_right}</a>
                    </div>
                </div>

 

오늘 많은 시간을 투자한 slide banner이다.

{/*slide Banner*/}
                <div className={"slide_banner"}>
                    <div className={"slide_banner_1"}>
                        <div className={"slide_banner_container"}>
                            <div className={"slide_banner_item1"}>
                                <img width="100%" height="100%"src={"https://resource.logitech.com/w_880,h_495,c_lfill,q_auto,f_auto,dpr_1.0/content/dam/logitech/en/homepage/product-grid/desktop_grey-mice-and-keyboards.png?v=1"} alt="슬라이드 배너1"/>
                                <div>마우스 & 키보드</div>
                            </div>
                            <div className={"slide_banner_item2"}>
                                <div>
                                    <img width="400px" height="211px" src={"https://resource.logitech.com/w_440,h_248,c_lfill,q_auto,f_auto,dpr_1.0/content/dam/logitech/en/homepage/product-grid/desktop-grey-mobile-devices-4.png?v=1"} alt="슬라이드 배너2"/>
                                    <div>IPAD 키보드</div>
                                </div>
                                <div>
                                    <img width="400px"height="211px" src={"https://resource.logitech.com/w_440,h_248,c_lfill,q_auto,f_auto,dpr_1.0/content/dam/logitech/en/homepage/product-grid/desktop_grey-streaming.png?v=1"} alt="슬라이드 배너3"/>
                                    <div>스트리밍</div>
                                </div>
                            </div>
                        </div>
                        <div className={"slide_banner_container1"}>
                            <img width="400px" src={"https://resource.logitech.com/w_440,h_743,c_lfill,q_auto,f_auto,dpr_1.0/content/dam/logitech/en/homepage/product-grid/desktop_grey-headsets.png?v=1"} alt="슬라이드 배너4"/>
                            <div>헤드셋 및 이어폰</div>
                        </div>
                    </div>
                    <div className={"slide_banner_2"}>
                        <div className={"slide_banner_2_container1"}>
                            <div>홈 시큐리티</div>
                        </div>
                        <div className={"slide_banner_2_container2"}>
                            <div>프레젠테이션 리모컨</div>
                        </div>
                        <div className={"slide_banner_2_container3"}>
                            <div>
                                <div>스피커</div>
                            </div>
                            <div>
                                <div>화상 회의</div>
                            </div>
                        </div>
                    </div>
                    <div className={"slide_banner_3"}>
                        <div className={"slide_banner_3_container1"}>
                            <div className={"slide_banner_3_item1"}>
                                <img width="400px"  src={"https://resource.logitech.com/w_440,h_371,c_lfill,q_auto,f_auto,dpr_1.0/content/dam/logitech/en/homepage/product-grid/desktop-logitech-g-bkg.jpg?v=1"} alt="슬라이드 배너 8"/>
                                <img src={"https://resource.logitech.com/content/dam/logitech/en/homepage/product-grid/desktop-logitech-g.svg"} alt="배너로고1"/>
                            </div>
                            <div className={"slide_banner_3_item2"}>
                                <img width="400px" src={"https://resource.logitech.com/w_440,h_371,c_lfill,q_auto,f_auto,dpr_1.0/content/dam/logitech/en/homepage/product-grid/desktop-jaybird-bkg.jpg?v=1"} alt="슬라이드 배너9"/>
                                <img src={"https://resource.logitech.com/content/dam/logitech/en/homepage/product-grid/desktop-jaybird.svg"} alt="배너로고2"/>
                            </div>
                        </div>
                        <div className={"slide_banner_3_container2"}>
                            <img src={"https://resource.logitech.com/content/dam/logitech/en/homepage/product-grid/desktop-ultimate-ears.svg"} alt="배너로고3"/>
                        </div>
                    </div>
                </div>

먼저 grid를 잡는 작업이 정말 오랜 시간이 걸렸다. 이미지와 텍스트의 위치 조정 또한 세세하게 생각해야하기 때문에 시간이 더 걸린것같다. 오늘은 grid를 만드는 작업까지 완성했고 이제는 click이벤트를 만들어서 slide banner를 만들어 볼것이다.

 

오늘 작성한 스크립트이다.

 

 const logoup = useRef();
    const logodown = useRef();
    const hidden_brand = useRef();
    const [click, setClick] = useState(true);
    const handleLogoOver = () => {
        logoup.current.style.display = "none";
        logodown.current.style.display = "flex";
    };
    const handleLogoLeave = () => {
        logoup.current.style.display = "flex";
        logodown.current.style.display = "none";
    };
    const handle_brandlogo_Click= () => {
        click ? hidden_brand.current.style.display = "flex" : hidden_brand.current.style.display = "none"
        setClick(click ? false : true);
    }
    const handle_brandlogo_Over1 = () => {
        hidden_brand.current.children[0].children[0].style.display = "none";
        hidden_brand.current.children[0].children[1].style.display = "flex";
    }
    const handle_brandlogo_Leave1 = () => {
        hidden_brand.current.children[0].children[0].style.display = "flex";
        hidden_brand.current.children[0].children[1].style.display = "none";
    }
    const handle_brandlogo_Over2 = () => {
        hidden_brand.current.children[1].children[0].style.display = "none";
        hidden_brand.current.children[1].children[1].style.display = "flex";
    }
    const handle_brandlogo_Leave2 = () => {
        hidden_brand.current.children[1].children[0].style.display = "flex";
        hidden_brand.current.children[1].children[1].style.display = "none";
    }
    const handle_brandlogo_Over3 = () => {
        hidden_brand.current.children[2].children[0].style.display = "none";
        hidden_brand.current.children[2].children[1].style.display = "flex";
    }
    const handle_brandlogo_Leave3 = () => {
        hidden_brand.current.children[2].children[0].style.display = "flex";
        hidden_brand.current.children[2].children[1].style.display = "none";
    }

 

오늘 작성한 css이다.



body{
    margin:0;
    font-family: 'Noto Sans KR', sans-serif;
}

.header{
    display:flex;
    align-items: center;
    justify-content: center;
}

.logo{
    padding:17px 15px 17px 0px;
}

.brand{
    width:55%;
    padding-left:15px;
    border-left:1px solid grey;
    position:relative;
}

.brand button{
    background-color: white;
    color:#777777;
    border:none;
    display:flex;
    align-items: center;
    font-size:14px;
    padding:0px;
    cursor: pointer;
}

.brand button svg{
    padding-left:10px;
    font-size:17px;
    fill: #555555;
}

.hidden_brand{
    display:flex;
    flex-direction: column;
    position: absolute;
    list-style: none;
    top:32px;
    left:15px;
    padding:0;
    margin:0;
    z-index: 9999;
}

.hidden_brand li{
    background-color: white;
}

.hidden_brand li:first-child{
    border-bottom: 1px solid grey;
}
.hidden_brand li:last-child{
    border-top: 1px solid grey;
}

.hidden_brand li img{
    padding:15px 10px 15px 10px;
}

.language button{
    color:#555555;
    background-color: white;
    border:none;
    display:flex;
    align-items: center;
    font-size:14px;
    font-weight: bold;
    padding:0;
    cursor: pointer;
}

.language button svg{
    padding-right:6px;
    font-size:15px;
    fill: #555555;
}

.main_banner img{
    width:100%;
    max-height: 75vh;
    overflow: hidden;
}

.main_banner_menubar{
    display:flex;
    position: absolute;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 90px;
}

.main_banner_menubar img{
    filter: invert(100%);
    width:118px;
    height: 36px;
    margin-right:15px;
}

.main_banner_menu ol{
    display:flex;
    list-style: none;
    padding:0;
    margin:0;
}

.main_banner_menu ol li{
    color:white;
    padding: 9px 20px 9px 20px;
    font-size:15px;
    font-weight:bold;
}

.main_banner_icon ol{
    display:flex;
    list-style: none;
    padding:0;
    margin:0;
}

.main_banner_icon ol li{
    fill:white;
    padding: 9px 15px 9px 15px;
}

.main_banner_icon ol li:last-child{
    fill:white;
    padding: 9px 0px 9px 15px;
}

.main_banner_text{
    display:flex;
    flex-direction: column;
    position: absolute;
    top:200px;
    left:350px;
}

.main_banner_text h2{
    color:white;
    font-size:50px;
    margin:40px 0px 0px 0px;
}

.main_banner_text p{
    color:white;
    font-size:22px;
}

.main_banner_text button{
    width:233px;
    font-size:15px;
    padding:14px 25px 14px 25px;
    font-weight: bold;
    border:2px solid white;
}

.main_banner_text button:hover{
    border:2px solid white;
    color: white;
    background-color: #4f7eab;
    transition:  0.3s;
}

.main_banner1{
    display:flex;
    flex-direction: column;
    align-items: center;
}

.shop_banner{
    display:flex;
    justify-content: center;
    margin-top:80px;
    overflow: hidden;
}

.shop_banner_container{
    width:20%;
    overflow: hidden;
    padding: 15px;
}

.shop_banner_container div{
    display:flex;
    flex-direction: column;
}

.shop_banner_container h3:hover{
    text-decoration:underline;
    cursor: pointer;
}

.shop_banner_container a {
    display:flex;
    align-items: center;
    color:black;
    font-size:14px;
    font-weight: 600;
    text-decoration: none;
}

.shop_banner_container a:hover{
    text-decoration:underline;
}

.shop_banner_container a svg{
    padding-top:2px;
    padding-left:8px;
    font-size:15px;
}

.shop_banner_container div a{
    margin:6px 0px 6px 0px;
}

.slide_banner{
    margin:90px 0px 500px 2480px;
    display:flex;
}

.slide_banner_1{
    display:flex;
    width:1220px;
    height:685px;
}

.slide_banner_container{
    width:800px;
    margin-right: 20px;
   
}

.slide_banner_item1{
    position: relative;
    margin-bottom:20px;
    width:100%;
}

.slide_banner_item1 div{
    position: absolute;
    bottom:60px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_item2{
    display:flex;
    justify-content: center;
    overflow: hidden;
}

.slide_banner_item2 div:first-child{
    position: relative;
    margin-right:20px;
}

.slide_banner_item2 div:first-child div{
    position: absolute;
    bottom:60px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_item2 div:last-child{
    position: relative;
    margin-left: 2px;
   
}
.slide_banner_item2 div:last-child div{
    position: absolute;
    top:60px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_container1{
    display:flex;
    position: relative;
}

.slide_banner_container1 div{
    position: absolute;
    bottom: 60px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_2{
    display:flex;
    width:1220px;
    height:685px;
}

.slide_banner_2 img{
    width:395px;
    height:100%;
}

.slide_banner_2_container1{
    position: relative;
    margin:0px 20px 0px 20px;
}

.slide_banner_2_container1 div{
    position: absolute;
    bottom:120px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_2_container2{
    position: relative;
    margin-right:20px;
}

.slide_banner_2_container2 div{
    position: absolute;
    top:60px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_2_container3{
    display:flex;
    flex-direction: column;
    overflow:hidden;
}

.slide_banner_2_container3 div:first-child{
    position: relative;
    margin-bottom: 20px;
}
.slide_banner_2_container3 div:first-child div{
    position: absolute;
    bottom:60px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_2_container3 div:last-child{
    position: relative;
}
.slide_banner_2_container3 div:last-child div{
    position: absolute;
    bottom:60px;
    left:50%;
    transform: translateX(-50%);
    font-weight: bold;
}

.slide_banner_3{
    display:flex;
    width:1220px;
    height:685px;
    margin-left:45px;
}

.slide_banner_3_container1{
    display:flex;
    flex-direction: column;
    margin-right: 20px;
    overflow:hidden;
}

.slide_banner_3_item1{
    position: relative;
    margin-bottom: 20px;
}

.slide_banner_3_item1 img:last-child{
    position: absolute;
    top:70px;
    left: 0px;
}

.slide_banner_3_item2{
    position: relative;
}

.slide_banner_3_item2 img:last-child{
    position: absolute;
    top:70px;
    left: 0px;
}

.slide_banner_3_container2{
    position: relative;
    display: flex;
}

.slide_banner_3_container2 img:last-child{
    position: absolute;
    top:130px;
    left: 0px;
}

 

오늘 웹페이지 결과물

 

내일은 아랫부분의 overflow:hidden, onClick, scroll을 사용하여서 아랫부분 slide banner를 완성 해 볼 것이다.

티스토리툴바