HTML / CSS - 고급 5편

* 레이아웃 : grid (격자 레이아웃)

html

<div class="grid-container">
        <div class="grid-header"></div>
        <div class="grid-aside"></div>
        <div class="grid-content"></div>
  	<div></div>
  	<div></div>
  	<div></div>
  	<div></div>
  	<div></div>
  	<div></div>
  	<div></div>
  	<div></div>
  	<div></div>
</div>

css

.grid-container{
	display:grid;
	grid-template-columns: 100px 100px 100px 100px;
	/* 격자 열 갯수 & 사이즈 */
	grid-template-rows: 100px 100px 100px;
	/* 격자 행 갯수 & 사이즈 */
    	/* fr은 배수라고 생각, rows에는 height값을 줘야함 */
}

1. grid로 레이아웃 만드는 방법 : 자식 div높이와 폭 조정하기

html

<div class="grid-container">
    <div class="grid-nav">헤더</div>
    <div class="grid-sidebar">사이드바</div>
    <div class="grid-content"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

css

.grid-container{
	display:grid;
	grid-template-columns: 100px 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
}
.grid-nav {
  grid-column : 1 / 5;
  /* 세로 1번째 줄부터 5번째 줄 까지*/
}
.grid-sidebar {
  grid-row : 2 / 4;
  /* 가로 2번째 줄부터 4번째 줄 까지*/
}
.grid-content {
  grid-column: 2 / 5;
  grid-row: 2 / 4;
  /* 세로 2번째 줄부터 5번째 줄 까지*/
  /* 가로 2번째 줄부터 4번째 줄 까지*/
}

---

2. grid로 레이아웃 만드는 방법 : 자식에게 이름 부여 후 부모에서 배치하기(직관적인 방법)

html

<div class="grid-container">
    <div class="grid-nav">헤더</div>
    <div class="grid-sidebar">사이드바</div>
    <div class="grid-content"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.grid-container{
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas:
        "header header header header"
        "side content content content"
        "side content content content"
    /* 그리드 영역 채우기 (4*3) */
}
.grid-nav {
    grid-area: header;
    /* 해당 grid 이름을 header로 설정 */
}
.grid-sidebar {
    grid-area: side;
    /* 해당 grid 이름을 side로 설정 */
}
.grid-content {
    grid-area: content;
    /* 해당 grid 이름을 content로 설정 */
}

---

• 1. 반응형 grid 레이아웃

media query를 사용하여 max-width 이하일 때 변경될 레이아웃을 작성하면 된다.

css

@media screen and (max-width : 550px) {
    .grid-container {
        grid-template-areas:
        "header header header header"
        "side side side side"
        "content content content content"
    }
}

---

• 2. 반응형 grid 레이아웃

  

html

<div class="grid-container">
        <div class="img1"><img src="https://placeimg.com/500/500/any"></div>
        <div class="img2"><img src="https://placeimg.com/500/500/arch"></div>
        <div class="img3"><img src="https://placeimg.com/500/500/nature"></div>
        <div class="img4"><img src="https://placeimg.com/500/500/people"></div>
        <div class="img5"><img src="https://placeimg.com/500/500/tech"></div>
        <div class="img6"><img src="https://placeimg.com/600/600/people"></div>
</div>

css

.grid-container {
    display: grid;
    max-width: 600px;
    margin: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "img1 img1 img2"
    "img1 img1 img3"
    "img4 img5 img6";
}
.grid-container img {
    width: 100%;
    height: 100%;
}
.img1 {
    grid-area: img1;
}
.img2 {
    grid-area: img2;
}
.img3 {
    grid-area: img3;
}
.img4 {
    grid-area: img4;
}
.img5 {
    grid-area: img5;
}
.img6 {
    grid-area: img6;
}

반응형 처리

@media screen and (max-width : 820px) {
    .grid-container {
        grid-template-columns: 1fr;
        /* 모든 이미지를 1의 배수만 차지하게 설정 */
        grid-template-areas:
        "img1"
        "img2"
        "img3"
        "img4"
        "img5"
        "img6"
    }
}

* position : sticky

스크롤 되었을 때 화면에 고정되는 요소를 만들고 싶을때 사용

position : fixed는 화면에 항상 고정되어있는 반면

postion: sticky는 요소가 화면에 등장하게 되면 고정하면서 가변적인 고정

부모요소에 범위를 벗어나게 되면 가변적인 고정 해제

html

<div class="grey">
        <div class="image">
            <img src="image/javascript.png">
        </div>
        <div style="clear: both;"></div>
        <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Autem rem quaerat omnis dolores ad accusantium explicabo qui inventore,
            commodi sunt soluta alias eligendi quam enim ea, repellendus nostrum beatae maxime?
        </div>
        <div style="clear: both;"></div>
        <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Autem rem quaerat omnis dolores ad accusantium explicabo qui inventore,
            commodi sunt soluta alias eligendi quam enim ea, repellendus nostrum beatae maxime?
        </div>
        <div style="clear: both;"></div>
        <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Autem rem quaerat omnis dolores ad accusantium explicabo qui inventore,
            commodi sunt soluta alias eligendi quam enim ea, repellendus nostrum beatae maxime?
        </div>
        <div style="clear: both;"></div>
</div>

css

body {
    background-color: grey;
    height: 3000px;
}
img {
    width: 100%;
}
.grey {
    background: lightgray;
    height: 1500px;
    margin-top: 1000px;
}
.image {
    float: right;
    width: 300px;
    margin-bottom: -4px;
    position: sticky;
    top: 100px;
}
.text {
    float: left;
    width: 300px;
    margin-bottom: 100px;
}