어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 스타일시트(CSS)

본문 영역

레이아웃 구조 상세보기

작성자: 관리자 추천: 0  조회: 5556

레이아웃 구조


웹접근성이 필요없던 시절, 레이아웃 구성을 위해 테이블(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칸 기준 경우의 방법


column 1

[grid-1 한칸] 예제소스보기


2칸 기준 경우의 방법


2칸 이상일 경우 항상 처음의 컬럼에는 column-first 속성을 주어야하고, 마지막 컬럼에는 column-last를 주어야 합니다.
"예제소스보기"를 클릭해서 확인해보세요.

column 1/2
column 1/2

[grid-2 두칸] 예제소스보기

column 2/2

[grid-2 한칸] 예제소스보기


3칸 기준 경우의 방법


column 1/3
column 1/3
column 1/3

[grid-3 셋칸] 예제소스보기

column 2/3
column 1/3

[grid-3 두칸,한칸] 예제소스보기

m-act column 2/3
m-act column 1/3

[grid-3 두칸,한칸 m-act적용] 예제소스보기

column 1/3
column 2/3

[grid-3 한칸,두칸] 예제소스보기

m-act column 1/3
m-act column 2/3

[grid-3 두칸,한칸 m-act적용] 예제소스보기

column 3/3

[grid-3 한칸] 예제소스보기


4칸 기준 경우의 방법


column 1/4
column 1/4
column 1/4
column 1/4

[grid-4 한칸,한칸,한칸,한칸] 예제소스보기

column 2/4
column 1/4
column 1/4

[grid-4 두칸,한칸,한칸] 예제소스보기

column 1/4
column 2/4
column 1/4

[grid-4 한칸,두칸,한칸] 예제소스보기

column 1/4
column 1/4
column 2/4

[grid-4 한칸,한칸,두칸] 예제소스보기

column 2/4
column 2/4

[grid-4 두칸,두칸] 예제소스보기

column 3/4
column 1/4

[grid-4 셋칸,한칸] 예제소스보기

column 1/4
column 3/4

[grid-4 한칸,셋칸] 예제소스보기

column 4/4

[grid-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

[grid-5 두칸,한칸,한칸,한칸] 예제소스보기

column 1/5
column 2/5
column 1/5
column 1/5

[grid-5 한칸,두칸,한칸,한칸] 예제소스보기

column 1/5
column 1/5
column 2/5
column 1/5

[grid-5 한칸,한칸,두칸,한칸] 예제소스보기

column 1/5
column 1/5
column 1/5
column 2/5

[grid-5 한칸,한칸,한칸,두칸] 예제소스보기

column 2/5
column 1/5
column 2/5

[grid-5 두칸,한칸,두칸] 예제소스보기

column 2/5
column 2/5
column 1/5

[grid-5 두칸,두칸,한칸] 예제소스보기

column 1/5
column 2/5
column 2/5

[grid-5 한칸,두칸,두칸] 예제소스보기

column 3/5
column 1/5
column 1/5

[grid-5 셋칸,한칸,한칸] 예제소스보기

column 1/5
column 3/5
column 1/5

[grid-5 한칸,셋칸,한칸] 예제소스보기

column 1/5
column 1/5
column 3/5

[grid-5 한칸,한칸,셋칸] 예제소스보기

column 3/5
column 2/5

[grid-5 셋칸,두칸] 예제소스보기

column 2/5
column 3/5

[grid-5 두칸,셋칸] 예제소스보기

column 4/5
column 1/5

[grid-5 넷칸,한칸] 예제소스보기

column 1/5
column 4/5

[grid-5 한칸,넷칸] 예제소스보기

column 5/5

[grid-5 한칸] 예제소스보기


레이아웃 사용법

  • 1 사용자는 한줄에 몇칸이 들어갈지(구조)를 먼저 생각한다[예)3칸]
  • 2 그에 맞는 컬럼[3컬럼]을 "예제소스보기" 클릭해서 복사해서 붙여넣는다.
  • 3 각각의 [column 1/3]에 내용을 입력한다.

현재 보이는 컬럼의 색상은 사용자에게 설명하기 위해 인위적으로 덮어씌운 것으로 원래 색상은 없습니다.

TOP

등록일:
마지막 수정일:
답변
목록

스타일시트(CSS)

총글수: 12
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
12 없음 현재글:레이아웃 구조 추천:0 조회:5556
11 없음 색상표 추천:0 조회:5289
10 없음 버튼 추천:0 조회:8827
9 없음 하이라이트 추천:0 조회:4683
8 없음 인용구 추천:0 조회:3390
7 없음 테이블(표) 추천:0 조회:3579
6 없음 박스 리스트 추천:0 조회:3938
5 없음 텝박스 추천:0 조회:4148
4 없음 아이콘 추천:0 조회:6484
3 없음 반응형 기타 추천:0 조회:3458
초기화 
스타일시트(CSS) 검색