NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


XE CSS Framework for Layout.

본문 건너 뛰기

‘XE CSS Framework for Layout’ 이란 XE를 이용하여 제작되는 웹 페이지들의 다양한 레이아웃 요소들을 ‘이해하기 쉽고, 유연하게 변형이 가능하며, 효과적으로 생성’하기 위한 HTML과 CSS코드 작성 규칙 입니다. CSS 프레임웍은 다양한 컬럼 구조의 화면 배치와 레이아웃의 성질에 직접적으로 관여하여 스킨 제작자들을 도울 것입니다.

레이아웃 성질의 이해.

레이아웃의 성질이란 쉽게 말해서 레이아웃이 고정폭인지, 가변폭인지, 또는 이 둘을 적절하게 섞은 혼합폭인지를 의미하는 용어 입니다.

  • 고정폭 레이아웃(Fixed Lauout) : 모든 레이아웃 요소들의 너비가 절대 단위(px)로 지정된 레이아웃을 말합니다.
  • 가변폭 레이아웃(Liquid Lauout) : 모든 레이아웃 요소들의 너비가 상대 단위(%)로 지정된 레이아웃을 말합니다.
  • 혼합폭 레이아웃(Hybrid Lauout) : 레이아웃 너비에 상대 단위(%)와 절대 단위(px)가 함께 사용된 것을 말합니다.

HTML 마크업 구조의 이해.

XE를 통해 제작되는 다양한 웹 페이지들은 아주 오래전에 제작된 모듈 페이지들을 제외하고 모두 다음과 같은 구조를 지니고 있습니다.

<div id="xe" class="fixed | liquid | hybrid | aLeft | aRight">
  <div id="container" class="c | ce | ec | cee | ece | eec">
    <div id="header">
      <h1></h1>
      <div class="extension"></div>
    </div>
    <div id="body">
      <div id="content"></div>
      <div class="extension e1"></div>
      <div class="extension e2"></div>
    </div>
    <div id="footer">
      <div class="extension"></div>
      <address></address>
    </div>
  </div>
</div>

DOM 계층 구조의 이해.

CSS 또는 DOM을 이용해서 화면 배치를 직접 제어하고자 할 때 아래와 같은 선택자를 이용할 수 있습니다.

  • #xe .fixed | .liquid | .hybrid | .aLeft | .aRight
    • #container .c | .ce | .ec | .cee | .ece | .eec
      • #header
        • h1
        • .extension
      • #body
        • #content
        • .extension.e1
        • .extension.e2
      • #footer
        • .extension
        • address

예약된 CSS 선택자 이름.

아 래 표에 명시된 CSS 선택자는 프레임웍에서 사용하는 예약된 이름들 입니다. 따라서 스킨 개발자는 XE에서 아래와 같은 선택자를 이용하되 새로운 선택자를 생성하고자 할 때 동일한 이름을 생성하지 않도록 유념해야 합니다. 전혀 다른 쓰임을 지닌 같은 이름의 선택자가 추가로 발생하는 경우 화면이 깨질 것입니다.

Selector Description
#xe ‘body’ 요소의 최초의 자손으로써 현재의 layout이 XE의 layout용 CSS Framework을 사용하고 있다는 것을 의미 합니다.
.fixed | .liquid | .hybrid ‘#xe’ 요소에 함께 선언되는 클래스로써 현재의 layout이 어떤 성질(고정폭, 가변폭, 혼합폭)을 갖는지를 클래스 이름으로 정의 합니다. 스스로는 아무 속성이 없지만 클래스로 하여금 자식 ‘#container’가 다양한 성질을 가질 수 있도록 제어합니다.
.aLeft | .aRight ‘#xe’ 요소에 함께 선언되는 클래스로써 현재 layout에 대한 수평 정렬을 제어 합니다. 스스로는 아무 속성이 없지만 클래스로 하여금 자식 ‘#container’가 ‘좌/우’로 정렬 될 수 있도록 제어합니다. 사용하지 않으면 가운데로 정렬 됩니다.
#container ‘#xe’ 요소의 첫 번째 자손으로써 ‘#header, #body, #footer’를 자식으로 두며 현재 레이아웃의 너비와 성질(고정폭, 가변폭)에 대한 속성을 지니고 있습니다.
.c ‘#content’를 의미하며 ‘#content’ 영역을 하나의 컬럼으로 배치 합니다. ‘.c’ 클래스가 사용된 경우 ‘.extension’ 요소들은 컬럼이 되지 못하고 아래쪽에 흐릅니다.
.ce | .ec 2컬럼 레이아웃 요소들의 수평 배치 순서를 결정하는 클래스 입니다. 각각 ‘c=#content, e=.extension’을 의미합니다.
.cee | .ece | .eec 3컬럼 레이아웃 요소들의 수평 배치 순서를 결정하는 클래스 입니다. 각각 ‘c=#content, e=.extension’을 의미합니다.
#header 현재 페이지의 ‘가장 큰 제목h1‘이 들어가며 보통은 웹 사이트의 제목이 출력되고 상단에 배치 됩니다.
#body 현재 페이지의 본문인 ‘#content’와 네비게이션 또는 확장 요소인 ‘.extension’을 자손으로 두고 있습니다.
#footer ‘저작자 정보address‘ 또는 웹 사이트 이용안내등 부가 콘텐츠가 포함 되며 보통 하단에 배치 됩니다.
#content ‘본문’으로써 다양한 형태의 정보들이 포함되며 ‘.section’ 요소를 자손으로 지닐 수 있습니다.
.extension 현재 사이트를 탐색하기 위한 ‘네비게이션’ 또는 ‘확장’ 으로써 ‘.section’ 요소를 자손으로 지닐 수 있습니다.
.e1 | .e2 ‘#body’의 자손인 ‘.extension’ 클래스와 동일한 요소에 적용되어 있는 클래스로써 두 개의 ‘.extension’이 각자 다른 배치를 가질 수 있도록 식별하는 역할을 합니다.
.section 내용을 더욱 의미있는 단위로 작게 구분할 필요가 있을 때 어느 곳에서든 사용합니다. 하나인 경우 생략할 수 있고 두 덩어리 이상을 구분할 필요가 있을 때 반드시 사용 합니다.

CSS 프레임웍 파일과 프레임웍을 이용하여 구현된 예제.

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

분류: CSS | 2009년 7월 17일, 20:34 | 정찬명 | 댓글: 31개 |
트랙백URI - http://naradesign.net/wp/2009/07/17/998/trackback/

31개의 댓글이 있습니다.

  1. 열열백 댓글:

    xe_official_v2 레이아웃을 내려받아 이용하고 있습니다.

    위 내용을 좀 읽어보고 작업을 했으면 수월 했을텐데…고생을 했네요.

    좋은 레이아웃 내려받아 사용할 수 있게 오픈해주셔서 고맙고,

    css 공부도 할 수 있게 되어..여러모로 도움을 받고 있습니다.

    고맙습니다.

  2. 정찬명 댓글:

    열열백님 같은 분이라면 제가 만든 프레임웍을 충분히 응용해서 유익하게 사용하실것 같습니다. ^^; 감사합니다. 그리고 더 좋은 제안을 언제든지 환영 합니다.

  3. 오현 댓글:

    눈팅만 하다가 글 남깁니다.
    항상 덕분에 많은것을 배우고 생각하게 된기에 고맙다는 글 한줄 남기고 싶었는데
    감사의 인사가 늦었습니다.

    게으르게 인사도 안하다가 이리 글 남기는 이유가

    CSS 프레임웍 파일에 사용자 정의 스타일 코드를 추가(override)한 파일의 ” a.skipToContent{ display:block; position:relative; width:1px; height:1px; margin:0 0 -1px 0; clear:both; overflow:hidden; text-decoration:none;}” 이 부분이 익스플로7을 강제 종료 시키는거 같습니다.
    사무실 가서 다시 체크를 해봐야 알겠지만 집에 깔린 컴의 익스플로 버전을 7로 알고 있고 집 컴에서는 그 부분에서 강제종료 되는군요.
    원인을 알고 싶습니다.

  4. 오현 댓글:

    하나만 더 여쭙겠습니다.
    http://html.nhndesign.com/css_guideline 에서는 css 표기법에서
    “중괄호 { } 안쪽은 띄어쓰기 하지 않습니다.” 라고 말하더군요.
    그런데 정찬명님의 css에서는 중괄호 안에서 띄워쓰기를 하시더군요.
    예) a.skipToContent{ display:block; position:relative; width:1px; height:1px; margin:0 0 -1px 0; clear:both; overflow:hidden; text-decoration:none;}
    늦게 배우는 것이기에 가급적 똑바로 배우고 싶어 css의 바른 표기법에 대해 좀 알고 싶습니다.

  5. 오현 댓글:

    사무실에서 체크해 보니
    “CSS 프레임웍을 이용하여 간단하게 화면의 배치와 성질을 바꿀 수 있도록 구현한 예제.”가 익스플로 6에서 강제 종료 되는군요.

  6. 정찬명 댓글:

    오현님 안녕하세요?

    1.
    XE 프레임웍 예제와 관련해서 IE6~IE7을 강제 종료 시키는 현상은 다시 한번 확인해 보겠습니다. 굉장히 치명적인 문제네요.

    2.
    html.nhndesign.com 에서 소개하고 있는 CSS 코드 중괄호 안쪽의 띄어쓰기 규칙 부분은 CSS 표준 문법에 따른 규칙이 아니라 해당 팀의 자체적인 코딩 규칙 입니다. 중괄호 안쪽의 속성과 속성 사이는 코드 가독성을 위해 띄어 쓰지만 중괄호 시작과 끝 부분은 띄어쓰지 않더라도 가독성이 있기 때문에 띄어 쓰지 말자는 규칙 입니다.

    중요한 문제를 코멘트 해주셔서 감사합니다.

  7. 정찬명 댓글:

    정식으로 설치된 IE 7.0.5730.13 버전에서 Skip to Content 부분을 키보드로 탐색해 봤는데 문제가 없었습니다. 사용하시는 브라우저 버전을 한번만 확인해 주시겠어요? 이 CSS 프레임웍은 현재 XE 텍스타일에 사용이 되었는데 이런 버그 리포트가 아직은 한번도 발생하지 않았습니다. 사용된 곳 예. http://xeui.textyle.kr/ http://naradesign.net/xe/tx/ 이 블로그들에서도 동일한 현상이 발생하는지도 더불어 확인 부탁드립니다. 감사합니다.

  8. 오현 댓글:

    집의 컴이 ie 6이더군요.
    사무실에서 IETester 프로그램으로 테스트 해보니 ie 6에서 강제종료 되는 현상이 나타나더군요.
    방금 집에서 http://naradesign.net/xe/tx/에 접속해 봤는데 역시 강제종료 되는 현상이 나타났습니다

  9. 정찬명 댓글:

    오현님 덕분에 치명적인 버그를 하나 잡았습니다. 감사합니다. 지금 http://naradesign.net/xe/tx/ 에 다시 IE6로 접속해 보시면 브라우저가 종료되지 않을 껍니다.

    원인은 키보드 포커스가 Skip to content 라는 숨은 링크에 접근하면서 0 이었던 링크 너비 값이 갑자기 auto로 바뀔 때 이것을 브라우저가 매끄럽게 처리하지 못해서 종료되는 현상이었습니다. 이것으로 IE6를 종료시키는 또 하나의 사례를 발견하게 되었습니다.

    오류를 유발했던 코드는 스킨 폴더 안에 있는 textyle.css 파일의 200라인 부근이며 다음과 같습니다.

    /* Skip To Content */

    a.skipToContent:hover,
    a.skipToContent:active,
    a.skipToContent:focus{ width:auto; … }

    오류를 피하려면 다음과 같이 변경하면 됩니다.

    /* Skip To Content */

    a.skipToContent:hover,
    a.skipToContent:active,
    a.skipToContent:focus{ width:100%; … }

    IE6 정말 가지가지 합니다.
    이렇게 갱신된 코드는 다음 배포 버전에 포함될 것입니다.
    치명적인 버그를 발견하고 제보해주신 오현님께 진심으로 감사 드립니다. (__)

  10. 오현 댓글:

    잠시 지우게 놀이 해보니 a 속성에 position:relative가 있고 a:hover에서 width와 height의 값이 둘다 auto가 될때 강제 종료 되는것 같습니다.

    정찬명님의 글을 보면서 항상 도움만 받다가 약간이나마 도움이 된거 같아서 기분이 좋군요.

  11. 정찬명 댓글:

    약간 정도가 아니라 엄청나게 도움이 되셨습니다. 지우개 놀이. ㅎㅎ. 적절한 표현이네요. 좋은 하루 되세요!

  12. 오현 댓글:

    정찬명님께 한가지 더 여쭙고 싶은게 있습니다.
    오래전에 어디서 본 글인지 모르지만 html은 css나 이미지를 읽지 못하는 상황에서
    html만으로 읽는데 아무런 문제가 없어야 한다고 들었습니다.
    그래서 그 글에서는 h1을 이미지로 처리하고 싶다면 (h1 style=”background:url(….)”)(span style=”display:none”)제목(/span)(/h1) 으로 처리하라고 본거 같습니다.
    이런 연장선으로 본다면 링크까지 걸고 싶을때는 (h1)(a href=”…..” style=”background:url(….)”)(span style=”display:none”)제목(/span)(/a)(/h1)으로 처리하는게 맞는게 아닌가 싶은데 네이버 뉴스를 보니 그냥 (h1)(a href=”….”)(img src=”….”>(/a)(/h1)로 처리했더군요. 굳이 CSS용량을 크게 만들면서 전자와 같이 해야 하는디 아니면 네이버 뉴스같이 이미지 링크로 처리해도 되는지 알고 싶습니다.

  13. 정찬명 댓글:

    네이버 뉴스와 같은 방법이 정석이고 권장하는 방법이며 CSS를 읽지 못하는 상황에서도 읽을 수 있는 방법이기도 합니다. 전자와 같은 방법은 IR(Image Replacement)기법 가운데 하나로써 오히려 display:none 때문에 화면낭독기 장치가 읽지 못하는 접근성이 떨어지는 방법 입니다. 이미지에 의미가 포함되어 있다면 배경으로 처리하지 않는것이 좋습니다. ^^

  14. 오현 댓글:

    네이버 뉴스의 소스를 복사해서 css와 이미지 주소를 차단시킨 다음에 html만 봤더니
    alt를 알아보기 힘들더군요.

    display:none이 아니라 (이건 정찬명님이 항상 사용하지 말라고 하셨던 내용인데 ㅜ.ㅜ)
    h1 a {background:transparent url(../images/clmtv.gif) no-repeat;}
    h1 a span {display:block; position:relative; width:1px; height:1px; margin:0 0 -1px 0; overflow:hidden;}
    이런 형태로 CSS처리해도 안되는 겁니까??

  15. 오현 댓글:

    정찬명님이 IR(Image Replacement)기법을 사용하지 말라고 하셔서
    다른방식을 찾던 중에 구글의 방식이 가장 적합할 것 같아서 구글의 방식으로 택하기로 했습니다.
    구글은 텍스트와 이미지를 함께 사용하면서 이미지에 position:absolute;를 줘서 텍스트 위로 이미지가 가도록 만들었더군요. css나 이미지를 못 불러 올때도 h1의 내용전달이 선명한것 같아서 가장 무난할 것 같더군요.

    정찬명님 덕분에 h1의 이미지 처리문제 다시 고민하며 해결방안을 찾는 시간이 되었습니다.

    감사합니다.

  16. 오현 댓글:

    정찬명님께
    송구스럽지만 한동안 정찬명님을 귀찮게 해도 되는지 여쭙고 싶습니다.

    웹디자인이라는 단어를 처음 접한게 1년정도 되었고 그 기간도 베트남에 거주하다 보니 정식으로 배우기 보다는 인터넷을 뒤지면서 조금씩 배워간게 전부입니다.

    그러던 중 선교사님인 숙부님으로 부터 인도차이나에 있는 선교사님들을 대상으로 하는 사이트 제작을 부탁받았고 지금 그 작업을 하는 중입니다.

    누더기로 만들어 가던 중 정찬명님이 소개하신 XE CSS Framework for Layout.의 틀을 기초로 다시 작업을 하는 중이고 지금 제가 중점을 두고 작업하는 부분은 인도차이나 쪽의 인터넷환경이 열악하기에 최악에는 html만으로 선명하게 내용전달이 되어야 한다는 것과 정찬명님의 글을 읽으면서 중요성을 각인하게 된 웹 접근성입니다.

    능력도 안되면서 욕심이 앞서다 보니 막히는 부분도 많고 그러다 보니 한 부분에서 몇일을 고민하게 되기도 합니다.

    정찬명님에게 여쭙고 한마디 듣는다면 그 몇일을 몇시간으로 줄일 수 있을 것 같기에 이렇게 감히 부탁을 드립니다.

    간혹 막히는 부분이 있으면 귀찮게 해도 될까요???

  17. 정찬명 댓글:

    현존하는 모든 IR 기법은 그 방법이 다양하지만 극단적인 환경에서 적어도 하나 이상의 단점이 존재 합니다.

    display:none 아닌 다른 방법으로 배경 이미지 뒤에 텍스트를 숨기는 경우 인쇄 할 때 아무런 내용이 출력 되지 않습니다. 그 이유는 IE 기본값이 배경색과 이미지를 인쇄하지 않음으로 체크되어 있기 때문에 인쇄를 하는 대부분의 사람들은 IR 기법이 사용된 이미지를 출력된 종이에서 확인할 수 없다는 문제가 있습니다.

    따라서 재차 강조하는 것은 내용이 담긴 이미지를 써야 할 부분은 배경으로 처리하지 않고 전경으로 처리해야 한다는 점 입니다.

    오현님 같은 분을 위해서 한국정보화진흥원에서는 웹 접근성 연구소 자문 게시판을 운영하고 있습니다. http://www.wah.or.kr/Consulting/consultList.asp 풍부한 현장 경험을 지닌 전문가 분들이 답변을 달아주고 계시구요. 저 또한 자문 활동에 참여하고 있습니다.

    물론 제 블로그를 이용하셔도 좋지만 자문 게시판을 이용하시면 오현님의 질문이 보다 공공의 이익을 위해 쓰여지게 되므로 추천 드립니다. 감사합니다. ^^

  18. 오현 댓글:

    좋은 사이트 알려 주셔서 감사합니다.

    그리고 h1의 이미지 처리문제는

    지금 이 사이트처럼

    텍스트 처리도 충분할것 같다는 생각이 들었습니다.

  19. 오현 댓글:

    이 질문은 이곳에 해야 할것 같아서 질문 드립니다.
    제가 .section별로 분류를 하고
    각 .section의 가장 상위에 h4를 이용해 분류별 소제목을 달았습니다.

    그런데 KADO-WAH 2.0 프로그램이 경고를 날리더군요.
    그 프로그램의 설명처럼 h1~h6이 있으면 무조건 날리는 경고 입니까??

    아님 제가 h4를 많이 사용 한 것인가요??

  20. 오현 댓글:

    그리고 하나만 더 질문 드리겠습니다.

    지금까지 css를 불러오지 못하더라도 메뉴의 내용이 다 보이도록 하는데 중점을 뒀습니다.

    그런데 오늘 이것 저것하다 보니
    자바스크립트를 불러오지 못하면 하위 메뉴의 내용을 다 읽지 못하더군요.

    자바스크립트를 불러 오지 못하는 상황에서 하위메뉴를 읽어줘야 하는 문제는 어떻게 해야 합니까??

    포기해야 합니까???

  21. 정찬명 댓글:

    자바스크립트를 지원하는 환경에서 필요한 forJS.css와 자바스크립트를 미지원 하는 환경에서 필요한 forCSS.css를 분리해서 작성하신 다음 다음과 같이 하시면 되겠네요.

    자바스크립트 지원 환경에서는 forCSS.css 파일과 forJS.css 파일을 함께 로드 하고
    자바스크립트 미지원 환경에서는 forCSS.css 파일만 로드 합니다.

    forCSS.css 파일에서는 모든 메뉴를 펼친 상태로 코드를 작성하고
    forJS.css 파일에서는 모든 메뉴를 접은 상태로 코드를 작성하고 선택된 메뉴만 열리도록 하면 되겠죠.

    참고할 만한 페이지가 있어 소개 드립니다.

    http://facedown.co.kr/tt/entry/overWriteScriptCss by 유인동.
    http://wiki.firejune.com/Include/Include (firejune)

    한편 알아두셔야 할 것은 자바스크립트로 CSS 파일을 로드하는 경우 다소 느려질 수 있다는 점과 화면을 렌더링 하는 찰나에 자바스크립트를 해석하기 전 해석된 forCSS.css 때문에 처음에 모든 메뉴가 열렸다가 닫히는 모습이 포착될 것이라는 점 입니다.

    최근에는 JS를 지원하지 않는 환경이 매우 극단적인 환경이라서 굳이 꼭 적용해야 한다고 말씀드리고 싶지는 않습니다.

  22. 정찬명 댓글:

    KADO-WAH 2.0 버전에 버그가 많고 지나치게 ‘경고’를 많이 합니다. ‘오류’ 정도만 확인 하시고 나머지는 그냥 무시 하시는게 정신 건강에 좋으실 껍니다. ^^

  23. 오현 댓글:

    a.skipToContent{display:block; position:relative; width:1px; height:1px; margin:0 0 -1px 0; clear:both; overflow:hidden; text-decoration:none;}
    a.skipToContent:hover,
    a.skipToContent:active,
    a.skipToContent:focus{width:100%; height:auto; margin:0 0 10px 0; padding:5px;}
    이곳에 a.skipToContent에는 font-size:1px;를
    a.skipToContent:hover,
    a.skipToContent:active,
    a.skipToContent:focus에는 font-size:12px;를 추가해 주셨으면 합니다.

    이게 없으니 f5를 누를때 마다 header를 보시면 2픽셀정도 상하운동을 하는것을 보게 되실겁니다… 어차피 페이지 열때야 한번이니 인식못한다라고 할 수 있지만 제가 끍어다 사용하는 메뉴들과 충돌하니 ie6과 ie7에서 클릭을 할때마다 상하운동을 하게 되더군요(저같은 하수들이 또 있을 수 있으니).. 뭐 고수님들이야 알아서 풀어가겠지만 저같은 하수들이 그 문제로 한나절 고생안하게 수정해 주셨으면 합니다. 어차피 처음 한번의 흔들림이지만 그것도 잡아 주는게 좋지 않을까 싶어서 적었습니다.

  24. 정찬명 댓글:

    오현님 본의 아니게 제가 고생을 시켜 드렸나요? ㅎㅎ 죄송합니다. 게다가 다른분들을 위한 배려 때문에 이렇게 댓글까지 남겨 주시는데 안 고쳐 드릴 수가 없었습니다. 감사합니다. (__)

  25. 동주 댓글:

    css를 조금 안다고 생각했던 제가 두분의 글들을 보니 세삼 대단하다는 생각이 드네요..
    아직 제가 많이 부족하다는 생각도 함께요^^

    정말로 좋은 정보들 항상 감사하게 생각합니다.. 저또한 얇은 지식이지만 여러분들과 공유하려 노력하겠습니다.

    감사합니다

  26. 정찬명 댓글:

    동주님 정말 좋은 생각이세요. 그럼 다음에는 블로그 링크 꼭 걸어주세요. ^^

  27. 찬명님팬.. 댓글:

    안녕하세요. 정찬명님 코드에 숟가락에 얻는 사람입니다..ㅎㅎ

    다름이 아니라..
    찬명님이 공개해주시는 위의 코드를 상업적인 사이트를 만들때 사용해도 되는지..
    문의드립니다..

    ps. 항상 눈팅만하다가 이런글로 남기게 되어 죄송합니다. (_ _)

  28. 정찬명 댓글:

    @찬명님팬
    제가 공개한 코드들은 저작권 표기 없이 어떤 목적이든 자유롭게 사용하셔도 됩니다.
    감사합니다. ^^

  29. 찬명님팬.. 댓글:

    @정찬명
    너무 감솨합니다.. (ㅠ_ㅠ) 나중에 밖에서 보게 되면 꼭 밥사드릴께요..^^

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님