HTML을 사용하여 간단하게 메인페이지와 메뉴들을 만든 뒤

메뉴들을 누르면 다른 페이지로 이동하고 이동되는 페이지 마다 다른 기능들이 있게 화면을 만들어 보겠습니다

 

HTML 코딩을하기전 사용할 이미지들을 아무거나 구해옵니다

- 아무 이미지들이랑 로고로 사용할 이미지들을 가져옵니다

 

메인 페이지 코드

<!DOCTYPE html>
<html>

<head>
    <title>메인</title>
</head>

<body>
    <a href="index.html"><img src="./logo/google_logo.jpg" alt="이미지 없음" width="150" height="100"></a>
    <a href="menu1.html">메뉴1</a>
    <a href="menu2.html">메뉴2</a>
    <a href="menu3.html">메뉴3</a>
    <a href="menu4.html">메뉴4</a>
    <a href="join.html"><button style="float: right;">회원가입</button></a>
    <form action="login.html" method="GET" style="float: right;">
    ID : <input type="text" placeholder="아이디" size="20" name="userid" value="">
    PW : <input type="password" placeholder="비밀번호" size="20" name="userpw" value="">
    <input type="submit" value="로그인">
    </form>
    <br><hr>
    <img src="./img/img1.jpg" alt="메인 이미지 없음" width="1020" height="600">
    <hr>
    <img src="./img/1.jpg" alt="이미지 없음" width="250" height="200">
    <img src="./img/2.jpg" alt="이미지 없음" width="250" height="200">
    <img src="./img/3.jpg" alt="이미지 없음" width="250" height="200">
    <img src="./img/4.jpg" alt="이미지 없음" width="250" height="200"><br>
    <hr>
    <img src="./img/5.jpg" alt="이미지 없음" width="250" height="200">
    <img src="./img/6.jpg" alt="이미지 없음" width="250" height="200">
    <img src="./img/7.jpg" alt="이미지 없음" width="250" height="200">
    <img src="./img/8.jpg" alt="이미지 없음" width="250" height="200">
    <hr>
    <ul>
        <li>회사소개</li>
        <li>오시는길</li>
        <li>연락처</li>
        <li>메일주소</li>
    </ul>
</body>

</html>

 

메인 페이지 웹 캡쳐

 

 

메뉴1 페이지 코드

<!DOCTYPE html>
<html>

<head>
    <title>메뉴1</title>
</head>

<body>
    <a href="index.html"><img src="./logo/google_logo.jpg" alt="이미지 없음" width="150" height="100"></a>
    <a href="menu1.html">메뉴1</a>
    <a href="menu2.html">메뉴2</a>
    <a href="menu3.html">메뉴3</a>
    <a href="menu4.html">메뉴4</a>
    <form action="login.html" method="GET" style="float: right;">
    ID : <input type="text" placeholder="아이디" size="20" name="userid" value="">
    PW : <input type="password" placeholder="비밀번호" size="20" name="userpw" value="">
    <input type="submit" value="로그인">
    </form><br><hr>
    <img src="./img/img1.jpg" alt="메인 이미지 없음" width="1020" height="600">
    <hr>
    <table border="1">
        <caption>게시판</caption>
        <tr>
            <th>no</th>
            <th>글제목</th>
            <th>글쓴이</th>
            <th>작성시간</th>
        </tr>
        <tr>
            <td>1</td>
            <td>첫번째글</td>
            <td>가</td>
            <td>2020-10-21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>두번째글</td>
            <td>나</td>
            <td>2020-10-22</td>
        </tr>
        <tr>
            <td>3</td>
            <td>세번째글</td>
            <td>다</td>
            <td>2020-10-23</td>
        </tr>
        <tr>
            <td>4</td>
            <td>네번째글</td>
            <td>라</td>
            <td>2020-10-24</td>
        </tr>
    </table>
    <hr>
    <ul>
        <li>회사소개</li>
        <li>오시는길</li>
        <li>연락처</li>
        <li>메일주소</li>
    </ul>
</body>

</html>

 

메뉴1 페이지 웹 캡쳐

 

 

메뉴2 페이지 코드

<!DOCTYPE html>
<html>

<head>
    <title>메뉴2</title>
</head>

<body>
    <a href="index.html"><img src="./logo/google_logo.jpg" alt="이미지 없음" width="150" height="100"></a>
    <a href="menu1.html">메뉴1</a>
    <a href="menu2.html">메뉴2</a>
    <a href="menu3.html">메뉴3</a>
    <a href="menu4.html">메뉴4</a>
    <form action="login.html" method="GET" style="float: right;">
    ID : <input type="text" placeholder="아이디" size="20" name="userid" value="">
    PW : <input type="password" placeholder="비밀번호" size="20" name="userpw" value="">
    <input type="submit" value="로그인">
    </form><br><hr>
    <img src="./img/img1.jpg" alt="메인 이미지 없음" width="1020" height="600">
    <hr>
    <table>
        <caption>체크박스 있는 사진 게시판</caption>
        <tr>
            <th>사진1</th>
            <th>사진2</th>
            <th>사진3</th>
            <th>사진4</th>
        </tr>
        <tr>
            <td><img src="./img/1.jpg" alt="이미지없음" width="250" height="200"><br><input type="checkbox" value="1"></td>
            <td><img src="./img/2.jpg" alt="이미지없음" width="250" height="200"><br><input type="checkbox" value="2"></td>
            <td><img src="./img/3.jpg" alt="이미지없음" width="250" height="200"><br><input type="checkbox" value="3"></td>
            <td><img src="./img/4.jpg" alt="이미지없음" width="250" height="200"><br><input type="checkbox" value="4" checked></td>
        </tr>
    </table>
    <hr>
    <ul>
        <li>회사소개</li>
        <li>오시는길</li>
        <li>연락처</li>
        <li>메일주소</li>
    </ul>
</body>

</html>

 

메뉴2 페이지 웹 캡쳐

 

메뉴3 페이지 코드

<!DOCTYPE html>
<html>

<head>
    <title>메뉴3</title>
</head>

<body>
    <a href="index.html"><img src="./logo/google_logo.jpg" alt="이미지 없음" width="150" height="100"></a>
    <a href="menu1.html">메뉴1</a>
    <a href="menu2.html">메뉴2</a>
    <a href="menu3.html">메뉴3</a>
    <a href="menu4.html">메뉴4</a>
    <form action="login.html" method="GET" style="float: right;">
    ID : <input type="text" placeholder="아이디" size="20" name="userid" value="">
    PW : <input type="password" placeholder="비밀번호" size="20" name="userpw" value="">
    <input type="submit" value="로그인">
    </form><br><hr>
    <img src="./img/img1.jpg" alt="메인 이미지 없음" width="1020" height="600">
    <hr>
    <table>
        <caption>라디오박스 있는 사진 게시판</caption>
        <tr>
            <th>사진1</th>
            <th>사진2</th>
            <th>사진3</th>
            <th>사진4</th>
        </tr>
        <tr>
            <td><img src="./img/1.jpg" alt="이미지없음" width="250" height="200"><br><input type="radio" name="web" value="1"></td>
            <td><img src="./img/2.jpg" alt="이미지없음" width="250" height="200"><br><input type="radio" name="web" value="2"></td>
            <td><img src="./img/3.jpg" alt="이미지없음" width="250" height="200"><br><input type="radio" name="web" value="3"></td>
            <td><img src="./img/4.jpg" alt="이미지없음" width="250" height="200"><br><input type="radio" name="web" value="4"></td>
        </tr>
    </table>
    <hr>
    <ul>
        <li>회사소개</li>
        <li>오시는길</li>
        <li>연락처</li>
        <li>메일주소</li>
    </ul>
</body>

</html>

 

 

메뉴3 페이지 웹 캡쳐

 

 

메뉴4 페이지 코드

<!DOCTYPE html>
<html>

<head>
    <title>메뉴4</title>
</head>

<body>
    <a href="index.html"><img src="./logo/google_logo.jpg" alt="이미지 없음" width="150" height="100"></a>
    <a href="menu1.html">메뉴1</a>
    <a href="menu2.html">메뉴2</a>
    <a href="menu3.html">메뉴3</a>
    <a href="menu4.html">메뉴4</a>
    <form action="login.html" method="GET" style="float: right;">
    ID : <input type="text" placeholder="아이디" size="20" name="userid" value="">
    PW : <input type="password" placeholder="비밀번호" size="20" name="userpw" value="">
    <input type="submit" value="로그인">
    </form><br><hr>
    <img src="./img/img1.jpg" alt="메인 이미지 없음" width="1020" height="600">
    <hr>
    <form action="write.html" method="POST" enctype="multipart/form-data">
    <table border="1">
        <caption>게시판 글쓰기</caption>
        <tr>
            <th>제목</th>
            <td><input type="text" name="title" placeholder="글 제목" size="130"></td>
        </tr>
        <tr>
            <th>내용</th>
            <td><textarea name="content" placeholder="글 내용" cols="130" rows="20"></textarea></td>
        </tr>
        <tr>
            <th>파일</th>
            <td>
                <input type="file" name="userfile">
                <input type="submit" value="전송">
            </td>
        </tr>
    </table>
    </form>
    <hr>
    <ul>
        <li>회사소개</li>
        <li>오시는길</li>
        <li>연락처</li>
        <li>메일주소</li>
    </ul>
</body>

</html>

 

 

메뉴4 페이지 웹 캡쳐

'HTML' 카테고리의 다른 글

HTML 태그 테스트  (0) 2020.11.13
HTML 태그의 종류  (0) 2020.11.13

여러가지 태그 사용해보기

 

HTML 코드

<!DOCTYPE html>

<html>
<head>
    <title>페이지 제목</title>
</head>

<body>
    <div style="background-color: red; padding: 40px;">
        <span style="background-color: white;"> <i>기울어진</i></span>
        <span style="background-color: white;"> <small>작은</small></span>
        <span style="background-color: white;"> <del>지우기</del></span><br>
    </div>
    <div style="background-color: blue; padding: 40px;">
        <span style="background-color: white;"> <ins>새로 추가된</ins></span>
        <span style="background-color: white;"> <mark>마킹</mark></span>
        <span style="background-color: white;"> <sub>아래</sub>첨자</span>
        <span style="background-color: white;"> <sup>윗</sup>첨자</span><br>
    </div>
    <div style="background-color: green; padding: 40px;">
        <img src="\img\bts.jpg" alt="a"white="100" height="100">&nbsp;
        <img src="C:\html\img\a.jpg" alt="잘못된 이미지">        
    </div>
</body>
</html>

 

결과 캡쳐

'HTML' 카테고리의 다른 글

테스트 ( HTML )  (0) 2020.11.13
HTML 태그의 종류  (0) 2020.11.13

HTML 태그의 종류

태그

설명

<html></html>

웹 페이지의 시작과 끝을 나타낸다

<head></head>

웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용한다

<body></body>

브라우저에 실제 표시되는 내용

<title></title>

문서 제목

<meta>

문자 인코딩 및 문서 키워드, 요약 정보

<div></div>

컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다

<span></span>

컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다

<a></a>

웹 페이지나 외부 사이트 연결에 사용된다

<script>

코드 삽입에 사용된다

<link>

외부 파일을 연결할 때 사용한다

<img>

이미지 삽입에 사용한다

<p>

단락을 생성할 때 사용한다

<li></li>

리스트내에서 항목을 나열할 때 사용한다

<ul></ul>

순서가 없는 리스트를 만들 때 사용한다

<ol></ol>

순서가 있는 리스트를 만들 때 사용한다

<style>

스타일 정보를 정의할 때 사용하는 태그

<br>

줄 바꿈

<hn></hn>

제목에 사용한다 ex) <h1>제목<h1>

<input>

사용자가 정보를 입력하는 부분을 만들어야 할 때 사용한다

<form></form>

form을 생성한다

<iframe>

외부 페이지 삽입

<nav>

문서 연결 링크

<strong>

중요한 내용 강조에 사용

<footer>

제작 정보와 저작권 정보

<header>

제목 지정에 사용

<button>

버튼을 만들 때 사용한다

 

'HTML' 카테고리의 다른 글

테스트 ( HTML )  (0) 2020.11.13
HTML 태그 테스트  (0) 2020.11.13

+ Recent posts

티스토리툴바