본문 영역
레이아웃 구조 상세보기
작성자: 관리자
추천: 0 조회: 5862
레이아웃 구조
웹접근성이 필요없던 시절, 레이아웃 구성을 위해 테이블(table)을 많이 사용하였습니다. 하지만 테이블(행과 열을 가진 2차원 형태의 자료를 표현한 것)은 구조로 쓰여서는 안된다고 되어 있습니다.
스크린리더(시각장애인용 프로그램)는 테이블(표)를 읽을 때, 우리가 책을 보는것처럼 좌에서 우, 상단에서 하단으로 읽어 주는 것이 아니라, 시각장애인이 이해 할수 있게 제목 셀 읽어주고, 하위 내용 셀 읽어주고(위에서 아래), 다음(좌에서 우) 제목 셀 읽어주고, 다음 내용 셀 읽어주고하는 식으로 작동하기 때문입니다.
이러한 이유로 만약 구조를 테이블(표)로 구성한다면 시각장애인은 그 사이트를 두번 다시 방문하지 않을 것입니다. 그래서 구조를 잡는데 테이블(table)처럼 강력한게 없지만 테이블을 대신해서 div로 구조로 구성하게 되었습니다.
아래에 보시게 될 구조는 어렵게 생각하지 마시고, 테이블이라고 생각하시면 됩니다.
grid 클래스 속성은 테이블(table)이고 column 클래스 속성은 셀(td)이라고 생각하시면 됩니다.
<style>
/* ==========================한줄 레이아웃을 위한 설정 ============================== */
/* 레이아웃 컬럼 세트(layout column set) */
/* margin:1% grid */
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5{width:100%;position:relative}
.grid-1:after, .grid-2:after, .grid-3:after, .grid-4:after, .grid-5:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.grid-1>.column1{width:100%;margin:1% 0;}
.grid-2>.column1{width:49%;float:left;margin:1% 1%;*margin:1% 0.9%}
.grid-2>.column2{width:100%;float:left;margin:1% 0}
.grid-3>.column1{width:32%;float:left;margin:1% 1%;*margin:1% 0.9%}
.grid-3>.column2{width:66%;float:left;margin:1% 1%}
.grid-3>.column3{width:100%;float:left;margin:1% 0}
.grid-4>.column1{width:23.5%;float:left;margin:1% 1%;*margin:1% 0.9%}
.grid-4>.column2{width:49%;float:left;margin:1% 1%;*margin:1% 0.9%}
.grid-4>.column3{width:74.5%;float:left;margin:1% 1%}
.grid-4>.column4{width:100%;float:left;margin:1% 0}
.grid-5>.column1{width:18.4%;float:left;margin:1% 1%;*margin:1% 0.9%}
.grid-5>.column2{width:38.8%;float:left;margin:1% 1%}
.grid-5>.column3{width:59.2%;float:left;margin:1% 1%;*margin:1% 0.9%}
.grid-5>.column4{width:79.6%;float:left;margin:1% 1%}
.grid-5>.column5{width:100%;float:left;margin:1% 0}
/* margin:0 grid */
.grid2-1, .grid2-2, .grid2-3, .grid2-4, .grid2-5{width:100%;position:relative}
.grid2-1:after, .grid2-2:after, .grid2-3:after, .grid2-4:after, .grid2-5:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.grid2-1>.column1{width:100%;margin:0}
.grid2-2>.column1{width:50%;*width:49.9%;float:left}
.grid2-2>.column2{width:100%}
.grid2-3>.column1{width:33.333%;float:left}
.grid2-3>.column2{width:66.666%;float:left}
.grid2-3>.column3{width:100%}
.grid2-4>.column1{width:25%;float:left}
.grid2-4>.column2{width:50%;*width:49.99%;float:left}
.grid2-4>.column3{width:75%;float:left}
.grid2-4>.column4{width:100%}
.grid2-5>.column1{width:20%;*width:19.9%;float:left}
.grid2-5>.column2{width:40%;float:left}
.grid2-5>.column3{width:60%;float:left}
.grid2-5>.column4{width:80%;float:left}
.grid2-5>.column5{width:100%}
/* grid etc property */
.column1, .column2, .column3, .column4, .column5{text-align:left}
.column-first{margin-left:0 !important}
.column-last{margin-right:0 !important}
.style-1[class*=grid]{border-top:2px solid #303030}
.style-2[class*=grid]{border-bottom:1px solid #ccc}
/* y축 grid */
.ygrid-2, .ygrid-3{width:100%;position:relative;}
.ygrid-2:after, .ygrid-3:after, .ygrid-4:after, .ygrid-5:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.s-grid-2{width:100%}
.s-grid-2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.s-grid-2>.column1{width:50%;*width:49.9%;float:left;mar1gin:0 2%;*mar1gin:0 1.9%}
/* 모바일 옆으로 보기로 취급 */
@media screen and (max-width:683px){
/* margin:1% grid */
.grid-3[class*=m-act]>.column1, .grid-3[class*=m-act]>.column2, .grid-3[class*=m-act]>.column3{width:100%;clear:both;margin:1% 0}
.grid-4>.column1{width:49%;margin:1% 0}
.grid-4>.column2{width:100%;margin:1% 0}
.grid-4>.column3{width:100%;margin:1% 0}
.grid-4>.column-first[class*=column1]{margin:1% 2%;*margin:1% 1.9%}
.grid-4>.column-last[class*=column1]{margin:1% 2%;*margin:1% 1.9%}
/* margin:0 grid */
.grid2-3[class*=m-act]>.column1, .grid2-3[class*=m-act]>.column2, .grid2-3[class*=m-act]>.column3{width:100%;clear:both}
.grid2-4>.column1{width:50%;*width:49.9%;}
.grid2-4>.column2{width:100%}
.grid2-4>.column3{width:100%}
.grid2-4>.column-first[class*=column1]{marg1in:1% 2%;*mar1gin:1% 1.9%}
.grid2-4>.column-last[class*=column1]{marg1in:1% 2%;*mar1gin:1% 1.9%}
/* grid etc property */
.m-100{width:100% !important;margin-left:0 !important;margin-right:0 !important}
.m-ptr{position:absolute;top:0;right:0}
/* y축 grid */
.ygrid-2[class*=m-act]>.column1{width:50%;*width:49.9%;float:left}
}
/* 모바일 옆으로 바로로 취급 */
@media screen and (max-width:439px){
/* margin:1% grid */
.grid-2>.column1, .grid-2>.column2{width:100%;clear:both;margin:1% 0}
.grid-3>.column1, .grid-3>.column2, .grid-3>.column3{width:100%;clear:both;margin:1% 0}
.grid-5>.column1{width:32%;margin:1% 1%;*margin:1% 0.9%}
.grid-5>.column2{width:100%;margin:1% 0}
.grid-5>.column3{width:100%;margin:1% 0}
.grid-5>.column4{width:100%;margin:1% 0}
/* margin:0 grid */
.grid2-2>.column1, .grid2-2>.column2{width:100%;clear:both}
.grid2-3>.column1, .grid2-3>.column2, .grid2-3>.column3{width:100%;clear:both}
.grid2-5>.column1{width:33.333%}
.grid2-5>.column2{width:100%;clear:both}
.grid2-5>.column3{width:100%;clear:both}
.grid2-5>.column4{width:100%;clear:both}
/* grid etc property */
.e-100{width:100% !important;margin-left:0 !important;margin-right:0 !important}
.e-50{width:49% !important}
.grid2-2>.e-50, .grid2-3>.e-50, .grid2-4>.e-50, .grid2-5>.e-50{width:50% !important;*width:49.9% !important}
.grid-2>.e-lm, .grid-3>.e-lm, .grid-4>.e-lm, .grid-5>.e-lm{margin-left:1% !important;margin-right:0 !important}
.grid-2>.e-rm, .grid-3>.e-rm, .grid-4>.e-rm, .grid-5>.e-rm{margin-left:0 !important;margin-right:1% !important}
.e-ptr{position:absolute !important;top:0;right:0}
.e-pbr{position:absolute !important;bottom:0;right:0}
/* y축 grid */
.ygrid-2>.column1{width:50%;*width:49.9%;float:left}
.ygrid-3>.column1{width:33.333%;float:left}
.ygrid-4>.column1{width:25%;float:left}
.ygrid-5>.column1{width:20%;*width:19.9%;float:left}
}
</style>
CSS코드를 보시면 *margin:0 0.9%값이 보일 것입니다. 익스플로러 7에서는 margin:1%로 주었을 때 정상적으로 출력되지 않기 때문에 선언된 CSS핵입니다. 모든 브라우져에서 깨지지 않게 보일려면 반드시 레이아웃 구조를 지켜주십시오.
사용자의 입력은 반드시 레이아웃 컬럼부터 시작해야합니다!
모든 단위는 한줄입니다.
1칸 기준 경우의 방법
2칸 기준 경우의 방법
2칸 이상일 경우 항상 처음의 컬럼에는 column-first 속성을 주어야하고, 마지막 컬럼에는 column-last를 주어야 합니다.
"예제소스보기"를 클릭해서 확인해보세요.
"예제소스보기"를 클릭해서 확인해보세요.
column 1/2
column 1/2
column 2/2
3칸 기준 경우의 방법
column 1/3
column 1/3
column 1/3
column 2/3
column 1/3
m-act column 2/3
m-act column 1/3
column 1/3
column 2/3
m-act column 1/3
m-act column 2/3
column 3/3
4칸 기준 경우의 방법
column 1/4
column 1/4
column 1/4
column 1/4
column 2/4
column 1/4
column 1/4
column 1/4
column 2/4
column 1/4
column 1/4
column 1/4
column 2/4
column 2/4
column 2/4
column 3/4
column 1/4
column 1/4
column 3/4
column 4/4
5칸 기준 경우의 방법
column 1/5
column 1/5
column 1/5
column 1/5
column 1/5
[grid-5 한칸,한칸,한칸,한칸,한칸] 예제소스보기
column 2/5
column 1/5
column 1/5
column 1/5
column 1/5
column 2/5
column 1/5
column 1/5
column 1/5
column 1/5
column 2/5
column 1/5
column 1/5
column 1/5
column 1/5
column 2/5
column 2/5
column 1/5
column 2/5
column 2/5
column 2/5
column 1/5
column 1/5
column 2/5
column 2/5
column 3/5
column 1/5
column 1/5
column 1/5
column 3/5
column 1/5
column 1/5
column 1/5
column 3/5
column 3/5
column 2/5
column 2/5
column 3/5
column 4/5
column 1/5
column 1/5
column 4/5
column 5/5
레이아웃 사용법
-
1
사용자는 한줄에 몇칸이 들어갈지(구조)를 먼저 생각한다[예)3칸]
-
2
그에 맞는 컬럼[3컬럼]을 "예제소스보기" 클릭해서 복사해서 붙여넣는다.
-
3
각각의 [column 1/3]에 내용을 입력한다.
현재 보이는 컬럼의 색상은 사용자에게 설명하기 위해 인위적으로 덮어씌운 것으로 원래 색상은 없습니다.
등록일:
마지막 수정일:
스타일시트(CSS)
총글수: 12
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 12 | 없음 | 현재글:레이아웃 구조 | 추천:0 | 조회:5862 | |
| 11 | 없음 | 색상표 | 추천:0 | 조회:5628 | |
| 10 | 없음 | 버튼 | 추천:0 | 조회:9165 | |
| 9 | 없음 | 하이라이트 | 추천:0 | 조회:4927 | |
| 8 | 없음 | 인용구 | 추천:0 | 조회:3635 | |
| 7 | 없음 | 테이블(표) | 추천:0 | 조회:3795 | |
| 6 | 없음 | 박스 리스트 | 추천:0 | 조회:4210 | |
| 5 | 없음 | 텝박스 | 추천:0 | 조회:4431 | |
| 4 | 없음 | 아이콘 | 추천:0 | 조회:6792 | |
| 3 | 없음 | 반응형 기타 | 추천:0 | 조회:3653 |
