본문 바로가기
부트캠프

[TIL] 유데미X사람인 취업 부트캠프 6일차 / 반응형 웹 제작, 유닛과 미디어 쿼리

by 상똥 2023. 12. 20.

[1. 오늘 배운 것]

1. 반응형 웹 기반 준비

-html

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Food</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="main-header">
        <a href="index.html" id="logo">WebFood</a>
        <nav>
            <ul>
                <li>
                    <a href="">Browse Meals</a>
                </li>
                <li>
                    <a href="">Browse Meals</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Browse Our Delicious Meals</h1>
        <section id="latest-products">
            <ul>
                <li class="food-item">
                    <article>
                        <img src="images/risotto.jpg" alt="Risotto">
                        <div class="food-item-content">
                            <h2>Risotto with Tiger Prawns</h2>
                            <a href="" class="btn">Add to cart</a>
                        </div>
                    </article>
                </li>
                <li class="food-item">
                    <article>
                        <img src="/images/cheeseburgers.jpg" alt="burger">
                        <div class="food-item-content">
                            <h2>Cheese burgers</h2>
                            <a href="" class="btn">Add to cart</a>
                        </div> 
                    </article>
                </li>
            </ul>
        </section>
    </main>
    <footer></footer>
</body>
</html>

- css

더보기 
body {
    font-family: "Open Sans", sans-serif;
    margin: 0;
    background-color: rgb(44, 41, 38);
}

a {
    text-decoration: none;
}

#main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(29, 26, 24);
    padding: 0 20px;
}

#logo {
    font-size: 24px;
    font-weight: bold;
    color: rgb(238, 164, 80);
    text-transform: uppercase;
}

#main-header ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

#main-header li {
    margin: 0 16px;
}

#main-header nav a {
    color: rgb(185, 131, 31);
    font-size: 20px;
}

#main-header nav a:hover {
    color: rgb(228, 163, 44);
}

main h1 {
    text-align: center;
    color: rgb(238, 164, 80);
    font-size: 48px;
}

#latest-products {
    width: 80%;
    margin: 50px auto;
}

#latest-products ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.food-item {
    background-color: rgb(228, 206, 182);
    border-radius: 6px;
    overflow: hidden;
}

.food-item img {
    height: 280px;
    width: 100%;
    object-fit: cover;
}

.food-item-content {
    padding: 16px;
    text-align: center;
}

.btn {
    background-color: rgb(228, 157, 44);
    color: white;
    border-radius: 4px;
    padding: 8px 24px;
}

.btn:hover {
    background-color: rgb(221, 134, 34);
}

 

2. 반응형 웹 디자인이란

- 웹의 형태에 따라 화면이 다르게 보일 수 있는 디자인

- 모바일화면 등에 따라 최적화될 수 있는 디자인

 

3. 픽셀 단위

- 이해하기 쉽지만, 사용자 포커스가 제한되어 있음

- 확장이 제한되어있음

 

4. 유닛의 비교

 

5. em, rem 적용

- 기본 폰트 사이즈 : 16px

- 폰트 사이즈의 비교 : 32px = 200% = 2em

- rem 요소는 항상 html 속성의 영향만 받음

- border-radius같은 경우에는 px값을 유지하는 것을 추천!

- css 수정

더보기 
body {
    font-family: "Open Sans", sans-serif;
    margin: 0;
    background-color: rgb(44, 41, 38);
}

a {
    text-decoration: none;
}

#main-header {
    /*height: 80px;*/
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(29, 26, 24);
    /*padding: 0 20px;*/
    padding: 0 5%;
}

#logo {
    /*font-size: 24px;*/
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(238, 164, 80);
    text-transform: uppercase;
}

#main-header ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

#main-header li {
    /*margin: 0 16px;*/
    margin: 0 1rem;
}

#main-header nav a {
    color: rgb(185, 131, 31);
    /*font-size: 20px;*/
    font-size: 1.25rem;
}

#main-header nav a:hover {
    color: rgb(228, 163, 44);
}

main h1 {
    text-align: center;
    color: rgb(238, 164, 80);
    /*font-size: 48px;*/
    font-size: 3rem;
}

#latest-products {
    width: 80%;
    /*margin: 50px auto;*/
    margin: 2rem auto;
}

#latest-products ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*gap: 16px;*/
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.food-item {
    background-color: rgb(228, 206, 182);
    border-radius: 6px;
    overflow: hidden;
}

.food-item img {
    /*height: 240px;*/
    height: 15rem;
    width: 100%;
    object-fit: cover;
    list-style: none;
}

.food-item-content {
    /*padding: 16px;*/
    padding: 1em;
    text-align: center;
}

.btn {
    background-color: rgb(228, 157, 44);
    color: white;
    border-radius: 4px;
    /*padding: 8px 24px;*/
    padding: 0.5rem 1.5rem;
}

.btn:hover {
    background-color: rgb(221, 134, 34);
}

 

6. 데스크탑 디자인과 모바일 디자인 비교

- 데스크탑 : traditional / office based / feature-rich website

- 모바일 : functional / lifestyle, news focused / content-first

 

7. 미디어 쿼리 이해하기

- @media를 통해 반응형 웹사이트를 구현할 수 있다

- 한계점

 

8. 프로젝트에 미디어 쿼리 추가

@media (max-width:48rem){
    #main-header nav{
        display: none;
    }
    main h1{
        font-size: 1.5rem;
    }
    #latest-products ul{
        grid-template-columns: 100%;
    }
}

 

- 결과

 

9. 사이드바 구현 (햄버거 아이콘)

.menu-btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.menu-btn span {
    width: 100%;
    height: 3px;
    background-color: white;
}

 

 

10. 사이드바 구현

- html (main 아래)

<aisde id="side-drawer">
        <nav>
            <ul>
                <li>
                    <a href="">Browse Meals</a>
                </li>
                <li>
                    <a href="">My Orders</a>
                </li>
            </ul>
        </nav>
    </aisde>

- css

#side-drawer{
    width:100%;
    height: 100%;
    background-color: rgb(29, 26, 27);
    position: fixed;
    top:0;
    left: 0;
}

#side-drawer ul{
    list-style: none;
    margin: 0;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#side-drawer li{
    margin: 1rem 0;
}

#side-drawer a{
    color: rgb(253, 239, 213);
    font-size: 2rem;
}

 

 

11. 타깃 선택자 이해하기

- 특정 브라우저의 URL에 추가하는 방법

  #side-drawer:target {
    display: block;
  }

 

 

12. 완성!

 

13. 디자인 꿀팁

- 디자인을 통해 주제-설명 요소를 묶어 보기 편하게 디자인할 수 있다

- 강조하는 것 외에는 일관된 폰트 종류와 사이즈를 사용하는것이 깔끔하다

- 회색은 언제나 필요하고, 회색을 잘 활용하는 것이 좋다

 

[2. 오늘 잘한 점]

일찍 도착한 만큼 공부 시간이 생겼고 프로젝트를 빨리 따라가서 남는 시간에 개인 공부를 할 수 있었다. 

 

[3. 개선이 필요한 점]

팀스터디 시간에 좀 더 명확한 질문이 필요할 것 같다 질문이 구체적일수록 답변도 구체적이니 공부하다가 궁금한 점이 생기면 미리미리 정리해두는게 좋을 것 같다.

'부트캠프' 카테고리의 다른 글

[TIL] 유데미X사람인 취업 부트캠프 8일차 / javascript기초 이해(함수, 배열, 메서드 등)  (0) 2023.12.22
[TIL] 유데미X사람인 취업 부트캠프 7일차 / css변수 및 전환, html 양식 요소  (1) 2023.12.21
[TIL] 유데미X사람인 취업 부트캠프 5일차 / css grid, UTF-8 유니코드  (1) 2023.12.19
[TIL] 유데미X사람인 부트캠프 4일차 / 깃 브랜치, css flexbox  (1) 2023.12.18
[TIL] 유데미x사람인 취업 부트캠프 3일차 / 웹 제작과 호스팅, 깃 명령어  (0) 2023.12.15

관련글

티스토리툴바