휴먼교육센터 개발자과정 61일차

조하영·2022년 10월 31일
0

휴먼교육센터 코딩공부

목록 보기
48/66
post-thumbnail

html css 시멘틱 태그 사용해서 구역 나누기
css파일 외부링크로 관리

메인화면

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>조하영의 개발일기</title>
  <link rel="stylesheet" href="./css/all.css">
</head>

<body>
  <div id=main>
    <header>
      <img src="./img/main.png">
    </header>
    <nav>
      <ul>
        <li><a href="index.html">[home]</a></li>
        <li><a href="#">[Html5]</a></li>
        <li><a href="#">[Css3]</a></li>
        <li><a href="#">[JavaScript]</a></li>
      </ul>
    </nav>
    <section>
      <div id="s1">
        <h1>오늘의 공부</h1>
        <span> 시멘틱 태그를 사용한 영역 분할</span>
      </div>
      <div id="s2">
        s2
      </div>
    </section>
    <div id="loginBox">
      <table border="1">
        <tr>
          <td>아이디</td>
          <td><input type="text" name="id" size="10"></td>
        </tr>
        <tr>
          <td>비밀번호</td>
          <td><input type="text" name="pass" size="10"></td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" value="Login">
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <a href="memberJoin.html">[신규가입]</a>
          </td>
        </tr>
      </table>
    </div>
    <div id="etc">

    </div>
    <footer>
      <span>개발자 : 조하영</span>
    </footer>
  </div>
</body>

</html>

회원가입 화면

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>회원가입</title>
  <link rel="stylesheet" href="./css/all.css">
  <link rel="stylesheet" href="./css/table_input.css">

</head>

<body>
  <div id=main>
    <header>
      <img src="./img/main.png">
    </header>
    <nav>
      <ul>
        <li><a href="index.html">[home]</a></li>
        <li><a href="#">[Html5]</a></li>
        <li><a href="#">[Css3]</a></li>
        <li><a href="#">[JavaScript]</a></li>
      </ul>
    </nav>
    <div id="table_input_form">
      <h1>회원가입</h1>
      <table border="1">
        <tr>
          <td>아이디</td>
          <td><input type="text"></td>
        </tr>
        <tr>
          <td>비밀번호</td>
          <td><input type="text"></td>
        </tr>
        <tr>
          <td>아이디</td>
          <td><input type="text"></td>
        </tr>
      </table>

    </div>
    <footer>
      <span>개발자 : 조하영</span>
    </footer>
  </div>
</body>

</html>

css파일 1

body {
  background-color: aqua;
  margin: 0;
}

#main {
  width: 1024px;
  height: 900px;
  background-color: blueviolet;
  margin: 0px auto;
}

header {
  width: 100%;
  height: 100px;
  /* display: block; 블록은 가로세로의 크기를 지정할 수 있다 */
  float: left;
  border-bottom: 2px solid;
}

nav {
  width: 100%;
  height: 50px;
  background-color: darkgreen;
  float: left;
}

nav ul li {
  display: inline;
  margin-left: 20px;
}

section {
  width: 80%;
  height: 500px;
  background-color: cadetblue;
  float: left;
}

#loginBox {
  width: 20%;
  height: 200px;
  background-color: chartreuse;
  float: left;

}

#loginBox table{
  margin: 0px auto;
  text-align: center;
  border-collapse: collapse;
  margin-top: 10px;
}

#loginBox table a{
  text-decoration: none;
  color: black;
}

#etc {
  width: 20%;
  height: 300px;
  background-color: blue;
  float: left;
}

footer {
  width: 100%;
  height: 70px;
  background-color: coral;
  float: left;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

nav a {
  text-decoration: none;
  color: white;
}

nav a:hover {
  background-color: gray;
}

#s1{
  width: 50%;
  height: 500px;
  background-color: red;
  float: left;
  /* padding-left: 20px; */
}

#s1 *{
  margin-left: 20px;
}

#s2{
  width: 50%;
  height: 500px;
  background-color: yellow;
  float: left;
}

css파일 2

#table_input_form{
  width: 800px;
  text-align: center;
  background-color: chartreuse;
  margin: 0px auto;
  padding-top: 20px;
  height: 600px;
}

오후 실습!

화면 똑같이 따라 만들기

메인화면

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DAYUN ART</title>
  <link rel="stylesheet" href="./css/all.css">
</head>

<body>
  <div id="main">
    <header>
      <div class="logo1">
        <a href="index.html">
          <h1>DAYUN <span style="color: rgb(57, 59, 59);">ART</span></h1>
        </a>
      </div>
      <div id="search">
        <span style="color: rgb(86, 146, 27);">SAERCH</span>
        <input type="text" name="inputSearch" size="8" style="border: 0; border-bottom: 1px rgb(138, 138, 138) solid; background-color: transparent;"> 
        <input type="image" img src="./img/lens.png" style="width:18px; height:18px;" name="search"> 
      </div>
      <div class="member">
        <ul>
          <li><a class="green" href="#">로그인</a></li>
          <li><a class="green" href="join_from.html">회원가입</a></li>
          <li><a href="#">마이페이지</a></li>
          <li><a href="#">이용안내</a></li>
          <li><a href="#">고객센터</a></li>
        </ul>
      </div>
    </header>
    <nav>
      <ul>
        <li><a href="#">상세 페이지</a></li>
        <li><a href="#">장바구니</a></li>
        <li><a href="#">고객 갤러리</a></li>
        <li><a href="#">주문배송</a></li>
        <li><a href="#">자주 하는 질문</a></li>
      </ul>
    </nav>
    <section>
      <div id="sideBar">
        <table>
          <tr>
            <th>CATEGORY ITEM</th>
          </tr>
          <tr>
            <td><a href="#">생활 아트</a></td>
          </tr>
          <tr>
            <td><a href="#">캔버스 아트</a></td>
          </tr>
          <tr>
            <td><a href="#">사진 벽지</a></td>
          </tr>
          <tr>
            <td><a href="#">창문형/현관문형</a></td>
          </tr>
          <tr>
            <td><a href="#">포인트 벽지</a></td>
          </tr>
          <tr>
            <td><a href="#">세계지도</a></td>
          </tr>
          <tr>
            <td><a href="#">엔티크 세계지도 벽지</a></td>
          </tr>
          <tr>
            <td><a href="#">입체 세계지도 벽지</a></td>
          </tr>
          <tr>
            <td><a href="#">어린이방 세계지도</a></td>
          </tr>
          <tr>
            <td><a href="#">족자형 롤스크린</a></td>
          </tr>
          <tr>
            <td><a href="#">맞춤제작 결제창</a></td>
          </tr>

        </table>
      </div>
      <div id="s1">
        <img src="./img/zebra.PNG">
      </div>
      <div id="notice">
        <div>
          <b>NOTICE</b>
        </div>
        <ul>
          <li><a href="#">폭설로 인한 배송지연 안내</a></li>
          <li><a href="#">폭설로 인한 배송지연 안내</a></li>
          <li><a href="#">폭설로 인한 배송지연 안내</a></li>
          <li><a href="#">폭설로 인한 배송지연 안내</a></li>
          <li><a href="#">폭설로 인한 배송지연 안내</a></li>
          <li><a href="#">폭설로 인한 배송지연 안내</a></li>
        </ul>
      </div>
      <div id="event">
        <div>
          <b>THE WEEK'S EVENT</b>
        </div>
        <p>이번주의 <b style="color: rgb(86, 146, 27);">이벤트 상품</b>을 확인하세요!</p>
        <a href="#"><img src="./img/side.png"></a>
      </div>
    </section>
    <footer>
      <p>판매자 : 조하영</p>
      <p>상호 : 다연아트</p>
      <p>주소 : 경기도 수원시 팔달구 302-1 1층</p>
      <p>전화번호 : 031-344-1231</p>
      <p>사업자등록번호 : 120-31-122314</p>
    </footer>

  </div>
</body>

</html>

회원가입 화면

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DAYUN ART</title>
  <link rel="stylesheet" href="./css/all.css">
  <style>
    section {
      width: 1024px;
      height: 460px;
      float: left;
    }

    table {
      margin-top: 40px;
      margin-left: 340px;
      width: 320px;
    }

    table td {
      padding-left: 9px;
    }

    table th{
      font-size: xx-large;
      color: rgb(86, 146, 27);
      padding-bottom: 30px;
    }
  </style>
</head>

<body>
  <div id="main">
    <header>
      <div class="logo1">
        <a href="index.html">
          <h1>DAYUN <span style="color: rgb(57, 59, 59);">ART</span></h1>
        </a>
      </div>

      <div class="member">
        <ul>
          <li><a class="green" href="#">로그인</a></li>
          <li><a class="green" href="join_from.html">회원가입</a></li>
          <li><a href="#">마이페이지</a></li>
          <li><a href="#">이용안내</a></li>
          <li><a href="#">고객센터</a></li>
        </ul>
      </div>
    </header>
    <nav>
      <ul>
        <li><a href="#">상세 페이지</a></li>
        <li><a href="#">장바구니</a></li>
        <li><a href="#">고객 갤러리</a></li>
        <li><a href="#">주문배송</a></li>
        <li><a href="#">자주 하는 질문</a></li>
      </ul>
    </nav>
    <section>
      <form action="memberJoin" method="post">
        <table>
          <tr>
            <th colspan="2">회원가입</th>
          </tr>
          <tr>
            <td>아이디</td>
            <td>
              <input type="text" name="id" size="10">
              <input type="button" value="중복체크">
            </td>

          </tr>
          <tr>
            <td>비밀번호</td>
            <td><input type="password" name="pwd" size="10"></td>
          </tr>
          <tr>
            <td>비밀번호 확인</td>
            <td><input type="password" name="chkPwd" size="10"></td>
          </tr>
          <tr>
            <td>성 명</td>
            <td><input type="text" name="name" size="10"></td>
          </tr>
          <tr>
            <td>성 별</td>
            <td>
              <input type="radio" name="gender">남
              <input type="radio" name="gender">여
            </td>
          </tr>
          <tr>
            <td>전화번호</td>
            <td>
              010 -
              <input type="text" name="tel1" size="4"> -
              <input type="text" name="tel2" size="4">
            </td>
          </tr>
          <tr>
            <td>주 소</td>
            <td>
              <input type="text" name="addr" size="20">
            </td>
          </tr>
        </table>
      </form>

    </section>
    <footer>
      <p>판매자 : 조하영</p>
      <p>상호 : 다연아트</p>
      <p>주소 : 경기도 수원시 팔달구 302-1 1층</p>
      <p>전화번호 : 031-344-1231</p>
      <p>사업자등록번호 : 120-31-122314</p>
    </footer>
  </div>
</body>

css파일

#main {
  margin: 0 auto;
  width: 1024px;
  height: 800px;
  background-color: rgb(231, 231, 231);
}

header {
  width: 1024px;
  height: 100px;
  float: left;
}

nav {
  width: 1024px;
  height: 50px;
  background-color: rgb(57, 59, 59);
  float: left;
}

nav ul li {
  display: inline;

  margin-left: 80px;
}

nav ul li a:hover {
  color: rgb(86, 146, 27);
}

nav ul li a {
  text-decoration: none;
  color: rgb(236, 236, 236);
}

.logo1 {
  float: left;
  padding-left: 20px;
  padding-top: 5px;
}

.logo1 a{
  text-decoration: none;
  color: rgb(86, 146, 27);
}

.member {
  padding-top: 37px;
  padding-right: 30px;
  float: right;
  font-size: small;
}

header div ul li {
  padding-right: 10px;
  display: inline;
}

.green {
  color: rgb(86, 146, 27);
}

header div ul li a {
  color: rgb(57, 59, 59);
  text-decoration: none;
}

#search{
  float: left;
  margin-left: 100px;
  margin-top: 40px;
  font-size: small;
}

#sideBar {
  margin-left: 20px;
  margin-top: 20px;
  width: 18%;
  height: 450px;
  float: left;
  box-sizing: border-box;
}

#sideBar th {
  background-color: rgb(86, 146, 27);
  color: rgb(236, 236, 236);
}

#sideBar table a {
  text-decoration: none;
  color: rgb(57, 59, 59);
}

table {
  width: 100%;
  float: left;
}

table th {
  height: 40px;
  font-size: small;
}

table td {
  text-decoration: none;
  height: 30px;
  padding-left: 30px;
  font-size: small;
  color: rgb(141, 141, 141);
  border-bottom: 1px rgb(167, 168, 168) solid;
}

#sideBar td:hover {
  background-color: rgb(189, 188, 188);
}

#s1 {
  width: 535px;
  height: 400px;
  float: left;
  margin-top: 22px;
}

#notice {
  width: 26%;
  height: 170px;
  margin-top: 22px;
  float: left;
  border: 1px rgb(167, 168, 168) solid;
  background-color: white;
  padding-top: 5px;
  font-size: small;
  box-sizing: border-box;
}

#notice>div {
  font-size: small;
  height: 30px;
  border-bottom: 1px rgb(167, 168, 168) solid;
}

#notice b {
  margin-left: 15px;
  color: rgb(86, 146, 27);
}



#notice ul li::marker {
  color: rgb(37, 201, 146);
}

#notice ul li a {
  text-decoration: none;
  color: rgb(57, 59, 59);
}

#event {
  width: 26%;
  height: 215px;
  margin-top: 15px;
  float: left;
  border: 1px rgb(167, 168, 168) solid;
  background-color: white;
  padding-top: 5px;
  font-size: small;
  box-sizing: border-box;
}

#event>div {
  font-size: small;
  height: 30px;
  border-bottom: 1px rgb(167, 168, 168) solid;
}

#event p {
  padding-left: 10px;
  margin-top: 4px;
  margin-bottom: 7px;
}

#event img {
  margin-left: 30px;
  ;
}

#event>div>b {
  margin-left: 15px;
  color: rgb(86, 146, 27);
}

footer{
  width: 1024px;
  height: 90px;
  float: left;
  background-color: rgb(57, 59, 59);
 color: rgb(219, 223, 223);
  font-size: x-small;
  padding-left: 20px;
  padding-top: 10px;
  box-sizing: border-box;
}

footer p{
  margin: 0px;
}

</html>
profile
조하영
공부하는 개발자
이전 포스트

휴먼교육센터 개발자과정 60일차

다음 포스트

휴먼교육센터 개발자과정 62~63일차

0개의 댓글