html/css #13 Braista 실습 position, --, media쿼리복습, 그리드시스템

 

이미지가 변경될 가능성이 높은지? (header 배경) 

-> 업데이트가 되는 부분은 마크업으로 들어가는 것이 훨씬 유리하다! 

 

 

 

absolute로 지정된 요소는 flex items가 될 수 없다. 

ㄴ 이 요소의 배경은 absolute로 지정되어, z-index: -1로 배경처럼 설정되어 있다. 

그렇다면 flexbox를 적용하더라도 flexitems가 되지 않는다

 

 

. -- 사용해서 사이즈/색상 관리하기 

:root {
    --gap: 20px;
    --color-primary : salmon;
    --color-primary-light : seashell;
}

.section{
    background-color: white;
    border: 1px solid var(--color-primary);
    padding: var(--gap);
    margin: var(--gap);
}

aspect-ratio

- width / height 비율을 입력하여 해당 비율에 맞게 조정되는 것이다. (IE는 지원x)

ex) aspect-ratio : 16 / 9 

ㄴ 16:9 비율로 이미지를 조정해준다. 

 

 

object-fit: cover;

object-fit: cover;

사진의 본래 크기를 보여주고 싶을 때 

fill: container 에 맞춰 이미지를 보여준다. 

none: width, height 값을 무시하고 이미지의 크기를 본래 크기대로 보여준다. 

cover: 이미지의 비율을 해치지 않으면서 컨테이너에 꽉차게

scale-down:  이미지가 주어진 영역보다 작을 때는 none 속성 값처럼 작동하다가, 이미지가 주어진 영역보다 클 때는 contain 속성 값처럼 작동합니다.

 

 

media 쿼리로 가로 길이가 늘어날 때 가로 정렬하기

 

@media (960px 이상이라면) {

   

}

이 것을 media 쿼리로 변경하면 ? 

.

.

.

@media (min-width: 960px) {

    .header {

        position: fixed;

        width: 50%;

        height: 100vh;

    }

    .contents {

        margin-left: 50%;

        max-width: 800px;

    }

}

 

ㄴ 헤더는 fixed, 컨텐츠는 margin-left : 50%를 줘서 중앙부터 배치

모바일 위아래 세로 배치 -> 가로크기 늘어났을 때 가로배치 

 

 

 

Grid를 통해 갤러리 레이아웃 정하기

기본적으로 Grid는 확장성을 갖추기 위해 (=식판) 

레이아웃 시스템을 구축해야 한다. 

 

                <div class="section_contents">

                    <ul class="l_row">

                        <li class="l_col">

                            <div class="card">

                                <img src="images/photo_1.png" alt="">

                            </div>

                        </li>

                        <li class="l_col">

                            <div class="card">

                                <img src="images/photo_2.png" alt="">

                            </div>

                        </li>

                        <li class="l_col">

                            <div class="card">

                                <img src="images/photo_3.png" alt="">

                            </div>

                        </li>

                    </ul>

                </div>

 

 

 

grid layout 만들기

/*layout*/

.l_row{

    box-shadow: inset 0 0 300px orange;

    display: flex;

    flex-wrap: wrap;

   

    row-gap: 20px;

    margin: 0 -20px;

}

.l_col{

    box-shadow: inset 0 0 20px lime;

    width: 50%;

    padding: 0 10px;

    box-sizing: border-box;

}

 

 

 

grid 클래스 단위로 만들고, 내가 쓰고싶을 때마다 활용을 한다. !

  ~~ >그리드는 12로 나누는 것을 좋아하고, 12로 나누었을때 6만큼 점유 -> 1행에 2열이 있다... 

 

클래스만 교체하면서 원하는 것을 만들어 낸다. 

=> media 쿼리에도 활용. 

=> ex) 960보다 넓어질 때는 grid클래스를 추가하자! 

 

<그리드 시스템 클래스>

.l_col_12_12 { width: 100%; }
.l_col_11_12 { width: 91.66666667%; }
.l_col_10_12 { width: 83.33333333%; }
.l_col_9_12  { width: 75%; }
.l_col_8_12  { width: 66.66666667%; }
.l_col_7_12  { width: 58.33333333%; }
.l_col_6_12  { width: 50%; }
.l_col_5_12  { width: 41.66666667%; }
.l_col_4_12  { width: 33.33333333%; }
.l_col_3_12  { width: 25%; }
.l_col_2_12  { width: 16.66666667%; }
.l_col_1_12  { width: 8.33333333%; }