반응형웹 소개와 실습(2)

JINO·2022년 5월 24일
대구AI스쿨_과제
0

대구AI스쿨

목록 보기
2/55
post-thumbnail

🔸 학습내용-미디어쿼리 실습

1. 메뉴바

  • 메뉴바 상단 고정
  • 뷰포트 768px보다 작을 시 메뉴바 2단변경


<!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>Document</title>
   <link rel="stylesheet" href="./css/style.css">
</head>
<body>
   <header class="intro">
       <h1>title</h1>
       <nav>
           <ul>
               <li>menu1</li>
               <li>menu2</li>
               <li>menu3</li>
           </ul>
       </nav>
   </header>

   <section class="main">
       <div class="main-wrap">
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus reiciendis corporis iure suscipit, ab in fuga officia, sunt facilis cum, beatae aliquid corrupti natus officiis nemo fugiat iusto cupiditate.</p>
       </div>
   </section>
</body>
</html>
@charset "utf-8";

body, h1, p{
   margin: 0;
   padding: 0;
}

.intro{
   width: 100%;
   height: 80px;
   display: flex;
   position: fixed;
}

.intro h1{
   width: 50%;
   height: 100%;
   background-color: lavenderblush;
}

.intro nav{
   width: 50%;
   height: 100%;
   background-color: lightblue;
}

.intro nav ul{
   display: flex;
   list-style: none;
   margin: 0; 
   padding: 0;
}

.intro nav ul li{
   width: 33.3333%;
   height: 80px;
   text-align: center;
   line-height: 80px;
}
.intro nav ul li:nth-child(1){
   background-color: lightpink;
}
.intro nav ul li:nth-child(2){
   background-color: lightgoldenrodyellow;
}
.intro nav ul li:nth-child(3){
   background-color: lightgray;
}

.main{
   width: 100%;
   height: 1000px;
   background-color: lightsteelblue;
   color: aliceblue;
   padding-top: 80px;
}

/* 768px  보다 작을 때 header가 2단으로 바뀌도록 처리 */
@media (max-width:768px){
   .intro{
       height: 160px;
       flex-direction: column;
       position: static;
   }
   .intro h1,
   .intro nav{
       width: 100%;
   }
   .main{
       padding-top:0;
       background-color: beige;
       color: grey;
   }
}

2. Grid layout(1)

  • multi column
  • column-count & column-gap을 사용하여 작성
  • column-count = 컬럼 수를 지정
  • column-gap = 컬럼 사이의 간격을 지정
  • 뷰포트 크기에따라 컬럼 수 조정하기
<!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>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 다단 컬럼 -->
    <h1>Yummy Yummy</h1>
    <div id="wrapper">
        <div id="columns">
            <div class="card">
                <img src="./image/2.jpg">
                <p>Dessert1</p>
            </div>
            <div class="card">
                <img src="./image/3.jpg">
                <p>Dessert2</p>
            </div>
            <div class="card">
                <img src="./image/4.jpg">
                <p>Dessert3</p>
            </div>
            <div class="card">
                <img src="./image/5.jpg">
                <p>Dessert4</p>
            </div>
            <div class="card">
                <img src="./image/6.jpg">
                <p>Dessert5</p>
            </div>
            <div class="card">
                <img src="./image/7.jpg">
                <p>Dessert6</p>
            </div>
            <div class="card">
                <img src="./image/2.jpg">
                <p>Dessert7</p>
            </div>
            <div class="card">
                <img src="./image/3.jpg">
                <p>Dessert8</p>
            </div>
            <div class="card">
                <img src="./image/2.jpg">
                <p>Dessert9</p>
            </div>
            <div class="card">
                <img src="./image/5.jpg">
                <p>Dessert9</p>
            </div>
            <div class="card">
                <img src="./image/6.jpg">
                <p>Dessert9</p>
            </div>
            <div class="card">
                <img src="./image/4.jpg">
                <p>Dessert9</p>
            </div>

        </div>
    </div>
</body>
</html>
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}
h1{
    width: 100%;
    height: 150px;
    line-height: 150px; /* h1 텍스트 y축 가운데 정렬 */
    padding-left: 50px;
    background: url("../image/7.jpg") no-repeat center;
    background-size: cover;
    color: #fff;
}

#wrapper{
    width: 90%;
    /* max-width: 1700px; */
    min-width: 760px;
    margin: 50px auto; /* 높이 50px 띄우고 가운데정렬 */
}
 
/* 칼럼 수 지정, 칼럼 사이 간격 지정 */
#columns{
    column-count: 2;
    column-gap: 10px;
}
.card{
    display: inline-block;
    width: 200px;
    background-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    padding: 15px;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
.card img{
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
.card p{
    padding: 10px;
}

/* 900px 이상 */
@media (min-width:900px){
    #columns{
        column-count: 3;
    }
}
/* 1100px 이상 */
@media (min-width:1100px){
    #columns{
        column-count: 4;
    }
}

3. Grid layout(2)

  • display: grid 사용

  • grid-template-columns, grid-template-rows 속성을 이용해 배치

  • repeat()함수를 이용해 반복되는 값을 간단하게 표현가능

    <너비가 220px인 칼럼을 2개 반복하는 법>

/* 첫번째, px(반응형 웹 디자인에는 적합하지 않음) 또는 fr(상대적 크기) 단위로 직접 지정 */
grid-template-columns: 1fr 1fr;

/* 두번째, repeat함수를 사용하기 */
grid-template-columns: repeat(2, 220px);

  • grid-gap 속성을 이용해 간격 조절 가능
    (+) grid-column-gap / grid-row-gap 속성으로 각각 따로 지정 할 수 있음

  • justify-content 속성을 이용해서 정렬할 수 있음

<!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>Grid layout</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 다단 컬럼 -->
    <h1>Yummy Yummy</h1>
    <div id="wrapper">
        <!-- <div id="columns"> -->
            <div class="card">
                <img src="./image/2.jpg">
                <p>Dessert1</p>
            </div>
            <div class="card">
                <img src="./image/3.jpg">
                <p>Dessert2</p>
            </div>
            <div class="card">
                <img src="./image/4.jpg">
                <p>Dessert3</p>
            </div>
            <div class="card">
                <img src="./image/5.jpg">
                <p>Dessert4</p>
            </div>
            <div class="card">
                <img src="./image/6.jpg">
                <p>Dessert5</p>
            </div>
            <div class="card">
                <img src="./image/7.jpg">
                <p>Dessert6</p>
            </div>
            <div class="card">
                <img src="./image/2.jpg">
                <p>Dessert7</p>
            </div>
            <div class="card">
                <img src="./image/3.jpg">
                <p>Dessert8</p>
            </div>
            <div class="card">
                <img src="./image/2.jpg">
                <p>Dessert9</p>
            </div>
            <div class="card">
                <img src="./image/5.jpg">
                <p>Dessert9</p>
            </div>
            <div class="card">
                <img src="./image/6.jpg">
                <p>Dessert9</p>
            </div>
            <div class="card">
                <img src="./image/4.jpg">
                <p>Dessert9</p>
            </div>
        <!-- </div> -->
    </div>
</body>
</html>
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}
h1{
    width: 100%;
    height: 150px;
    line-height: 150px; /* h1 텍스트 y축 가운데 정렬 */
    padding-left: 50px;
    background: url("../image/7.jpg") no-repeat center;
    background-size: cover;
    color: #fff;
}

#wrapper{
    display: grid; /* grid, grid-inline */
    grid-template-columns: repeat(2, 220px);
    grid-template-rows: minmax(220px auto);
    grid-gap: 10px 10px;
    justify-content: center;
}

.card{
    display: inline-block;
    width: 200px;
    background-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    padding: 15px;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
.card img{
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
.card p{
    padding: 10px;
}

/* 900px 이상 */
@media (min-width:900px){
    #wrapper{
        justify-content: center;
        grid-template-columns: repeat(3, 200px);
    }
}

/* 1100px 이상 */
@media (min-width:1100px){
    #wrapper{
        justify-content: center;
        grid-template-columns: repeat(4, 200px);
    }
}

🔸 어려웠던 점

  • multi column을 사용했을때 margin: auto 값을 주어도 중앙정렬이 되지 않음
  • CSS grid layout을 실습할 때 grid 속성값들이 적용되지 않는 상황

🔸 해결방법

  • 중앙정렬 문제는 해결하지 못함.. 코드를 다시 처음부터 작성해 보려고 한다.
  • 자식요소를 감싸는 부모요소 클래스 선택에 오류가 있었고, 수정하니 해결되었다.

🔸 학습소감

CSS grid layout기법으로 실습할때 flex box에 적용되는 속성값으로 정렬을 할 수 있다는 것을 알고 되게 좋았다..ㅋㅋ

또 CSS grid layout기법이 multi column방식으로 layout을 구성하는 것 보다 깔끔하고 체계적이라는 느낌이 들었음

전체적으로 큰개념을 이해하는데 어려움은 없었지만 다양한 속성값에 대한 이해는 부족했고, 혼자서 처음부터 레이아웃을 구성할때는 아직 헷갈리는 개념이 있기때문에 연습을 많이 해야할 것 같다.😊

profile
JINO
On your Mark
이전 포스트

반응형웹 소개와 실습(1)

다음 포스트

반응형웹 소개와 실습(3)

0개의 댓글