yg 메인 홈페이지 연습

구현 못 한것: 리스트들, 슬라이드배너 등

아직 배우질 않아서 수업때 배운 것들(CSS)로만 yg홈페이지 일부를 연습으로 만들어봤다. 

 

전체적으로 header, section*2, footer로 이루어졌다. 

 

 

 

<header>

 

크게 두개의 블럭태그로 상단(언어들), 하단(로고+네비게이션바)로 나누었다.

        <header id="header">
            <ul class="header_top">
               <li><a href="#">KOREAN</a></li>
               <li><a href="#">ENGLISH</a></li>
               <li><a href="#">CHINESE</a></li>
               <li><a href="#">JAPANESE</a></li> 
            </ul>
            <div class="header_bottom">
                <h1>
                    <a href="#">
                        <img src="./img/yglogo.png" alt="로고 이미지">
                    </a>
                    
                </h1>
                <ul>
                    <li><a href="#">NOTICE</a></li>
                    <li><a href="#">NEWS</a></li>
                    <li><a href="#">ARTISTS</a></li>
                    <li><a href="#">ACTORS</a></li>
                    <li><a href="#">MULTIMEDIA</a></li>
                    <li><a href="#">SELECT</a></li>
                    <li><a href="#">WITH</a></li>
                    <li><a href="#">AUDITION</a></li>
                </ul>
            </div>
        </header>

 

메뉴바에는 :hover 되었을때 color가 바뀌게 하였다.

 

 

<section>

 

section1은 이미지 처리해서 슬라이드자리에 위치했다.

section2는 ul>li*4로 emmet을 부분 활용하면서 작업했다. 

 

그 중 첫번째 박스인 공지사항 부분은 리스트를 만들 수 없어서 텍스트로 대체했다. 

탭은 input+label+div의 조합으로 뼈대를 만들고 css를 활용해 :checked시 탭을 오고가고 할 수 있게 구현했다.

 

 

 

<footer>

 

 

 footer는 크게 li*3으로 구성하였다.

 

  <footer id="footer">
            <ul>
                <li>
                    <h3>
                        <img src="./img/yglastlogo.png" alt="라스트로고">
                    </h3>
                </li>
            
           <li>
            <p>
                YG의 모든 컨텐츠는 저작권의 보호를 받고 있습니다.
            </p>
           </li>
           <li>
            <ul class="bottom_categtory">
                <li>
                    <a href="#">· ABOUT YG</a>
                </li>
                <li>
                    <a href="#">· YG RECRUIT</a>
                </li>
                 <li>
                    <a href="#">· CUSTOMER CENTER</a>
                 </li>  
                <li>
                    <a href="#">· 개인정보처리방침</a>
                </li>
                   
              
            </ul>
           </li>
        </ul>
          
        </footer>

css는 float를 활용하여 각 위치에 위치하도록 하였고 

그 외에는 a와 p를 꾸며주면서 마무리 했다.