동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

선행 지식 :

html, css 공부가 필요합니다. 뒷부분은 javascript, php에 대한 지식도 필요합니다. 해당 공부는 아래 링크에서 무료로 수강할 수 있습니다.

먼저, html로 우리가 만들고자 하는 웹사이트의 기본 골격을 만든 뒤 CSS를 이용하여 시각적인 디자인을 진행할 겁니다.

html 작업을 진행합니다.

대부분의 웹사이트는 아래와 같은 기본 구조에서 시작합니다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>웹학교 - 실전홈페이지제작</title>
</head>
<body>
    
</body>
</html>

위 html구조를 기본으로 우리가 만들고자 하는 웹사이트의 골격을 하나씩 채워 갈 겁니다.

레이아웃과 관련한 HTML 요소들

불과 몇 년전만 해도 table요소를 이용하여 웹사이트 레이아웃을 잡았습니다. 무엇보다 정보를 원하는 위치에 고정시키기가 쉬웠기 때문입니다.

아래는 table로 레이아웃을 잡던 간단한 예입니다.

<!DOCTYPE html>
<html>
   <head>
      <title>테이블 레이아웃</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#f1f1f1">
               <h1>이것은 테이블로 잡은 레이아웃입니다.</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>메인메뉴</b><br>
               HTML<br>
               CSS<br>
               Javascript
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               실전홈페이지 제작 강좌를 진행합니다.
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#f1f1f1">
               <center>
                  Copyright © 2017 ABC Corp. All Rights Reserved.
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

그러나 지금은 테이블로 레이아웃을 잡지 않습니다. w3c에서 권장하지 않고 무엇보다 최근 여러 미디어를 위해 인기가 있는 반응형 홈페이지를 만들기도 불가능합니다.

지금은 웹사이트의 레이아웃은 CSS를 이용합니다.

그래도 <div>, <span> 그리고 html5에 추가된 <header>, <main>, <footer>같은 시멘틱 요소는 레이아웃과 밀접한 것들입니다.

실전홈페이지제작 강좌에서는 위 <header>같은 시멘틱 요소보다 기존에 이용하고 있는 <div>를 이용하여 진행하려고 합니다. 이는 브라우저 호환성을 위해 아직도 많이 사용하고 있기 때문입니다.

그럼 1강에서 우리가 만들고자 했던 레이아웃 이미지를 기준으로 html코딩을 진행해 보도록 하겠습니다.

브라우저가 화면에서 보여주는 <body>안에 HTML로 해더, 메인, 푸터를 차례로 코딩하겠습니다.

먼저 해더 부분입니다.

<!--Header-->
<div id="header">

  <div class="SocialBarContainer">
    상단 소셜 + 전화
  </div>
  
  <div class="logo">
      회사로고
  </div>
  <!--Menu -->
  <div class="nav">
    메뉴
  </div>
  <!--/Menu -->
</div>
<!--/Header -->

다음은 메인 부분입니다.

<!--body-->
<div class="main">
  <div class="slide">
    이미지
  </div>
  <div class="container">
    <div class="m_column">
        새로운 소식
    </div>
    <div class="m_column">
        자료실      
    </div>  
    <div class="m_column m_video">
        동영상
    </div>        
  </div>
</div>
<!--/body-->

다음은 푸터부분입니다.

<!--footer-->
<div class="footer">
  <div class="f_menu">
    아래 옵션 부분
  </div>
  <div class="copyright">
    카피라이트
  </div>
</div>

<!--footer-->

다음 강좌에서 세부 html코딩을 해보도록 하겠습니다.

홈페이지제작 - html작업 > 실전홈페이지제작

홈페이지제작 - html작업

페이지 정보

댓글목록 0

웹학교

메인메뉴

고객센터

회원영역

회사정보