메인 부분과 하단 부분을 구체적으로 html 코딩하겠습니다.

​

1. 메인부분(슬라이드)

메인 이미지 부분은 추후 슬라이드 코드로 진행할 수도 있습니다.

일단은 아래와 같이 이미지 코딩을 하겠습니다.

<div class="slide">
    <img src="img/main.jpg" width="1000" alt="">
  </div>

2. 메인부분(새로운 소식, 자료실, 비디오)

많은 사이트에서 메인부분에 2개 또는 3개로 분할해서 정보를 제공합니다.

<div class="container">
    <div class="m_column">
      <h3>새로운소식</h3>
      <ul>
        <li>새로운 제품이 출시되었습니다.</li>
        <li>새로운 제품이 출시되었습니다.</li>
        <li>새로운 제품이 출시되었습니다.</li>
        <li>새로운 제품이 출시되었습니다.</li>
        <li>새로운 제품이 출시되었습니다.</li>    
                                   
      </ul>
    </div>
    <div class="m_column">
      <h3>자료실</h3>
         <ul>
          <li>새로운 제품이 출시되었습니다.</li>
          <li>새로운 제품이 출시되었습니다.</li>
          <li>새로운 제품이 출시되었습니다.</li>
          <li>새로운 제품이 출시되었습니다.</li>
          <li>새로운 제품이 출시되었습니다.</li>  
                                         
        </ul>        
    </div>  
    <div class="m_column m_video">
      <iframe width="330" height="160" src="https://www.youtube.com/embed/MBdVXkSdhwU" allowfullscreen></iframe>
    </div>        
  </div>

3. 푸터(footer)부분

하단에는 일반적으로 카피라이트를 포함한 부가정보들이 들어갑니다.

<!--footer-->
<div class="footer">
  <div class="f_menu">
    <p><span>회사명 : 코리아뉴스</span><span>사업자등록번호:000-11111-222</span><span>대표:홍길동</span></p>
  </div>
  <div class="copyright">
    <p>Copyright &copy;2017 365OK Corp., All Rights Reserved.</p>
  </div>
</div>

<!--footer-->

4. 부메뉴 html코딩

부메뉴는 2단 레이아웃을 적용해 코딩하겠습니다. 또한 2단 레이아웃을 위해 float속성을 사용하겠습니다.

header,footer부분은 메인과 동일합니다. 

부메뉴는 메뉴별로 상단 타이틀 또는 이미지를 변경할 수 있습니다.

<div class="subtitle">
        <img src="img/sub.jpg" width="1000" alt="서브이미지">
    </div>

오른쪽에 로그인창을 비롯한 부가 정보를, 왼쪽에 주 내용을 배치하겠습니다.

<div class="main2">
 <div class="aside">
  <div class="login">로그인창
  </div>
  <p><img src="img/left.jpg" alt="" width="260"></p>
 </div>
 <div class="subtainer">
   <div class="breadcrumbs">회사소개 > 인사말 </div>
   <p>주 내용이 들어가는 자리</p>
 </div>
</div>

지금까지 우리가 만들고자 하는 사이트의 html코딩 작업을 진행하였습니다.

이것을 기반으로 CSS작업을 진행할 것입니다. CSS작업을 진행하면서 일부 html수정작업이 필요할 수도 있습니다.

다음 시간부터는 CSS작업을 진행합니다.