반응 형 웹 디자인 - 그리드 뷰 정보
CSS 반응 형 웹 디자인 - 그리드 뷰본문
반응 형 웹 디자인 - 그리드 뷰
Grid-View 란 무엇입니까?
많은 웹 페이지는 격자보기를 기반으로합니다. 즉, 페이지가 열로 나뉘어져 있음을 나타냅니다.
반응 형 그리드 뷰 작성하기
반응 형 그리드 뷰를 구축 할 수 있습니다.
먼저 모든 HTML 요소의 box-sizing속성이로 설정되어 있는지 확인하십시오 border-box. 이렇게하면 여백과 테두리가 요소의 전체 너비와 높이에 포함됩니다.
CSS에 다음 코드를 추가하십시오.
* {
box-sizing: border-box;
}
CSS3 Box Sizing 장 box-sizing에서 속성에 대해 더 자세히 읽어보십시오 .
다음 예제는 두 개의 열이있는 간단한 반응 형 웹 페이지를 보여줍니다.
25 %75 %
예
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
위의 예제는 웹 페이지에 두 개의 열만 있으면 잘됩니다.
그러나 웹 페이지를보다 잘 제어하기 위해 12 개의 열이있는 반응 형 그리드 뷰를 사용하고자합니다.
먼저 한 열의 백분율을 계산해야합니다 : 100 % / 12 열 = 8.33 %.
그런 다음 각 열 12 개에 대해 하나의 클래스를 만들고 class="col-"섹션에 걸쳐야하는 열의 수를 정의하는 숫자 를 만듭니다 .
CSS :
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
이 열은 모두 왼쪽으로 떠 있어야하며 15px의 여백이 있어야합니다.
CSS :
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
각 행은에 래핑되어야합니다 <div>. 행 내부의 열 수는 항상 최대 12 개가되어야합니다.
HTML :
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
한 행 안의 열은 모두 왼쪽으로 떠 있기 때문에 페이지의 흐름에서 벗어나기 때문에 열이없는 것처럼 다른 요소가 배치됩니다. 이를 방지하기 위해 흐름을 지우는 스타일을 추가합니다.
CSS :
.row::after {
content: "";
clear: both;
display: table;
}
또한 스타일과 색상을 추가하여 더욱 멋지게 꾸미고 싶습니다.
예
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
0
댓글 0개