전체보다는, 규칙적이고 작은부분의 레이아웃을 잡을때 유용하다.
<div class="grid-container">
<div class="grid-nav">헤더</div>
<div class="grid-sidebar">사이드바</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.grid-nav {
grid-column : 1 / 4; //세로선 1부터 4까지 차지하라는 말이다.
grid-row : 2 / 4; //가로선 2부터 4까지 차지하라는 말이다.
}
<div class="grid-container">
<div class="grid-nav">헤더</div>
<div class="grid-sidebar">사이드바</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.grid-nav {
grid-area: 헤더;
}
.grid-sidebar {
grid-area: 사이드;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas:
"헤더 헤더 헤더 헤더" //직관적으로 헤더를 지정한다.
"사이드 사이드 . ." //사이드를 지정한다.
"사이드 사이드 . ."
}
position: fixed와 유사하게, 고정시켜주는 대신, 요소가 화면에 나오면 고정시킨다.
1. 스크롤이 되어서 이미지가 보이는 순간
2. viewport의 맨 위에서부터 100px 위치에서 고정이 된다.
3. 그리고 부모 박스를 넘어서 스크롤 되면 이미지도 같이 사라진다.
<body style="background : grey; height : 3000px">
<div class="grey">
<div class="image">
<img src="appletv.jpg" width="100%">
</div>
<div style="clear : both"></div>
<div class="text">Meet the first Triple Camera System</div>
</div>
</body>
.grey {
background: lightgrey;
height: 2000px;
margin-top: 500px;
}
.text {
float: left;
width : 300px;
}
.image {
float: right;
width : 400px;
position: sticky;
top: 100px;
}
rotateY를 사용하자.
1. 앞면과 뒷면 레이아웃을 각각 만든다.
<div class="flip-outer">
<div class="flip-inner">
<img src="profile.png" class="front">
<div class="back">
<h4>개발자 이명윤</h4>
<p>Frontend Developer</p>
</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);
}
.front {
width: 100%;
position: absolute;
backface-visibility: hidden; //원래 어떤 HTML 요소를 뒤집으면 뒷면이 보이는데, 그걸 안보이게 해준다.
}
.back {
width: 100%;
position: absolute;
transform: rotateY(180deg);
}