프론트엔드 HTML 프로그래밍 기초

HTML 프로젝트

[STS 121] HTML 프로그래밍 기초 프로젝트 입니다. 배운내용을 종합적으로 응용해 실제 사용할 수 있는 형태로 기능을 구현하는 과정을 단계별로 살펴보게 됩니다.

01. 포탈 메인 화면 만들기

본 예제에서는 네이버, 다음과 같은 포탈의 메인화면을 만들어 봅니다. 물론 css를 아직 배우지 않았기 때문에 제대로 된 화면을 제작하기는 매우 어렵지만 지금까지 배운 html 태그들을 모두 활용해 최대한 비슷하게 구성해 봅니다.

step-1> 대상 선정하기

- 크롬 웹브라우저에서 네이버를 들어갑니다.
- 네이버 메인 화면을 기준으로 합니다.
- 메인 화면 전체가 아닌 부분만 구성합니다.

proj_1-1

step-2> 레이아웃 분석하기

proj_1-2

step-3> 리소스 준비하기

proj_1-3

step-4> HTML 기본 구조 작성 (project_1.html)

project_1.html 파일을 생성하고 기본적인 HTML코드 작성을 위해 아래와 같이 코드를 입력합니다.

<!DOCTYPE html>
<html>
<head>
    <title>project_1.html</title>
</head>
<body>
    
</body>
</html>

step-5> 테이블 구조 생성 - 헤더

테이블 구조는 step-2> 레이아웃 분석의 이미지를 기준으로 작성합니다. 먼저, 네이버 로고와 검색창이 있는 부분을 헤더로 잡습니다.

<body>
    <table border="1" align="center">
        <thead>
            <tr>
                <td>
                    <img src="res/1.png" alt="res01.png" width="200px" />
                </td>
                <td rowspan="2">
                    <input type="text" name="text" style="width:400px;" />
                </td>
                <td>
                    <h6>네이버를 시작페이지로> 쥬니어네이버 해피빈</h6>
                </td>
            </tr>
        </thead>
    </table>
</body>
결과보기

proj_1-5

step-6> 테이블 구조 생성 - 바디(1)

헤더 아래에 있는 메뉴 네비게이션부터 네이버 쇼핑 이미지 부분까지 바디로 잡습니다. 메뉴 네비게이션을 테이블 한 행으로 구성하고, 아래의 배너 이미지와 로그인창을 한 행으로 구성합니다.

<tbody>
    <tr>
         <td colspan="3">메일 카페 블로그 지식IN 쇼핑 Pay TV 사전 뉴스 증권 부동산 지도 영화  뮤직 책 웹툰 더보기</td>
    </tr>      
    <tr>
        <td colspan="2">
            <center><img src="res/3.png" alt="res03" width="750px" /></center>              
        </td>
        <td colspan="1">
        <center><h5>로그인 영역이 변경되었습니다. 자세히보기</h5></center>
        <center><img src="res/2.PNG" alt="res02" height=30px /></center>
        <center><h5>아이디 비밀번호 찾기&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;회원가입</h5></center>
        </td>
    </tr>
</tbody>
결과보기

proj_1-6

step-6> 테이블 구조 생성 - 바디(2)

연합뉴스와 뉴스스탠드 컨텐츠가 있는 영역은 rowspan으로 두 개의 행을 병합합니다. 뉴스스탠드 속 이미지 컨텐츠는 또다른 테이블을 만들어 넣어줍니다.

<tr>
    <td colspan="2" rowspan="2">
        <div align=left>연합뉴스 > '가시밭' 김학범호 '꽃길' 박항서호...준결승에서 만날까</div><br>

        <table border="1">
            <tr>
                <th colspan="6" align="left">뉴스스탠드 > 전체언론사  | MY뉴스</th>
            </tr>
            <tbody>
            <tr>
                <td><img src="https://via.placeholder.com/120x60" alt="placeholder" /></td>
                <td><img src="https://via.placeholder.com/120x60" alt="placeholder" /></td>
                <td><img src="https://via.placeholder.com/120x60" alt="placeholder" /></td>
                <td><img src="https://via.placeholder.com/120x60" alt="placeholder" /></td>
                <td><img src="https://via.placeholder.com/120x60" alt="placeholder" /></td>
                <td><img src="https://via.placeholder.com/120x60" alt="placeholder" /></td>
            </tr>
            ...
            ...
            </tbody>
        </table>
    </td>
    <td colspan="1">
        <h6>08.21 (화) 스포츠</h6>
        <h6>해외야구 [MLB TV중계] 텍사스 vs. 오클랜드</h6>
        <h6>축구 손흥민 골(Goal)에 언론 '골드(Gold)는 글쎄'</h6>
        <h6>해외축구 '기절'키에보 GK 아내의 분노 '호날두, 용...</h6>
    </td>
</tr>
<tr>
    <td colspan="1">
    <center><img src="res/4.png" alt="res04" width="280px" /></center>
    </td>
</tr>
결과보기

proj_1-7

step-6> 테이블 구조 생성 - 푸터

회사소개, 인재채용 등의 텍스트가 있는 영역을 푸터로 구성합니다.

<tfoot>
    <tr rowspan="3">
        <td colspan="3">
        회사소개 | 인재채용 | 제휴제안 | 이용약관 | 개인정보처리방침 | 청소년보호정책 | 네이버정책 | 고객센터 | NAVER Corp.
        </td>
    </tr>
</tfoot>
결과보기

proj_1-8

step-9> 결과 확인

테이블 속성의 border를 제거한 후 브라우저에서 실행 결과를 확인합니다.

proj_1-9

2. 게시판 만들기

본 예제에서는 네이버, 다음과 같은 포탈 카페의 게시판을 만들어 봅니다. 물론 css를 아직 배우지 않았기 때문에 제대로 된 화면을 제작하기는 매우 어렵지만 지금까지 배운 html 태그들을 모두 활용해 최대한 비슷하게 구성해 봅니다.

step-1> 대상 선정하기

-네이버, 다음 등의 포털 사이트의 카페들 중 하나를 선택합니다.
-본 예제에서는 네이버 카페 '아웃캠퍼스'를 기준으로 설명합니다.

step-2> 레이아웃 분석하기

5-2결과

step-3> html 기본 구조 작성 (project.html)

project.html파일을 생성하고 기본적인 html 코드 작성을위해 아래와 같이 코드를 입력합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Project.html</title>
</head>
<body>
    
</body>
</html>

step-4> 테이블 구조 생성

게시판의 기본적인 테이블 구조를 잡아줍니다. 첫번쨰 행을 살펴보면 제목, 작성자, 작성일, 조회, 좋아요로 구성되어있습니다. 이에 따라 열의 제목을 작성하기 위해 다음과 같이 <th>태그를 이용하여 코드를 입력합니다.

<body>
    <table border="1">
        <tr>
            <th colspan="2">제목</th>
            <th>작성자</th>
            <th>작성일</th>
            <th>조회</th>
            <th>좋아요</th>
        </tr>
    </table>

step-5> 게시글 추가

게시판의 테이블 구조를 따라 게시글들을 추가해줍니다. 게시글 번호, 게시글 제목, 작성자, 작성일, 조회 수, 좋아요 수의 순으로 각 행의 요소를 추가하기위해 아래와같이 코드를 작성합니다.

<tr>
    <td>공지</td>
    <td>[모바일] 8월 넷째 주 : 금주의 대학생 공모전 리스트</td>
    <td>캐미언니</td>
    <td>2018.08.20.</td>
    <td>99</td>
    <td>0</td>
</tr>
<tr>
    <td>533931</td>
    <td>[추천공모전] 2018 생명나눔 아이디어 공모전 (~9/9)</td>
    <td>씽굿씽굿</td>
    <td>13:49</td>
    <td>0</td>
    <td>1</td>
</tr>

        ...

이후의 코드는 위의 코드의 형식이 반복됨으로, 코드가 너무 길어짐을 방지하기위해 중략합니다.

step-6> 글쓰기 버튼

글쓰기 버튼의 위치를 보면 한 행 안에 열이 나뉘어져있지 않습니다. 비슷하게 만들어주기위해 열을 병합하고 그 안에 버튼을 추가하기위해 아래와 같이 코드를 작성합니다.

<tr>
    <td colspan="6"><button>글쓰기</button></td>
</tr>

step-7> 페이지 네비게이션

가장 하단의 페이지 부분을 제작합니다. 각 페이지 번호를 <a>태그로 감싸 링크를 걸어주고, <center>태그를 이용해 가운데 위치하게 하여 카페 게시판과 유사하게 만들어주기 위해 다음과 같이 코드를 작성합니다.

<tr>
    <td colspan="6"><center>
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
    <a href="#">다음▶</a>
    </center></td>
</tr>>

step-8> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

5-2결과