[HTML5 & CSS3] 실습 - 고양이 자랑 페이지 만들기

조건)

폼으로 제작할것!

들어갈 내용▼

고양이 이름,

주소선택(서울, 부산, 대구, 광주, 인천),

성별,

좋아하는 것(생선, 고기, 우유, 통조림),

사진 첨부,

주인 이름,

메일,

상세 설명

<소스>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>고양이 자랑</title>
<style>
   * {
      margin: 0; /* 외부 여백 */
      padding: 0; /* 테두리와 내용 사이의 여백 */
      box-sizing: border-box;
   }

   #container {
      width: 100%; /* 너비 */
   }

   header {
      width: 100%; /* 너비 */
      height: 80px; /* 높이 */
      margin: 0; /* 외부 여백 */
   }

   a {
      text-decoration: none;  
   }

   nav {
      height: 50px; /* 높이 */
      background:skyblue; /* 배경 색 */
   }

   #main-nav {
      list-style: none;
      margin-bottom: 10px; /* 요소 주변 여백 */
      padding: 10px; /* 테두리와 내용 사이의 여백 */
      text-align: center; /* 가운데 정렬 */
   }

   #main-nav li {
      display: inline-block;      
      color: #fff;
      font-family: "맑은 고딕", 돋움;
      font-size: 0.9em;
      margin: 5px 15px; /* 외부 여백 */
   }

   nav a:link, a:visited {
      color: #fff;
   }

   nav a:active {
      color:skyblue;
   }

   nav > ul > li {
      width: 15%; /* 너비 */
      height: 40px; /* 높이 */
      margin-top: 30px; /* 요소 주변 여백 */
      position:relative; /* 원래 자신이 있어야될 위치를 기준으로 배치 */
      float:center; /* 정렬 */
   }

   nav > ul > li > a {
      display: block; /* 형태 */
      width: 25%px; /* 너비 */
      height: 40px; /* 높이 */
      text-align: center; /* 가운데 정렬 */
      line-height: 40px; /* 줄 간격 */
      font-size: 18px; /* 글자 크기 */
      color:black /* 글자 색 */
   }

   nav > ul > li > a:hover {
      background-color: gray; /* 배경 색 */
      color: floralwhite; 
   }   

   body {
      margin: 0; /* 외부 여백 */
      height: 100%; /* 높이 */
      background: whitesmoke; /* 배경 색 */
   }

   #wrapper {
      position: relative; /* 원래 자신이 있어야될 위치를 기준으로 배치 */
      height: 100%; /* 높이 */
   }

   #content {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      width: 460px; /* 너비 */
   }

   h3 {
      margin: 19px 0 8px; /* 외부 여백 */
      font-size: 14px; /* 글자 크기 */
      font-weight: 700;
   }

   .box {
      display: block; /* 형태 */
      width: 100%; /* 너비 */
      height: 51px; /* 높이 */
      border: solid 1px dimgray;
      padding: 10px 14px 10px 14px; /* 테두리와 내용 사이의 여백 */
      box-sizing: border-box;
      background: #fff; /* 배경 색 */
      position: relative; /* 원래 자신이 있어야될 위치를 기준으로 배치 */
   }

   .int {
      display: block; /* 형태 */
      position: relative;
      width: 100%; /* 너비 */
      height: 29px; /* 높이 */
      border: none;
      background: #fff; /* 배경 색 */
      font-size: 15px; /* 글자 크기 */
   }

   input {
      font-family: '돋움';
   }

   .box.int_id {
      padding-right: 110px; /* 테두리와 내용 사이의 여백 */
   }

   select {
      width: 100%; /* 너비 */
      height: 29px; /* 높이 */
      font-size: 15px; /* 글자 크기 */
      background: #fff 100% 50% no-repeat;
      background-size: 20px 8px;
      -webkit-appearance: none;
      display: inline-block; /* 형태 */
      text-align: start;
      border: none;
      cursor: default;
      font-family: '돋움';
   }

   .button_area {
      margin: 30px 0 91px; /* 외부 여백 */
   }

   #button {
      width: 100%; /* 너비 */
      padding: 21px 0 17px; /* 테두리와 내용 사이의 여백 */
      border: 0;
      cursor: pointer;
      color: #fff;
      background-color: cornflowerblue;
      font-weight: 400;
      font-family: '돋움';
   }

   .button {
      cursor: pointer;
      background:gray; /* 배경 색 */
      text-decoration: none; /* 글자 꾸밈 */
      color: #666; /* 색깔 */
   }

   .curl-top-left {
      display: inline-block; /* 형태 */
      position: relative;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   }

   .curl-top-left:before {
      pointer-events: none;
      position: absolute;
      content: '';
      height: 0; /* 높이 */
      width: 0; /* 너비 */
      top: 0;
      left: 0;
      background: white; /* 배경 색 */
   /* IE9 */
      background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
   /*For IE7-8-9*/
      z-index: 1000;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
      transition-duration: 0.3s;
      transition-property: width height;
   }

   .curl-top-left:hover:before {
      width: 16px; /* 너비 */
      height: 16px; /* 높이 */
   }   
</style>
</head>
<body>
<div id="container">
<header>
<nav>
   <ul id="main-nav">
      <li><a href='#'><b>사이트 소개</b></a></li>                  
      <li><a href='catinfo.html'><b>고양이 분양</b></a></li>
      <li><a href='catshow.html'><h1>고양이 자랑</h1></a></li>
      <li><a href='#'><b>고객센터</b></a></li>
   </ul>
</nav>
</header>
<div id="wrapper">
<form id="form" action="-" method="post"> 
<div id="content">   
   <div>
      <h3 class="join_title">
         <label for="cat_name">이름</label>
      </h3>
      <span class="box int_id">
         <input type="text" id="cat_name" class="int" name="cat_name">
      </span>
   </div>
                    
   <div>
      <h3 class="join_title"><label for="add">주소</label></h3>
         <span class="box">
            <select id="add" class="sel" name = "add">
               <option>주소</option>
               <option value="seoul">서울</option>
               <option value="daejeon">대전</option>
               <option value="daegu">대구</option>
               <option value="gwangju">광주</option>
               <option value="incheon">인천</option>
            </select>                            
         </span>
   </div>

   <div>
      <h3 class="join_title"><label for="gender">성별</label></h3>
         <span class="box gender_code">
            <select id="gender" class="sel" name="catsgender">
               <option>성별</option>
               <option value="M">남자</option>
               <option value="F">여자</option>
            </select>                            
         </span>
   </div>
                    
   <div>
      <h3 class="join_title"><label for="gender">좋아하는 것</label></h3>
         <span class="box gender_code">
            <select id="gender" class="sel" name="catslike">
               <option>좋아하는 것</option>
               <option value="fish">생선</option>
               <option value="meat">고기</option>
               <option value="milk">우유</option>
               <option value="cannedfood">통조림</option>
            </select>                            
         </span>
   </div>
                    
   <div>
      <h3 class="join_title">
         <label for="id">주인이름</label>
      </h3>
         <span class="box int_id">
            <input type="text" id="id" class="int" maxlength="20" name="master_name">
         </span>
   </div>
                    
   <div>
      <h3 class="join_title">
         <label for="id">메일</label>
      </h3>
         <span class="box int_id">
            <input type="text" id="email" class="int" name="email">
         </span>
   </div>
                    
   <div>
      <h3 class="join_title">
         <label for="id">상세설명</label>
      </h3>
         <textarea rows="20" cols="65" name="content"></textarea>
   </div>
                    
   <div>
      <h3 class="join_title">
         <label for="file">파일첨부</label>
      </h3>
         <input type="file" name="file" id="file">
   </div>

   <div class="button_area">
      <button type="submit" id="button">
         <span><b>자랑하기</b></span>
      </button>
   </div>
</div> 
</form>
</div> 
</body>
</html>

저작자표시

'HTML5 & CSS3' 카테고리의 다른 글

[생활코딩-WEB1] 웹사이트 완성 (0)	2021.06.20
[HTML5 & CSS3] 실습 - 고양이 분양 페이지 (심화) (0)	2021.02.15
[HTML5 & CSS3] 실습 - 고양이 분양 페이지 만들기 (0)	2021.02.15
[HTML5 & CSS3] 과제 (0)	2021.02.15
[HTML5 & CSS3] 플렉스 박스 항목 배치를 위한 속성들 (2)	2021.02.15

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 실습 - 고양이 자랑 페이지 만들기

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] 실습 - 고양이 자랑 페이지 만들기

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바