HTML+CSS 카페(flex버전)

카페(flex버전)

기존의 카페웹페이지는 div태그를 float하여 만들었지만 이번에는 flex를 활용하여 만들었다. flex를 이용하기 위해 기존의 html을 조금 수정하였으며 이는 flex를 하기 위해 div태그안으로 이동, section 태그들을 감싸는 div태그 추가가 있겠다.
flex는 기본적으로 box형태로 움직이기 때문에 div태그의 위치와 무엇을 감싸는지에 따라 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>
    <!-- 전체를 감싸는 container, id로 만들었다. -->
    <div id="container">
        <!-- 헤드 -->
        <header>
            <!-- nav로 리스트화 하고 그안에 a태그로 연결한다. -->
            <nav>
                <ul>
                    <li><a href="#intro">카페소개</a></li>
                    <li><a href="#map">오시는 길</a></li>
                    <li><a href="#choice">이달의 추천</a></li>
                </ul>
            </nav>
        </header>
        <!-- 헤더 아래로 flex를 적용하기 위해 div로 감싸 만들었다. -->
    <div class="flexible">
        <!-- 카페소개 -->
        <section id="intro" >
            <div class="page-title">
                    <h1>카페 소개</h1>
            </div>       
            <div class="content">
                <div class="photo">
                    <img src="./images/coffee.jpg" alt="커피">
                </div>
                <!-- 각 text 클래스들을 content div안으로 옮겼다. -->
                <div class="text">
                    <p>영업 시간 : 오전 9시 ~ 밤 10시</p>
                    <p>휴무 : 매주 수요일<i><small>(수요일이 공휴일인 경우 수요일 영업, 다음날 휴무)</small></i></p>    
                </div>
            </div>
        </section>
        
        <!-- 오시는길 -->
        <section id="map">
            <div class="page-title">
                <h1>오시는 길</h1>
            </div>       
            <div class="content">
                <div class="photo">
                    <img src="./images/map.jpg" alt="지도">
                </div>
                <div class="text">
                    <p>서귀포시 안덕면 사계리 000 - 000</p>
                    <p>제주 올레 10코스 산방산 근처</p>
                </div>
            </div>
        </section>
        
        <!-- 이달의 추천 -->
        <section id="choice">
            <div class="page-title">
                <h1>이달의 추천</h1>
            </div>       
            <div class="content">
                <div class="photo">
                    <img src="./images/ice.jpg" alt="추천">
                </div>
                <div class="text">
                    <h2>핸드드립 아이스 커피</h2>
                    <ol>
                        <li>1인분 기준으로 서버에 각 얼음 5조각(한조각은 20cc)넣고 추출을 시작한다.</li>
                        <li>평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
                        <li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
                    </ol>
                </div>
            </div>
        </section>
    </div>
        
        
        <!-- 푸터 -->
        <footer>
            <p>My times with Coffee</p>
        </footer>
    </div>
</body>
</html>
@font-face {
  font-family: "twayair";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/twayair.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "twayair";
}
/* 모바일 버전 */
#container {
  width: 100%;
  margin: 0 auto;
}
nav {
  height: 50px;
  background-color: black;
}
nav > ul {
  list-style: none;
  margin: 0;
  padding: 3px;
}
nav > ul > li {
  display: inline-block;
  margin: 15px 22px;
}
a {
  text-decoration: none;
}
/* a태그의 글자 색을 흰색으로 하기 위해 설정 */
a:link,
a:visited {
  color: white;
}
a:active,
a:hover {
  color: yellow;
}
/* 모바일 버전에서 높이 */
header {
  width: 100%;
  height: 300px;
  background: url(/images/header.jpg) no-repeat center;
  background-size: cover;
  margin: 0;
}
.photo {
  display: none;
}
section {
  display: flex;
  flex-direction: column;
}
#intro,
#map {
  height: 10rem;
}

.page-title > h1 {
  margin-top: 2.5rem;
  margin-left: 1rem;
  margin-bottom: 0.2rem;
}
.text {
  margin-left: 2.5rem;
  margin-right: 1.5rem;
}

#container section:nth-child(even) {
  background-color: gold;
}
footer {
  background-color: black;
  width: 100%;
  height: 100px;
  position: relative;
}
footer > p {
  color: white;
  text-align: center;
  line-height: 100px;
}

/* 테블릿 버전 */
@media screen and (min-width: 700px) {
  header {
    height: 400px;
  }
  .flexible {
    display: flex;
    flex-wrap: wrap;
  }
  #intro,
  #map {
    width: 50%;
    height: 200px;
  }
  #choice {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  #container {
    width: 1000px;
    margin: 0 auto;
  }
  header {
    height: 450px;
  }
  #intro,
  #map {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .content {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .title {
    width: 100%;
  }
  #intro .photo,
  #map .photo {
    display: block;
    margin-top: 2rem;
    margin-left: 5rem;
    margin-bottom: 5rem;
  }
  #intro .text {
    margin-top: 3rem;
    margin-right: 5rem;
    margin-bottom: 5rem;
  }
  #map .text {
    margin-top: 4rem;
    margin-right: 15.5rem;
    margin-bottom: 5rem;
  }
  #choice .photo {
    display: block;
    order: 2;
  }
  #choice .photo img {
    border: 1px solid white;
    border-radius: 50%;
    margin-bottom: 3rem;
    margin-right: 5.5rem;
  }
  #choice .text {
    width: 40%;
    margin-top: 4rem;
  }
  .footer {
    width: 100%;
  }
}

사이트 바로가기

사이트 미리보기

[TIL] Styled-Component
LinkedList (2)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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