23_10_22 CSS 공부정리

[코딩애플] 고급모듈

-grid

-grid-template-rows/columns를 통해 가로세로칸의 크기지정가능

.grid-container { //부모태그

    display : grid;

    grid-template-columns : 100px 100px 100px; //칸 3개

    grid-template-rows: 100px 100px; //줄 2개

    div {

        border : 1px solid black;

    }

}

 

.grid-container {

    display : grid;

    grid-template-columns : 1fr 1fr 1fr; //칸 3개인데 1:1:1비율로 나눔(fr : frame 단위)

    grid-template-rows: 100px 100px;

    grid-gap : 10px; //grid사이의 gap설정

    div {

        border : 1px solid black;

    }

}

2줄 3칸

-자식에게 속성부여 : grid-column/row

.grid-container {

    display : grid;

    grid-template-columns : 100px 100px 100px 100px; // => 세로 5줄

    grid-template-rows: 100px 100px 100px; //=> 가로 4줄

    grid-gap : 10px;

    div {

        border : 1px solid black;

    }

    .grid-nav {

        grid-column : 1/4; //1~4줄까지 차지할것

        grid-row : 1/3; //1~3줄까지 차지할것

    }

}

grid-column의 요소가 4개있으면 5줄이됨

 

위 코드의 결과물

    .grid-nav {

        grid-column : 1/5;

    }

    .grid-side {

        grid-row : 2/4

    }

결과

-부모에게 속성 부여 : grid-template-areas / grid-area 속성

.grid-container {

    display : grid;

    grid-template-columns : 100px 100px 100px 100px;

    grid-template-rows: 100px 100px 100px;

    grid-gap : 10px;

    grid-template-areas:

        "헤더 헤더 헤더 헤더 "  

        "사이드바 콘텐츠 콘텐츠 콘텐츠 "

        "사이드바 콘텐츠 콘텐츠 콘텐츠 "; //실제 레이아웃처럼 배치 (비우고 싶을땐 . 을 입력)

    div {

        border : 1px solid black;

    }

    .grid-nav {

        grid-area : 헤더; //이름부여

    }

    .grid-side {

        grid-area : 사이드바;

    }

    .grid-content {

        grid-area : 콘텐츠;

    }

}

결과물

 

-position : sticky (스크롤을 내릴때 조건부로 fixed되는 속성)

.image {

    float : right;

    width : 400px;

    height : 500px;

    position : sticky; //스크롤을 내리면 고정. 부모div박스를 넘어가면 해제됨.

    top : 100px; //뷰포트(브라우저화면) 기준

}

 

-transform : rotateX,Y,Z(deg) : 축을 기준으로 회전

.back {

    transform : rotateX(180deg); //x축기준으로 회전

    transform : rotateY(180deg); //y축기준으로 회전

    transform : rotateZ(180deg); //Z축(모니터와 내 얼굴을 잇는 선)을 기준으로 회전

}

-회전하는 프로필 코드

  <div class="flip-outer">

    <div class="flip-inner">

      <img class="front" src="files/profile.png" alt="">

      <div class="back">

        <h4>개발자 김철용</h4>

      </div>

    </div>

  </div>

.flip-outer {

    width : 300px;

    height: 300px;

}

.flip-inner {

    width : 100%;

    height: 100%;

    position: relative;

    transition : all 1s;

    transform-style: preserve-3d; //박스를 3D처럼 만들어주는 요소

}

.flip-inner:hover {

    transform : rotateY(180deg); //Y축기준으로 180도 회전

}

.back {

    backface-visibility: hidden; //뒷면에 비치지 않게 하는요소

}

.front {

    width: 100%;

    position: absolute;

    backface-visibility: hidden; //뒷면에 비치지 않게 하는요소

}

.back {

    box-sizing: border-box;

    width : 100%;

    height: 100%;

    background-color: orange;

    border-radius: 50%;

    padding-top : 35%;

    position : absolute;

    text-align: center;

    transform : rotateY(180deg); //뒷면에는 뒤집힌 글자를 미리 작성해놓음

}