하루

모각코 2일차 (19.07.02) 웹프로그래밍 공부 본문

19년 하계 모.각.코

모각코 2일차 (19.07.02) 웹프로그래밍 공부

따뜻한라떼한잔 2019. 7. 2. 17:00

부코_웹_PJT1_자기소개페이지.pdf
0.64MB

메인화면을 구성하고 css를 입히는 작업까지 이번 시간에 해보았다.

Html로 body를 header, section, footer로 영역을 나누고 navigation을 float로 구성하고 section에 이미지와 내용을 적어 위와 같은 화면이 나오도록 구성했다.

HTML 부분 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>mypage</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <header>
    <div class="wrap">
      <nav>
        <ul class="menu">
          <a href = "http://localhost:8080/aboutme/today"><li class="time">몇시에요</li></as>
          <a href = "./picture.html"><li class="picture">내사진</li></a>
          <a href = "./introduction.html"><li class="introduction">자기소개</li></a>
          <a href = "./index.html"><li class="home">홈</li></a>
        </ul>
      </nav>
    </div>
  </header>
      <section>
        <h1>웹프론트엔드 개발자~! crong<br></h1>
        <p>함께 개발하고 같이 성장하고 싶어요<br>
        대전광역시 서구 둔산동 어딘가 살고 있어요!</p>

  <a href = "./picture.html"><button>내사진</button></a>
  <a href = "./introduction.html"><button>자기소개</button></a>
<div class=map>
<img src="./map.jpg">
</div>
      </section>

  <footer>
      <p>
        Copyright @codesquad.kr<br>
        http://github.com/crong
      </p>
  </footer>

</body>

</html>

css 부분 

.time, .picture, .introduction, .home{
  float:right;
  width:80px;
  height:20px;
  list-style: none;
  margin : 5px;
  padding : 5px;
  color : #030615;
  font-size: 13px;
  background-color: #12afa0;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, .3);
}
.wrap{
  overflow:hidden;
}
ul:after{
  content:"";
  clear:both;
  display:block;
}


body{
  background-color: #009688;
  text-align: center;
}
section{
  width:100%;
  height:600px;
}
header, footer{
  background-color: #fff;
  width:100%;
  height:60px;
}

.map img{
  text-align : center;
  border:none;
  width:400px;
  height:350px;
}



nav,ul{
  overflow:hidden;
}

ul{
  margin:10px;
}
section{
  text-align: center;
  display:table;
    margin: 10px 0px 10px 0px;
    background-color: #fff;

}


button {
    width:100px;
    background-color: #12afa0;
    border: none;
    color:#fff;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px;
    cursor: pointer;
    border-radius:10px;
}


button:hover {
    background-color: #009688;
}


footer{
    background-color: #fff;
      display:table;
      margin : 0 auto;
}

footer > p{
  display:table-cell;
  vertical-align:middle;
}

'19년 하계 모.각.코' 카테고리의 다른 글

모각코 3일차 (19.07.05) 웹프로그래밍 공부  (0) 2019.07.05
2019-07-05 하계모각코 세번째 차시 목표  (0) 2019.07.05
2019-07-02 하계모각코 두번째 차시 목표  (0) 2019.07.02
모각코 1일차 (19.06.28) 알고리즘 공부  (0) 2019.06.28
2019-06-28 하계모각코 첫번째 차시 목표  (0) 2019.06.28
'19년 하계 모.각.코' Related Articles more
Comments