혜랑's STORY

[개발] 기본 화면 만들기(HTML, CSS) 본문

2021 SISS 21기 활동/겨울방학 WEB Project

[개발] 기본 화면 만들기(HTML, CSS)

hyerang0125 2021. 2. 4. 00:51

#메인페이지

<!--main.html-->
<!doctype html>
<html>
<head>
    <title>main page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body><br>
    <div class="contents">
      <table>
      <th>
        <img src="images/mainLogo.png">
      </th>
      <th>
        <form>
          <fieldset class="search-from">
                <input class="input-text" placeholder="레시피를 검색해주세요." type="text">
                <button id="search-btn" type="submit" style="background:none; border:0px;"><img src="images/search_btn.png" class="submit-btn"></button>
          </fieldset>
        </form>
      </th>
      </table>
    </div><br>
    <div id="rectangle"></div><br><br>
    <div class="contents">
    <table id="login_share">
      <tr>
        <td rowspan="3"><img src="images/ad.png" class="ad">&emsp;&emsp;</td>
        <td align="left"><span class="login_sighUp">로그인하고 레시피 공유해요!<span><br>
          <a href="login.html"><img src="images/login_btn.png" class="login_btn"><a><br>
        </td>
      </tr>
      <tr>
        <td align="right"><span class="login_sighUp"><a href="signUp.html">회원가입</a><span></td>
      </td>
      <tr>
        <td><a href="write.html"><img src="images/share_btn.png" class="share_btn"></a></td>
      </tr>
      <tr>
        <td colspan="2"><br><span id="ad_2">지브리가 반해버린 그 맛!</span></td>
      <tr>
    </table>
    <table  cellspacing="45" cellpadding="10" class="menus">
      <tr>
        <td><img src="images/menu1.png" class="menu"><br>하울정식</td>
        <td><img src="images/menu2.png" class="menu"><br>라면</td>
        <td><img src="images/menu3.png" class="menu"><br>오므오므오므라이스</td>
      </tr>
    </table>
  </div>
</body>
</html>

 

/*main.css*/
body{
    background-color: #FFF7DE;
    font-family: 'Nanum Pen Script', cursive;
    margin: 0;
}

.logo-size{
    width: 276px;
    height: 68px;
}

.search-from{
    background-color: white;
    width: 586px;
    height: 30px;
    vertical-align: middle;
}

.input-text{
    width: 516px;
    height: 30px;
    background: none;
    border: 0px;
    resize: none;
}

table{
  margin-left: auto;
  margin-right: auto;
}
#rectangle{
  width:100%;
  height:30px;
  background-color: #FFDE82;
  border: 2px solid black;
}

.ad{
  width: 600px;
  height: 250px;
}
.login_btn{
  width: 330px;
  height: 50px;
}
.share_btn{
  width: 330px;
  height: 120px;
}
.login_sighUp{
  font-size: 23px;
  letter-spacing: 2px;
}
#ad_2{
  color: #d59f6a;
  font-size: 45px;
}
.menus td{
  background-color: white;
  text-align: center;
  font-size: 25px;
  letter-spacing: 3px;
  border: 2px solid;
}

.menu{
  width: 200px;
  height: 200px;
}

 

메인화면

 

#로그인 페이지

<!--login.html-->
<!doctype html>
<html>
<head>
    <title>login page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="login.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    <div>
        <center>
            <img src="images/subLogo.png" class="img-size">
            <from method="post" class="login-from" action="login.php">
                <div>
                    <input id = "id" placeholder="ID" class="input-btn" type="text">
                </div>
                <div>
                    <input id = "pw" placeholder="PW" class="input-btn" type="password">
                </div>
                <div>
                    <input class="login-btn" value="로그인" type="submit">
                </div>
            </from>
        </center>
    </div>
</boody>
</html>

 

/*login.css*/
body{
    background-color: #FFF7DE;
    font-family: 'Nanum Pen Script', cursive;
}

.img-size{
    width: 370.5px;
    height: 86px;
    margin-top: 300px;
}

.login-form{
    margin: 0 auto;
}

.input-btn{
    background-color: white;
    width: 460px;
    height: 48px;
    border: 3px solid black;
    margin: 7px;
    padding: 5px;
    box-sizing: border-box;
}

.login-btn{
    background-color: #FFDE82;
    width: 460px;
    height: 56px;
    border: 3px solid black;
    margin: 7px;
    margin-top: 11px;
    padding: 5px;
    box-sizing: border-box;
}

 

로그인 화면

 

#회원가입 페이지

<!-- signup.html -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>sign-up page</title>
    <link rel="stylesheet" href="login.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    <div>
        <center>
            <img src="images/subLogo.png" class="img-size">
            <from method="post" class="login-from" action="login.php">
                <div>  
                    <input id = "id" placeholder="ID" class="input-btn" type="text">
                </div>
                <div>
                    <input id = "pw" placeholder="PW" class="input-btn" type="password">
                </div>
                <div>
                    <input id = "pw_check" placeholder="PW" class="input-btn" type="password">
                </div>
                <div>
                    <input class="login-btn" value="회원가입" type="submit">
                </div>
            </from>
        </center>
    </div>
</boody>
</html>

 

※회원가입 페이지의 css는 로그인 페이지의 css를 함께 사용함으로 생략합니다!

회원가입 화면

 

#검색결과 페이지

<!-- board.html -->
<!doctype html>
<html>
<head>
    <title>board page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="board.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    <center>
        <from>
          <fieldset class="search-from">
                <input class="input-text" placeholder="레시피를 검색해주세요." type="text">
                <button id="search-btn" type="submit" style="background:none; border:0px;"><img src="images/search_btn.png" class="submit-btn"></button>
          </fieldset>
        </form>

        <table>
            <th>
                <tr style="font-size:30px; border-top:3px solid #FFDE82">
                    <td style="border-top:3px solid #FFDE82">번호</td>
                    <td style="border-top:3px solid #FFDE82">제목</td>
                    <td style="border-top:3px solid #FFDE82">글쓴이</td>
                    <td style="border-top:3px solid #FFDE82">작성일</td>
                </tr>
            </th>
            <tbody>
                <td width="70"></td>
                <td width="500"></td>
                <td width="120"></td>
                <td width="100"></td>
            </tbody>
        </table>
    </center>

</body>
</html>

 

/* board.css */
body{
    background-color: #FFF7DE;
    font-family: 'Nanum Pen Script', cursive;
}

.search-from{
    margin: 30px;
    background-color: white;
    width: 586px;
    height: 30px;
    vertical-align: middle;
}

.input-text{
    width: 516px;
    height: 30px;
    background: none;
    border: 0px;
    resize: none;
}

 

검색화면

 

#게시물 작성 페이지

<!-- write.html -->
<!doctype html>
<html>
<head>
    <title>write page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="write.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    
    <center>
    <from action="main.php" method="post">
    <table class="content-from">
        <tr>
            <td colspan="3"></a></td>
        </tr>
        <tr>
            <td><input type="text" name="title" placeholder="제목" class="title-box"></td>
            <td><button id="image-btn" type="submit" class ="image-btn-box"><img src="images/image_btn.png"></button></td>
            <td><button id="save-btn" class="save-btn-box">저장하기</button></td>
        </tr>
        <tr>
            <td colspan="3">
                <textarea name="content" cols="105" rows="20" placeholder="내용" class="content-box"></textarea>
            </td>
        </tr>
    </table>
    </form>
    </center>
</body>
</html>

 

/* write.css */
body{
    background-color: #FFF7DE;
    font-family: 'Nanum Pen Script', cursive;
    vertical-align: middle;
}

td{
    vertical-align: bottom;
}

.content-from{
    margin-top: 160px;
}

.title-box{
    margin-top: 5px;
    width: 670px;
    height: 50px;
    border: 3px solid black;
    font-weight: bold;
    font-size: large;
}

.image-btn-box{
    margin-left: 310px;
    background: none;
    border: 0px;
}

.save-btn-box{
    width: 220px;
    height: 53px;
    border: 3px solid black;
    background-color: #FFDE82;
    border-radius: 5px;
}

.content-box{
    margin-top: 28px;
    width: 1290px;
    height: 450px;
    border: 3px solid black;
    font-size: 16px;
}

 

게시물 작성 화면

 

저작자표시 비영리 변경금지

'2021 SISS 21기 활동 > 겨울방학 WEB Project' 카테고리의 다른 글

[개발] 글 삭제, 사진 첨부 기능  (1) 2021.02.18
[개발] 글 작성, 수정 기능  (0) 2021.02.04
[생활코딩] : MySQL  (0) 2021.01.15
[생활코딩] : PHP 강의  (0) 2021.01.15
'2021 SISS 21기 활동/겨울방학 WEB Project' Related Articles more