♥ 코딩(Coding)/반응형

( 공부복습 ) grid 레이아웃 반응형 적용하기

디자이너 윈썸 2022. 2. 9. 16:27

[ 참고사항 ]

  ▶ grid
:  두방향으로 나아가며 형태를 만들 수 있어서 다양하게 레이아웃이나 그리드 형태에 해당하는 부분을 만     들 때 사용.    
(하지만 flex를 대체할 수 는 없으므로 둘다 적절한 레이아웃에 활용하는 것이 중요) 


  ▶ Grid Container를 위한 속성

 - display : grid 
   부모박스에 grid선언시 안쪽의 자식 요소를 grid item으로 변환하여 사용가능함.  


 - grid-template-columns :  item을 수평방향으로 분배되어지는 값을 설정 하는 속성  
   단위 > px,%,fr,minmax ....  

 - grid-template-rows :  item을 수직방향으로 분배되어지는 값을 설정 하는 속성  
   단위 > px,%,fr,minmax ....

 └ 2개 동시 적용  / 단축단위  grid-template


    ▶ grid-auto-columns :   item을 수평방향으로 폭을 자동으로 분배하는 속성  

    ▶ grid-auto-rows:   item을 수직방향으로 폭을 자동으로 분배하는 속성  


  - 단위 및 함수에 대한 설명  
    mixmax (최소값,최대값)  
    fraction : 분배,분수  =  1fr / 1씩 분배  
    repeat (반복횟수,반복값)  
    auto-fill / auto-fit  화면을 꽉채우고자하는 값 


  ▶ column-gap(grid-column-gap) : 열과 열 사이의 간격 혹은 틈을 정의 
   단위 > px,%,vw,vh,em,rem...

  ▶ row-gap(grid-row-gap) : 행과 행 사이의 간격 혹은 틈을 정의 
   단위 > px,%,vw,vh,em,rem...

 └ 2개 동시 적용  / 단축단위  gap(grid-gap)


  ▶ grid-auto-flow : 자동으로 item을 배치하는 알고리즘 속성  
   └ row(기본값)  각 행 축에 따라 차례로 배치 되는 값  
   └ column  각 열 축에 따라 차례로 배치 되는 값  
   └ dense(row dense)  축방향에서 행에 따라 빈 영역을 자동으로 배치  
   └ column dense 축방향에서 열에 따라 빈 영역을 자동으로 배치


  ▶ 정렬 
 ** align-content :  그리드안의 콘텐츠를 그룹으로 수직 정렬 ( 아이템이 부모의 높이보다 작을 경우 )
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  
   └ space-between item요소를 좌우 여백을 모두 사용하면서 분배하는 정렬  
   └ space-around item요소의 좌우여백을 두며 분배 정렬  
   
** justify-content :  그리드안의 콘텐츠를 그룹으로 수평 정렬 ( 아이템이 부모의 넓이보다 작을 경우 )
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  
   └ space-between item요소를 좌우 여백을 모두 사용하면서 분배하는 정렬  
   └ space-around item요소의 좌우여백을 두며 분배 정렬  


   └ 2개 동시 적용  / 단축단위  place-content : align justify



  ▶ align-items : 그리드 아이템들을 수직 정렬
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  


  ▶ justify-items : 그리드 아이템들을 수평 정렬
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  


   └  2개 동시 적용  / 단축단위  place-items : align justify 




**Grid item을 위한 속성

  + 수평상 
 ** grid-column-start :  시작하는 그리드라인 넘버입력하는 속성
 ** grid-column-end :  끝나는 그리드라인 넘버입력하는 속성

    └ grid-column :  위 내용의 단축 속성 
         >  start  /  end  (시작에서 끝까지) 
        >  span ( 시작라인에서 / span  cell의 개수)    

  + 수직상 
 ** grid-row-start :  시작하는 그리드라인 넘버입력하는 속성
 ** grid-row-end :  끝나는 그리드라인 넘버입력하는 속성

    └ grid-row :  위 내용의 단축 속성 
         >  start  /  end  (시작에서 끝까지) 
         >  span ( 시작라인에서 / span  cell의 개수)    


  ** order :  보여지는 나열순서를 결정하는 속성  
   >  숫자값  /  작은 숫자(순서) < 큰 숫자(순서)   

 ** index :   Z축 정렬의 우선순위를 결정하는 속성 
   > 숫자가 클 수록 위로 배치     




  ▶ 정렬 

 ** align-self  :  item 개별적으로  수직축  방향으로 정렬
   >  stretch :  늘어는 값 
   >  start : 시작점으로 정렬 하는  값
   > center :  중앙 정렬되는 값 
   > end : 끝으로 정렬 하는 값


 ** justify-self  :  item 개별적으로  수평축  방향으로 정렬
   >  stretch :  늘어는 값 
   >  start : 시작점으로 정렬 하는  값
   > center :  중앙 정렬되는 값 
   > end : 끝으로 정렬 하는 값

 └ place-self  : 위 내용을 함께 단축하여 사용하는 속성  /  align  justify 순서대로  





*****************************    그 외   *******************************

  ▶ grid-template-areas :  영역에 이름을 부여하여 배치하는 속성  
  ▶ grid-area: 위의 속성에 대한 이름을 지정하는 속성 

************************************************************************

 

만들어보기

<body>

    <!-- main -->

    <main class="grid">
        <div class="item">
            <!--배경이미지-->
        </div>
        <div class="item">
            <h1>Lorem ipsum</h1>
            <div class="title">
                <h4>What is Lorem Ipsum?</h4>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <button type="button">Generate Lorem Ipsum</button>
            </div>
        </div>

        <!--nav-->
        <a href="#" id="nav">
            <span></span>
            <span></span>
            <span></span>
        </a>
        <!--//nav-->
    </main>
    <!-- //main -->


    <!--section-->
    <section class="grid">
        <article class="grid">
            <div class="item">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p>
                    Lorem ipsum dolor sit amet, qui minim labore adipisicing<br>
                    minim sint cillum sint consectetur cupidatat
                </p>
            </div>
        </article>
        <article class=grid>
            <div class="item bg"></div>
            <div class="item">
                <h1>
                    Lorem ipsum<br>
                    dolor sit amet
                </h1>
            </div>
        </article>
    </section>
    <!--//section-->

    <!--footer-->
    <footer>
        Can you help translate this site into a foreign language ?<br>
        Please email us with details if you can help.
    </footer>

    <!--//footer-->
</body>
 

*{
    padding: 0;
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    box-sizing: border-box;
    /*선의 값을 폭안으로 표현*/
}

a{
    color: inherit;
    text-decoration: none;
}

ul{
    list-style: none;
}

img{
    display: block;
}

body{
    font-size: 18px;
    color: #333;
    background-color: #ecddcc;
}

.grid{
    display: grid;
    /*그리드선언! > item 모두 그리드의 속성 표현이 가능한 요소*/
}

/*main*/
main{
    width: 100%;
    height: 100vh;
    border-bottom: 1px solid #000;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr;
}

main .item:nth-child(1){
    border-right: 1px solid #000;
    background: url(../bg.jpg) no-repeat center center;
    background-size: 60%;
    filter: grayscale(60%);
    /*회색조가 들어가게*/
}

main .item:nth-child(2){
    padding: 50px;
    display: grid;
    /*안쪽의 title의 정렬*/
}

main .title{
    align-self: end;

}

main button{
    border: 1px solid #000;
    padding: 12px 80px;
    background-color: #ecddcc;
    margin-top: 20px;
}

#nav{
    display: block;
    /*글자인 성격을 박스로 변롼 > 폭을 부여*/
    width: 50px;
    height: 50px;
    padding: 10px;
    position: fixed;
    top: 5vh;
    right: 5vw;
    border: 1px solid #000;
}

#nav span{
    display: block;
    /*글자인 성격을 박스로 변롼 > 폭을 부여*/
    width: 100%;
    height: 10%;
    background-color: #000;

}

#nav span:nth-child(2){
    margin: 31% 0;
    /*100(전체)-30%=70/2=35% 눈으로 보았을때 미세하게 이쁘지않아 조율하여 31%로함 */

}

/*setion*/
section{
    width: 100%;
    height: 30vh;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr;
}

article:nth-child(1){
    border-right: 1px solid #000;
    padding: 50px;

}

article:nth-child(1) .item{
    align-self: end;
}

article:nth-child(2){
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr;
}

article:nth-child(2) .bg{
    border-right: 1px solid #000;
    background: url(../bg2.jpg) no-repeat;
    background-size: cover;
    filter: grayscale(100%);
}

article:nth-child(2) .item:nth-child(2){
    align-self: end;
    padding: 50px;
}

footer{
    width: 100%;
    padding: 5vh 0;
    background-color: #000;
    color: #fff;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
}
 
@media screen and (max-width:1024px) {

    main{
        height: 60vh;
    }
    section{
        height: 40vh;
    }
    article:nth-child(2){
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(2,1fr);
    }
    article:nth-child(2) .bg{
        border-right:none;  
        border-bottom: 1px solid #000;
   
    }
       
   
}


@media screen and (max-width:768px) {

    main{
        height: 100vh;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(2,70vh 30vh);
        text-align: center;
    }
    main .item:nth-child(1){
        border-right: none;
        border-bottom: 1px solid #000;
    }
    section{
        height: 70vh;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(2,1fr);
        overflow: hidden;
    }
    article:nth-child(1){
        border-right: none;
        border-bottom: 1px solid #000;
    }
    article:nth-child(2){
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(1,1fr);
    }
    article:nth-child(2) .bg{
        border-right: 1px solid #000;
        border-bottom: none;
    }
       
   
}

index.html
0.00MB
style.css
0.00MB
restyle.css
0.00MB

저작자표시 비영리 변경금지 (새창열림)