<aside> 💡 그리드를 활용하여 특정 버튼을 누르면, 지정된 위치로 이동 시킨다.
</aside>
html {
font-size: 87.5%; /* 14px */
font-family: Roboto, 'Noto Sans KR', sans-serif;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility !important;
}
body {
background: lightgray;
}
img {
max-width: 100%;
height: auto;
}
/* 그리드 적용 */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.page-header {
grid-column: 1/5;
}
.page-footer {
grid-column: 1/5;
padding: 1rem 0 3rem;
font-size: 0.8rem;
}
.site-title {
font-size: 10rem;
font-family: 'Roboto Condensed';
}
.cate-sect {
background: white;
}
.cate-name {
padding: 1rem;
font-weight: bold;
color: white;
}
.cate-music .cate-name { background: crimson; }
.cate-game .cate-name { background: limegreen; }
.cate-food .cate-name { background: salmon; }
.cate-tech .cate-name { background: steelblue; }
.cate-sect-cont {
padding: 1rem;
}
.cate-sect-title {
padding: 1rem;
}
input[name='sort-control'] {
position: absolute;
left: -1000rem;
}
.sort-label {
padding: 1rem;
cursor: pointer;
}
:checked + .sort-label {
color: white;
background: black;
}
/* js없이 정렬을 구현
라디오가 체크되었을 때 해당 위치에 배치 되도록한다. */
#radio-sort-category:checked ~ .cate-music {
grid-row: 3/4;
}
#radio-sort-category:checked ~ .cate-food {
grid-row: 4/5;
}
#radio-sort-category:checked ~ .cate-game {
grid-row: 5/6;
}
#radio-sort-category:checked ~ .cate-tech {
grid-row: 6/7;
}
@keyframes starting {
from {
transform: rotateX(0deg) rotateZ(0deg);
}
to {
transform: rotateX(60deg) rotateZ(240deg);
}
}
@keyframes dongdong {
from {
transform: translateZ(30px) rotateX(-90deg) scaleY(0.7);
}
to {
transform: translateZ(60px) rotateX(-90deg);
}
}
body {
display: flex;
align-items: center;
justify-content: center;
/* 3d를 할 때 꼭 필요한 속성이다. (원근감을 주는 속성이다.) */
perspective: 1000px;
color: black;
background: #fff000;
}
.game {
display: grid;
/* vmin: 브라우저 폭이든 너비든 더 작은 수치를 잡는다. */
grid-template-rows: repeat(6, 11vmin);
grid-template-columns: repeat(6, 11vmin);
gap: 1vw;
transform: rotateX(0deg) rotateZ(0deg);
transform-style: preserve-3d;
animation: starting 2s 0.5s forwards;
}
.tile {
/* overflow: hidden; */
/* overflow: hidden이 되어있으면 3D 효과 안됨 */
position: relative;
border: 3px solid black;
font-size: 2rem;
transform-style: preserve-3d;
}
.tile label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #fff;
transform-style: preserve-3d;
cursor: pointer;
}
.tile label:hover {
color: white;
background: dodgerblue;
}
.tile input {
position: absolute;
opacity: 0;
}
.tile input:checked + label {
color: white;
background: crimson;
}
.tile input:checked + label:before {
content: "";
position: absolute;
display: block;
width: 100px;
height: 100px;
background: url(images/ilbuni.png) no-repeat center;
background-size: contain;
border-radius: 50%;
animation: dongdong 0.22s infinite alternate;
}
.tile:nth-child(1) {
grid-row: 1;
grid-column: 1;
transform: rotate(135deg);
border-radius: 50%;
}
.tile:nth-child(2) {
grid-row: 1;
transform: rotate(180deg);
}
.tile:nth-child(3) {
grid-row: 1;
transform: rotate(180deg);
}
.tile:nth-child(4) {
grid-row: 1;
transform: rotate(180deg);
}
.tile:nth-child(5) {
grid-row: 1;
transform: rotate(180deg);
}
.tile:nth-child(6) {
grid-row: 1;
transform: rotate(225deg);
border-radius: 50%;
}
.tile:nth-child(7) {
grid-row: 2;
grid-column: 6;
transform: rotate(270deg);
}
.tile:nth-child(8) {
grid-row: 3;
grid-column: 6;
transform: rotate(270deg);
}
.tile:nth-child(9) {
grid-row: 4;
grid-column: 6;
transform: rotate(270deg);
}
.tile:nth-child(10) {
grid-row: 5;
grid-column: 6;
transform: rotate(270deg);
}
.tile:nth-child(11) {
grid-row: 6;
grid-column: 6;
transform: rotate(315deg);
border-radius: 50%;
}
.tile:nth-child(12) {
grid-row: 6;
grid-column: 5;
}
.tile:nth-child(13) {
grid-row: 6;
grid-column: 4;
}
.tile:nth-child(14) {
grid-row: 6;
grid-column: 3;
}
.tile:nth-child(15) {
grid-row: 6;
grid-column: 2;
}
.tile:nth-child(16) {
grid-row: 6;
grid-column: 1;
transform: rotate(45deg);
border-radius: 50%;
}
.tile:nth-child(17) {
grid-row: 5;
transform: rotate(90deg);
}
.tile:nth-child(18) {
grid-row: 4;
transform: rotate(90deg);
}
.tile:nth-child(19) {
grid-row: 3;
transform: rotate(90deg);
}
.tile:nth-child(20) {
grid-row: 2;
transform: rotate(90deg);
}
.tile:nth-child(1) label,
.tile:nth-child(6) label,
.tile:nth-child(11) label,
.tile:nth-child(16) label {
border-radius: 50%;
}
body {
font-family: Roboto, sans-serif;
font-weight: 900;
color: #222;
background: url(images/lego.png) no-repeat white;
background-position: calc(50% + 22vw) 0;
/* 고정크기 + 가변크기는 최솟값을 가진 가변크기이다. */
background-size: calc(300px + 40vw) auto;
}
.page {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
height: 100vh;
}
.logo-container {
grid-column: 1;
grid-row: 1;
padding: 30px;
}
.logo {
width: 100px;
height: 50px;
border: 20px solid #222;
}
.message {
grid-column: 1 / 3;
grid-row: 1 / 3;
justify-self: center;
align-self: center;
/* font-size: 3rem; */
/* font-size: 3.5vw; */
font-size: calc(20px + 2.5vw);
text-align: center;
}
.footer {
/* grid-column: 1 / 3; */
grid-column: 1 / span 2;
grid-row: 3;
align-self: end;
padding: 30px;
}
/* 세로모드 */
@media (orientation: portrait) {
body {
background-position: calc(50% + 27vw) 100%;
background-size: calc(450px + 40vw) auto;
}
.page {
grid-template-rows: repeat(4, 1fr);
}
.logo {
width: 70px;
height: 35px;
border-width: 15px;
}
/* .message {
font-size: 1.5rem;
} */
.footer {
grid-row: 4;
font-size: 0.8rem;
}
}