일상/연습

넥슨 메인홈페이지 연습

디디벨 2022. 6. 6. 13:15
728x90

항상 쓰는거지만 

배운 것을 활용해서 할 수 있는 것 까지만 만들어내는게 내 목표이다. 

 

만든 페이지

구현 못한 것도 많다. 슬라이드, 버튼들 등등

그래도 이때까지 했던 연습들 중에 가장 이것저것 배운거를 활용할 게 많았던 연습이었다.

물론 이게 100%정답(원래사이트의 코드)는 아니고 비효율적인 코드가 섞여 있을 수 있겠지만

그래도 한 페이지를 배운것들을 활용하는 차원에서 만들어낸것에 뿌듯하다. 

 

 

 

큰 구성은 

div > header + section*4 + footer 이었다.

 

 

 

1.header

헤더이미지

 

헤더의 구조는 다음과 같다.

 

            <header id="header">
                <ul>
                    <li class="header01">
                            <ul>
                                <li><a href="#"> <img src="../img/menu_FILL0_wght400_GRAD0_opsz48.png" alt="메뉴이미지"></a>
                                </li>
                                <li><a href="#">메뉴</a>
                                </li>
                            </ul>
                        </a>
                    </li>
                    <li class="header02">
                        <a href="#">
                            <img src="../img/nexon/logo_nexon.png" alt="로고이미지">
                        </a>
                    </li>
                    <li class="header03">
                        <a href="#">회원가입</a>
                        <a href="#">로그인</a>
                    </li>
             
                </ul>
            </header>

 

3등분으로 나뉘어 정렬되어야 하기 때문에 float대신

display:flex + justify-content:space-between를 주어 정렬하였다.

 

헤더에서의 문제점
:hover

로그인 상자를 만드는게 까다로웠다. 

나는 li안에 a에 로그인을 넣어 a를 꾸며주는 방식을 생각했는데

그렇게 했더니 정렬도 잘 안맞았다(억지로 마진값과 패딩값을 건들여 정렬해 놓은 것처럼 했다)

지금 생각해보면 따로 button으로 할 수도 있지않을까 생각이 든다...

 

 

 

 

 

2.section1

 

 

 

섹션1은 배너이다.

아직 슬라이드를 할 줄몰라 이미지를 삽입했다.

 

 

 

 

 

3.section2

 

 

가장 유사하게 구현해서 마음에 드는 파트

 

크게 ul > li*2로 작업했다.

그 안에서 첫번째 li는 다시 3개로 쪼개고 안의 텍스트를 꾸며주었다.

다만 아쉬웠던건 이미지위에 살짝 그라데이션이 깔려야하는데

그건 구현을 못해서 아쉬웠다.

 

그래도 :hover되었을때의 CSS blur는 box-shadow로 그림자, 블러효과를 줄 수 있었다.

 

 

 

 

두번째 li는 display:flex를 적극 활용했다. 

#rc_body .sc2 > ul{
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

처음으로 column과 stretch를 사용해서

70%라는 영역으로 확장시키고 그 사이에 gap을 주어 버튼들 간 분리했다.

 

 

 

 

 

4. section3

 

 

배경이 투명화되어있어 이걸 어떻게 해야할지 고민했었다.

일단 기존 사이트와 같이 글자를 넣는건 무리고

어느정도의 영역이 :hover시 background-color값이 변하는 것만 하기로 했다.

 

기존이미지가 정말 인물까지만의 배경투명화 파일이여서

위와 같이 어느정도의 직사각형 영역을 만들기위해

padding-left값을 주어 임의의 상자를 만들었다. 

 

 

 

 

 

5. section4

 

마지막 섹션

 

전체게임+pc+모바일게임을 다 담았다. 

 

 

아직 버튼을 꾸미는 건 모르겠다

 

전체 게임 밑의 선택지는 input type의 radio를 활용하여 구현했다.

label에 background-color를 입히니 글자만이 아닌 글자 전체구역이 잡혀서

span으로 따로 분리한 뒤 꾸며주었다. 

 

 

 

 

여기서 실수 한 점이 있었는데 

예를 들어 li안에 img+p*2이라면 

#all .allbody li a p:nth-child(2)
 
이라고 적게 된다면 이는 두번째 p가 아닌
img 다음의 첫번째 p를 지칭하게 된다.
 
따라서 두번째 p를 불러오고 싶을때에는
 
#all .allbody li a p:nth-child(3)
 
이렇게 써야한다는 걸 경험했다...
 
 
 
pc와 모바일 파트 둘다 display:flex를 활용하였다.
이번 연습에서는 float보다는 flex를 더 활용한 것 같다.
 
 
 
5. footer

 

 

푸터는 크게 li*4들로 나누어서 구현했다. 

 

소메뉴들은 영역 가로값을 지정하여 줄이 바뀌게 하였고

사업자 정보들은 <br>을 이용해 줄넘김을 했다. 

 

 

이렇게 넥슨 메인페이지를 구현할 수 있는 만큼 해보았다.

728x90