HTML+CSS 솔로의 식당

솔로의 식당

홈페이지 보러가기

설명

이 홈페이지는 1.반응형으로 제작되었으며 이 홈페이지 제작 간 주요 사용 된 코드는 2. flex로 사용 되었다.
간단한 사진들의 배열과 헤더, 섹션, 푸터로 이룬 단조로운 홈페이지는 flex의 사용을 숙달시키기에 좋은 실습이다.

코드

<!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>솔로의 식탁</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div id="container">
        <header>
            <h1>솔로의 식탁</h1>
        </header>
        <section id="menus">
            <div id="menu1"><h2>밥/죽</h2></div>
            <div id="menu2"><h2>국/찌개</h2></div>
            <div id="menu3"><h2>반찬</h2></div>
            <div id="menu4"><h2>일품요리</h2></div>
            <div id="menu5"><h2>음료/칵테일</h2></div>
        </section>
        <footer>
            <p>Copyright&copy; 211106 (주)솔로의 식탁</p>
        </footer>
    </div>
</body>
</html>
/* common */
/*모바일 화면은 대체로 블럭으로 하기에 flex를 설정하지 않았다.  */
.container {
  width: 100%;
}
header {
  width: 100%;
}
header > h1 {
  text-align: center;
  font-size: 2rem;
}
#menus {
  width: 100%;
}

#menus > div {
  border: 1px solid black;
  height: 400px;
  margin-bottom: 15px;
  position: relative;
}
#menus h2 {
  position: absolute;
  padding: 5px;
  bottom: 5%;
  right: 3%;
  color: white;
  text-shadow: 3px 3px 5px black;
  font-size: 1.5rem;
}
#menu1 {
  background: url(../images/dish1.jpg) center no-repeat;
  background-size: cover;
}
#menu2 {
  background: url(../images/dish2.jpg) center no-repeat;
  background-size: cover;
}
#menu3 {
  background: url(../images/dish3.jpg) center no-repeat;
  background-size: cover;
}
#menu4 {
  background: url(../images/dish4.jpg) center no-repeat;
  background-size: cover;
}
#menu5 {
  background: url(../images/dish5.jpg) center no-repeat;
  background-size: cover;
}
footer {
  width: 100%;
  background-color: black;
  height: 100px;
}
footer > p {
  font-size: 1.5em;
  color: white;
  text-align: center;
  line-height: 100px;
  font-variant: small-caps;
}
/* 테블릿 사이즈 */
@media all and (min-width: 768px) {
  /* 여기서부터 section태그인 menus의 display를 flex로 설정*/
  #menus {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #menu1,
  #menu2,
  #menu3,
  #menu4 {
    width: 49%;
  }
  /* menu5만 width 100%로 설정하여 밑으로 내려오게 하였다. */
  #menu5 {
    width: 100%;
  }
}

@media all and (min-width: 1000px) {
  /* pc화면에서는 3 2 구조로 앞줄에 3개의 메뉴를 배치하기 위해
  너비를 적절히 설정하였다. */
  #menus > div {
    width: 32%;
  }
  /* flex grow를 2로 설정하여 메뉴 5만 2배로 커지게 했고
  왼쪽 마진을 적절히 설정하여 간격을 유지했다. */
  #menu5 {
    /* grow를 사용하여 다른 flex들의 크기의 2배로 설정하여 공간을 차지 하였다. */
    /* flex-grow: 2;
    flex-basis: 0;
    flex-shrink: 2; */
    flex: 2 2 0;
    margin-left: 1.8%;
  }
}

사이트 미리 보기

[Node.js]2021.01.04
Map의 값 추출

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage