홈페이지 만들기 5 (html/css)

dev_swan·2021년 12월 29일
0

HTML-CSS-JS

목록 보기
13/19
post-thumbnail

html/css를 이용하여 홈페이지 만들기

오늘은 간단하게 홈페이지에 게시판 부분을 만들어 보았다.

<body>영역

    <h1>
        <a href="./index.html">게시판 로고</a>
    </h1>
    <table border="1">
        <tr>
            <td>번호</td>
            <td>제목</td>
            <td>작성자</td>
            <td>작성일</td>
            <td>조회수</td>
        </tr>
        <tr>
            <td>1</td>
            <td><a href="./view.html">안녕하세요</a></td>
            <td>web7722</td>
            <td>2021-12-29</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href="../public/web.html">안녕하세요2</a></td>
            <td>web7722</td>
            <td>2021-12-29</td>
            <td>2</td>
        </tr>
    </table>
    <a href="./write.html">글쓰기</a>

h1을 이용해 게시판 로고를 클릭하면 게시판화면으로 돌아오도록 설정하였다.
<table>을 이용해 5칸씩 3줄짜리 표를 만든후 번호,제목,작성자 등을 추가하고 제목을 클릭하면 게시글영역으로 이동하게 링크를 걸어두었다.
작성자가 글을 직접 쓸 수 있도록 글쓰기를 누르면 글쓰는영역으로 이동하도록 링크를 걸어두었다.

게시판 로고

번호 제목 작성자 작성일 조회수
1 안녕하세요 web7722 2021-12-29 0
2 안녕하세요2 web7722 2021-12-29 2
글쓰기
<body>
  <h1>
      <a href="./index.html">게시판 로고</a>
  </h1>
  글보기 입니다.
</body>

안녕하세요를 클릭해 view.html에 게시글 영역으로 이동하면 게시판로고를 클릭하여 다시 게시판영역으로 이동하게 해두었다.

게시판 로고

글보기 입니다.
<body>
  <h1>
      <a href="../2021 1229/index.html">게시판 로고</a>
  </h1>
  hello web
</body>

같은 방법으로 안녕하세요2에 게시글 영역을 만들었다.

  <h1>
      <a href="./index.html">게시판 로고</a>
  </h1>
  <form method="get" action="./inedx.html">
  <table>
      <tr>
          <td>제목</td>
          <td><input type="text" name="subject"></td>
      </tr>
      <tr>
          <td>이름</td>
          <td><input type="text" name="writer"></td>
      </tr>
      <tr>
          <td>비밀번호</td>
          <td><input type="password" name="password"></td>
      </tr>
     <tr>
          <td>내용</td>
          <td>
              <textarea name="content"></textarea>
          </td>
      </tr>
   </table>
   <input type="submit" value="글쓰기">
   </form>
   <a href="view.html">글쓰기</a>

<table>을 사용해 글 제목, 이름, 비밀번호, 내용을 기재할 수 있도록 만들었다.
글을 완성하면 글쓰기 버튼을 클릭하여 글내용을 전송하도록 <input> 설정하였다.
글을 완성하고 글쓰기 버튼을 누르면 자동으로 서버로 <input> 내용이 전송되고 게시판영역으로 넘어가도록 <form method="get" action="./inedx.html">을 설정해두었다.

게시판 로고

제목
이름
비밀번호
내용
글쓰기

0개의 댓글