구글링 하다 index.html 요 친구를 만나게 되어 제 사이트 모바일웹에 적용좀 해보려고 하고 있습니다
현재 https://kkangc.com 가시면 보실수 있는데요
사용하고 있는 레이아웃은 equeer레이아웃 입니다
네모박스가 너무 크고 비중을 많이 차지하는데요
아래 css를 레이아웃 css에 적용시켜봣는데
기존 레이아웃을 깨트려먹는 상태가 되더라구요
사이즈를 작고 정렬하고 싶고 기존 css에 영향을 안미치게 하려면 어떻게 해야 할까요;;
css 고수분들 좀 부탁드립니다 ㅠㅠ
* {
margin: 0;
padding: 0;
font-size: inherit;
color: inherit;
box-sizing: inherit;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
}
*:focus { outline: none; }
html { box-sizing: border-box; }
body {
background-color: #ecf0f1;
min-width: 300px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
h1, h2, h3, h4, h5 {
display: block;
font-weight: 400;
}
li, span, p, a, h1, h2, h3, h4, h5 { line-height: 1; }
p { display: block; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
img {
display: block;
max-width: 100%;
height: auto;
border: 0;
}
button {
background-color: transparent;
border: 0;
cursor: pointer;
}
/* Reset */
/* 여긴 사용안함
html, body { height: 100%; }
/*.navigation-bar, .navigation-bar .navbox-tiles, .navbox-trigger, .navbox-tiles .tile, .navbox-tiles .tile .icon .fa, .navbox-tiles .tile .title {
-webkit-transition: all .3s;
transition: all .3s;
}*/
/*.navbox-tiles:after {
content: '';
display: table;
clear: both;
}
/* Core Styles */
/*.navigation-bar {
height: 50px;
position: relative;
z-index: 1000;
}
.navigation-bar .bar {
background-color: #252525;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.navigation-bar .navbox {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .2s;
transition: all .2s;
}
.navigation-bar .navbox-tiles {
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
}
.navigation-bar.navbox-open .navbox-trigger { background-color: #F44336; }
.navigation-bar.navbox-open .navbox {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, transform .3s;
}
.navigation-bar.navbox-open .navbox-tiles {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
여긴 사용안함*/
.navbox-trigger {
background-color: transparent;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.navbox-trigger .fa {
font-size: 20px;
color: #fff;
}
.navbox-trigger:hover { background-color: #484747; }
.navbox {
background-color: #484747;
width: 100%;
max-width: 380px;
-webkit-backface-visibility: initial;
backface-visibility: initial;
}
/*.navbox-tiles {
width: 100%;
padding: 25px;
}*/
.navbox-tiles .tile {
display: block;
background-color: #3498db;
width: 30.3030303030303%;
height: 0;
padding-bottom: 29%;
float: left;
border: 2px solid transparent;
color: #fff;
position: relative;
}
.navbox-tiles .tile .icon {
width: 100%;
height: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.navbox-tiles .tile .icon .fa {
font-size: 35px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-backface-visibility: initial;
backface-visibility: initial;
}
.navbox-tiles .tile .title {
padding: 5px;
font-size: 12px;
position: absolute;
bottom: 0;
left: 0;
}
.navbox-tiles .tile:hover {
border-color: #fff;
text-decoration: none;
}
.navbox-tiles .tile:not(:nth-child(3n+3)) {
margin-right: 4.54545454545455%;
}
.navbox-tiles .tile:nth-child(n+4) { margin-top: 15px; }
@media screen and (max-width: 370px) {
.navbox-tiles .tile .icon .fa { font-size: 25px; }
.navbox-tiles .tile .title {
padding: 3px;
font-size: 11px;
}
}
margin: 0;
padding: 0;
font-size: inherit;
color: inherit;
box-sizing: inherit;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
}
*:focus { outline: none; }
html { box-sizing: border-box; }
body {
background-color: #ecf0f1;
min-width: 300px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
h1, h2, h3, h4, h5 {
display: block;
font-weight: 400;
}
li, span, p, a, h1, h2, h3, h4, h5 { line-height: 1; }
p { display: block; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
img {
display: block;
max-width: 100%;
height: auto;
border: 0;
}
button {
background-color: transparent;
border: 0;
cursor: pointer;
}
/* Reset */
/* 여긴 사용안함
html, body { height: 100%; }
/*.navigation-bar, .navigation-bar .navbox-tiles, .navbox-trigger, .navbox-tiles .tile, .navbox-tiles .tile .icon .fa, .navbox-tiles .tile .title {
-webkit-transition: all .3s;
transition: all .3s;
}*/
/*.navbox-tiles:after {
content: '';
display: table;
clear: both;
}
/* Core Styles */
/*.navigation-bar {
height: 50px;
position: relative;
z-index: 1000;
}
.navigation-bar .bar {
background-color: #252525;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.navigation-bar .navbox {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .2s;
transition: all .2s;
}
.navigation-bar .navbox-tiles {
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
}
.navigation-bar.navbox-open .navbox-trigger { background-color: #F44336; }
.navigation-bar.navbox-open .navbox {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, transform .3s;
}
.navigation-bar.navbox-open .navbox-tiles {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
여긴 사용안함*/
.navbox-trigger {
background-color: transparent;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.navbox-trigger .fa {
font-size: 20px;
color: #fff;
}
.navbox-trigger:hover { background-color: #484747; }
.navbox {
background-color: #484747;
width: 100%;
max-width: 380px;
-webkit-backface-visibility: initial;
backface-visibility: initial;
}
/*.navbox-tiles {
width: 100%;
padding: 25px;
}*/
.navbox-tiles .tile {
display: block;
background-color: #3498db;
width: 30.3030303030303%;
height: 0;
padding-bottom: 29%;
float: left;
border: 2px solid transparent;
color: #fff;
position: relative;
}
.navbox-tiles .tile .icon {
width: 100%;
height: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.navbox-tiles .tile .icon .fa {
font-size: 35px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-backface-visibility: initial;
backface-visibility: initial;
}
.navbox-tiles .tile .title {
padding: 5px;
font-size: 12px;
position: absolute;
bottom: 0;
left: 0;
}
.navbox-tiles .tile:hover {
border-color: #fff;
text-decoration: none;
}
.navbox-tiles .tile:not(:nth-child(3n+3)) {
margin-right: 4.54545454545455%;
}
.navbox-tiles .tile:nth-child(n+4) { margin-top: 15px; }
@media screen and (max-width: 370px) {
.navbox-tiles .tile .icon .fa { font-size: 25px; }
.navbox-tiles .tile .title {
padding: 3px;
font-size: 11px;
}
}
댓글 2
좀 삐뚤빼뚤하네요 ㅋㅋ