NARADESIGN

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


HTML5 & Responsive Web Design(반응형 웹 디자인).

본문 건너 뛰기

최근 블로그를 HTML5와 반응형 웹 디자인으로 리팩토링 했습니다. 제목은 거창한데 사실 별것 없습니다. 바꾸는데 하루도 걸리지 않았고 무엇을 바꾸었는지 소스 코드를 한 줄씩 설명해 보겠습니다.

HTML5

HTML5로 변경하는데는 약 2~3시간 정도 밖에 걸리지 않았습니다. 하지만 고민했던 시간은 꽤 길었습니다. div, section, article 요소를 혼동하지 않기 위해서 의미를 정확하게 이해해야 했습니다. DTD를 변경하고 header, footer 같은 새 요소들을 사용하면 IE6와 같은 낡은 브라우저에서 저 낮선 요소들을 어떻게 처리하는지 걱정도 했습니다.

HTML5 DTD declaration

HTML5 DTD는 매우 간단합니다. 예전에는 DTD를 외워보려고 갖은 애를 써도 그러지 못했는데 이제는 잊으려 애를 써도 잊지를 못합니다. <!doctype html> 이라고 적으면 끝입니다. case-insensitive. 대소문자를 구별하지 않으니 대문자로 쓰거나 소문자로 쓰거나 섞어 쓰거나 상관 없습니다. HTML5는 DTD 뿐만 아니라 요소와 속성 모두 case-insensitive 입니다. 대소문자를 구별하지 않습니다. 그러나 요소 이름과 속성을 대문자로 쓴다고 하면 말리고 싶습니다. 다른 이유는 없구요. 보기 불편하니까요.

Human language declaration

WCAG 2.0 지침의 3.1.1 항목을 보면 다음과 같은 구문이 있습니다.

“페이지 언어: 모든 웹 페이지의 기본 휴먼 랭귀지는 기계적으로 판단할 수 있어야 한다. (수준 A)”

휴먼 랭귀지란 사람이 쓰는 자연어를 말합니다. 수준 A란 최소한의 요구 조건 입니다.

<html lang=”ko”>

이렇게 html 요소에 한국어 휴먼 랭귀지 선언을 할 수 있습니다. 웹 문서에 휴먼 랭귀지를 선언하면 텍스트를 음성으로 변환해주는 시각장애인용 화면낭독기는 적합한 음성 엔진을 이용해서 웹 문서를 읽어줍니다. 예를 들어 로마자는 영어에만 쓰이는 것이 아니라 유럽에서 두루 쓰이는데요. 휴먼 랭귀지 속성을 선언하면 시각장애인용 화면 낭독기가 로마자를 어떻게 발음을 해야 하는지 정확히 알 수 있습니다. 한국형 웹 콘텐츠 접근성 지침인 KWCAG 2.0 지침에도 동일한 내용이 포함되어 있습니다. KWCAG 2.0에 포함되어 있다는 것은 향후 웹 접근성 품질마크 심사 지표에도 반영이 된다는 의미 입니다. 다음 회차의 웹 접근성 품질마크에는 이 기준이 적용되므로 웹 접근성 품질마크 심사에 도전하는 제작자는 반드시 휴먼 랭귀지를 작성해야 합니다. 이것은 HTML5 뿐만 아니라 다른 버전의 마크업 언어(HTML, XHTML)에도 동일하게 적용됩니다.

HTML5 enabling script

HTML5에는 여러가지 새로운 요소들이 등장 했습니다. 그러나 낡은 브라우저들은 이것을 알아차리지 못하는 문제가 있기 때문에 새로운 HTML5 요소들을 해석하거나 렌더링하지 않습니다. 도통 사람들이 업데이트를 하려고 하지도 않고 자동으로 업그레이드를 해주지도 않는 IE 6~8 브라우저가 그렇습니다. 우리는 낡은 브라우저가 새 요소들을 인식할 수 있도록 스크립트로 처리할 수 있습니다. 이 스크립트는 문서 head에 포함해서 브라우저가 낮선 태그를 만나 허둥대는 일이 없도록 처리하는 것이 좋습니다.

<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

“if lt IE 9 = if less-than IE 9” IE 조건부 주석을 사용해서 IE9 보다 버전이 낮은 브라우저에서만 이 스크립트를 해석하도록 한 것입니다. 스크립트는 새로나온 HTML5 요소들을 브라우저가 인식할 수 있도록 추가해서 낡은 브라우저들이 HTML5 요소들을 해석하고 렌더링 할 수 있도록 해줍니다.

CSS Reset

새로 추가된 요소들이 inline 요소인지 block 요소인지 브라우저들은 모를 수 있습니다. 따라서 다음과 같이 CSS display 상태를 정의해 줍니다. HTML5에서 새롭게 추가된 요소들을 모두 block으로 선언 했습니다.

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block
}

HTML5 Markup – Document Structure

의미론적 마크업을 글로만 배우면 막상 실무에 적용할 때 생각하지 못했던 고려사항들이 발생해서 고민도 되고 마크업을 하더라도 확신이 서지 않게 됩니다. 그런 의미에서 개인 블로그는 좋은 실험 재료인 것이죠. 제 블로그의 마크업 구조는 다음과 같습니다.

  • div
    • header
      • h1
    • main
      • article
        • h1
        • section
          • h2
        • section
          • h2
          • form
    • nav
      • h2
      • h3
      • ul
        • li
    • footer

조금 더 자세히 풀어 볼까요?

  • div – 본문의 폭을 제한하거나 중앙으로 배치하는 역할만 합니다. 별 의미는 없기에 div 요소를 사용 했습니다.
    • header – 사이트 제목과 설명이 등장하는 헤더 섹션입니다.
      • h1 – 사이트 최상위 제목.
    • main – main 요소는 웹 문서 또는 웹 애플리케이션의 본문 요소 입니다. 하나의 문서에 한 번만 사용할 수 있습니다.
      • article – 포스트 본문 섹션으로써 처음에는 section 요소와 어떤 의미적 차이를 지니는지 구분하기 어려웠습니다. 그러나 article 요소는 이 영역을 독립적으로 다른곳에 옮겨놔도 하나의 완전한 문서 또는 섹션이 될 수 있는 ‘재 사용’ 가능한 또는 ‘배포 가능한’ 본문 영역이라고 설명할 수 있겠습니다. section 요소와 마찬가지로 hx 요소를 갖는 것을 강력하게 권장합니다. section과 article 요소 가운데 무엇을 써야 할지 망설여질 때에는 주변의 맥락과 분리하여 독립해도 하나의 완전한 콘텐츠가 되는지 아닌지를 판단해 보세요. 독립적이라면 article에 가깝고 현재 문서의 개요와 구조를 결정하는 역할이라면 section에 가깝습니다.
        • h1 – 포스트 본문 제목. h1이 두 번째 등장하죠. h1은 하나의 웹 페이지에 2번 이상 등장할 수 있습니다. W3C 웹 사이트도 이런 구조를 가지고 있으며 검색엔진 최적화에 좋습니다. 게시판에서 게시물 제목도 h1으로 마크업 하면 검색엔진으로부터 좋은 점수를 받을 수 있습니다. h1에 포함된 텍스트가 문서 헤드의 title 요소에도 들어가 있으면 금상 첨화죠. 제 블로그는 그렇게 처리되어 있습니다. 검색엔진이 좋아합니다.
        • section – 댓글 목록 섹션.
          • h2 – 댓글 목록 제목.
        • section – 댓글 쓰기 섹션.
          • h2 – 댓글 쓰기 제목.
          • form – 댓글 쓰기 폼.
    • nav – 사이트 글로벌 네비게이션 영역.
      • h2 – 사이트 글로벌 네비게이션 제목.
      • h3 – 사이트 글로벌 네비게이션 하위 제목.
      • ul – 비순차 목록 컨테이너. h3에 대한 게시물 목록.
        • li – 네비게이션 항목. h3에 대한 게시물 항목.
    • footer – 저작물 이용 안내 및 RSS 주소를 담은 풋터 섹션.

HTML5 Markup – Form Controls

HTML5 Form의 위력은 아이폰을 사용하는 분들이면 쉽게 체감할 수 있습니다. 제 블로그에서는 다음과 같은 타입의 Form Control을 사용 했습니다. 제 블로그의 End-user 페이지에서 Form Control 이라고 해 봐야 검색창과 글쓰기창 뿐인데요. 적용 결과는 다음과 같습니다.

<input type=”search” autocomplete=”on” />
검색창의 인풋 타입이 search 입니다.

<input type=”url” autocomplete=”on”  />
댓글 쓰기 창에서 웹 사이트 주소 입력 인풋 타입이 url 입니다.

이 밖에도 HTML5에는 새롭게 추가된 다양한 input type이 있습니다. 아래 항목들은 HTML5에 새롭게 추가된 input type 입니다. 링크를 클릭하면 실제로 코딩된 페이지를 만날 수 있습니다. 현재는 오페라 브라우저만 input type을 거의 완벽하게 지원하고 있습니다. 오페라 브라우저를 통해 예제를 확인해 보세요. 다른 브라우저와는 다르게 인풋을 좀 더 편리하게 작성할 수 있도록 도울 것입니다.

HTML5의 인풋 타입을 적절하게 사용하면 아이폰 사용자에게 다음과 같이 문맥에 알맞는 자판을 보여줄 수 있습니다. 입력 커서가 인풋에 들어갔을 때 인풋 타입을 인식해서 최적화된 자판 배열을 표시합니다.

input type=”search” 일 때 아이폰은 자판에 Search 키를 보여줍니다. 아이폰으로 input type=”search” 테스트 해보기.
input 타입이 search 일 때 아이폰 자판 - 자판에 검색 버튼이 등장

input type=”tel” 일 때 아이폰은 자판에 숫자와 + * # 키를 보여줍니다. 아이폰으로 input type=”tel” 테스트 해보기.

input 타입이 tel 일 때 아이폰 자판 - 숫자 입력 전용 키패드가 등장

input type=”url” 일 때 아이폰은 자판에 .com과 Go 키를 보여줍니다. 아이폰으로 input type=”url” 테스트 해보기.

input 타입이 url 일 때 아이폰 자판 - .com .net .co.kr 등과 같은 빠른 입력 키가 등장

input type=”email” 일 때 아이폰은 자판에 @와 . 키를 보여줍니다. 아이폰으로 input type=”email” 테스트 해보기.

input 타입이 tel 일 때 아이폰 자판 - Space 입력키 우측에 @키와 .(닷)키가 등장

input type=”number” 일 때 아이폰은 자판에 숫자와 특수문자 키를 보여줍니다. 아이폰으로 input type=”number” 테스트 해보기.

input 타입이 number 일 때 아이폰 자판 - 숫자키와 특수문자 키가 등장

Responsive Web Design

사용자가 어떤 해상도의 단말을 사용하든 그에 알맞는 뷰를 보여줄 수 있는 유연한 레이아웃 설계 기법입니다. 이름은 정말 근사하지만 막상 내용 뜯어보면 참 볼것 없습니다.

Mobile Viewport Declaration

모바일 단말기는 기본적으로 PC용 화면 전체를 작은 화면 안에서 모두 보여줍니다. 작은 화면에 전체를 담으려니 다음과 같이 글씨가 깨알만해져서 확대하지 않고는 보기가 어렵겠지요.(물론 아이폰4는 그냥 봐도 보입니다. 326dpi & 640*960px을 자랑하는 레티나 디스플레이잖아요.) 적당히 확대한 다음 수직 수평 스크롤을 해 가면서 어렵게 읽을 수 밖에 없습니다.

모바일 뷰포트를 설정하지 않고 아이폰에서 보는 화면

모바일 뷰포트를 선언하면 모바일 단말에 탑재된 웹 브라우저(Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers)는 웹 페이지를 적절히 크게 확대해서 보여줍니다.

<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes” />
meta 태그의 각 속성에 대한 자세한 설명

그러나 콘텐츠의 너비가 크기 때문에 당연히 수평 스크롤이 필요합니다. 아래 이미지를 보면 아시겠지만 오른쪽에 내용이 더 있는데 잘려서 보이지 않습니다. 사용자는 여전히 수직 수평 스크롤을 모두 해야만 하는데 이것은 여간 짜증스러운 일이 아닙니다.

모바일 뷰포트를 설정하여 아이폰에서 적당히 확대된 화면

그래서 필요한 것이 바로 Responsive Web Design 입니다. 사용자가 어떤 해상도의 단말기를 가지고 있더라도 알아서 유연하게 콘텐츠를 정돈해서 보여주는 기술이 필요합니다. 한때는 320px의 화면 너비가 모바일 화면 크기의 대세가 될 줄 알았지만 지금은 그렇지 않습니다. 매우 다양한 해상도를 지닌 디바이스들이 쏟아져 나오고 있지요. 그렇게 새로운 단말기가 등장할 때마다 그 해상도에 맞는 웹 페이지 화면을 추가로 개발하시겠습니까? 세상에 그런 삽질을.

CSS3 Media Queries

CSS3에는 Media Query 라는 명세가 있고 최신 브라우저들(IE9, Chrome, Safari, Firefox, Opera)과 아이폰용 모바일 사파리 브라우저도 이를 지원하고 있습니다. 다음은 모바일 뷰포트를 설정해서 적당히 확대한 다음 Media Query를 이용해서 레이아웃을 알맞게 정돈한 제 블로그의 모바일 화면 입니다. 아름답지요.

미디어 쿼리 문법을 간단하게 살펴보죠. 제 블로그는 모바일 환경이든 아니든 불문하고 브라우저의 너비가 980px 이하로 작아지면 화면 우측에 있는 글로벌 네비게이션이 화면 아래쪽으로 뚝 떨어집니다. 지금 브라우저의 폭을 조절해서 한번 확인해 보세요.

@media all and (min-width:980px) {    /* 화면 너비가 980px 이상이고 미디어쿼리를 지원하는 브라우저라면 아래 코드를 해석함 */
.content{ float:left; width:600px }    /* 콘텐츠 플롯하고 너비를 고정 */
.nav{ float:right; width:330px }    /* 네비게이션 플롯하고 너비를 고정 */
}

딱 이정도의 사용법만 알아도 반응형 웹 디자인은 게임 끝입니다. 게임 끝 아닙니다. 모바일 퍼스트 CSS 전략에 대해 더 자세히 알아보세요.

게임 끝.

분류: CSS,웹 기획,웹 디자인,웹 표준 | 2011년 5월 27일, 2:36 | 정찬명 | 댓글: 53개 |
트랙백URI - http://naradesign.net/wp/2011/05/27/1483/trackback/

53개의 댓글이 있습니다.

  1. Outsider 댓글:

    최근에 적용해보면서 section과 article이 많이 했갈렸는데 자세한 설명 감사합니다.

  2. DANA 댓글:

    자세한 설명~ 정말 감사합니다~
    궁금했던 내용이 잘 정리되어 이해가 되네요~ 오오~

  3. deutism 댓글:

    CSS3 Media queries Vol.1…

    얼마전에 One Web 에 대해서 잠깐 언급한적이 있었는데.. One Web 을 구현하기 위해 꼭 알아야 하는 기술인 CSS3 Media queries Module 에 대해서 아주 조금 건드려 볼까 합니다. 예전에 스터디에서 했던 주제를 고친것으로 계속 발전시켜 볼 예정입니다. 개요 HTML4.01 과 CSS2 에서 이미 media type에 대응하는 스타일 시트를 따로 구성할 수 있는 방식을 지원하고 있었지만, 미디어에 대한 특징이나 범위를 명확…

  4. 조경수 댓글:

    미디어쿼리를 사용할경우 동일한 마크업으로 디바이스 환경에따라
    다른 css를 가져옴으로써 전혀 다른 디자인을 보여줄수는 있지만..

    블로그와 같이 단순한 컨텐츠가 아닌 덩치가 큰 웹페이지의 경우 필요한 부분만
    노출시키기위해서 none시켜도 어차피 html이 불려와진 상태에서
    숨겨버리는 것이기때문에 많은 컨텐츠를 갖고 있는 웹페이지에서 사용하는건
    메리트가 없지 않나요;?

  5. 정찬명 댓글:

    @조경수
    그래서 덩치 큰 웹 페이지를 다이어트 하는 기술도 있어야 겠지요. 만약 모바일 디바이스에서 콘텐츠를 감추려면 CSS가 아니라 서버 사이드에서 출력 안함 처리를 하는게 좋다고 생각합니다.

  6. 엘카 댓글:

    낡은 브라우저에서 HTML5 처리 방법이 궁금했는데 궁금증이 풀렸습니다.
    당연한 얘기지만 이것도 써봐야지 적응할 수 있겠네요.

  7. 황금이 댓글:

    section과 article 사용함에 아직도 헷갈려요..어떤거는 article 안에 section이 있고
    어떤것은 section안에 article 있고 이상하게 의미를 이해를 못했는지 헷갈리고
    잇어요!!
    만들어 놓고도 고민에 고민을 거듭하게 되네요!!

  8. 무한탐구 댓글:

    오 이것이 미디어쿼리 !!

  9. 익명 댓글:

    중간중간에있는 내용이 웹디자이너를 위한 html5책내용이랑 비슷한부분이 있네요 이책을 읽으신건가요??
    section과 article에대한개념을 이해하기쉽게 풀어주셔서 고맙습니다
    매번와서보지만 정말 좋은정보들이 많네요

  10. 정찬명 댓글:

    @익명
    책을 읽지는 못했지만 설명이 비슷하다니 다행이네요. ^^

  11. 꼼순 댓글:

    글 잘보고 갑니다.
    웹디자이너고 표준마크업 작업만 계속 하다가.
    html5를 시도해보려고 아침부터 간단한거 만들어보고있는데요.
    지금 당장 하지않으면 시간만 흘러갈거 같아서요.
    간단한 리스트가 있는 모바일웹을 만들거니 브라우져별 안보이는거 걱정은 안해도 되겠죠?

  12. 꼼순 댓글:

    980보다 작을때, 링크는 어떻게 생기게 하는거에요?
    class명 skip 을 보여지는 스크립트가 있는건가요?

  13. 길압잡이 댓글:

    이 좋은 내용을 지금에서야 봐왔다니..
    잠시 공부를 놓은 제 자신이 부끄러워 지네요 ㅠㅠ

  14. 정찬명 댓글:

    @꼼순
    아래 코드를 분석해 보세요. CSS 미디어 쿼리를 이용한 겁니다. ^^

    @media only all and (min-width:980px){ /* 문서 너비가 980px 이상일 때 */
    .skip a{height:1px;width:1px;padding:0;overflow:hidden}
    .skip a:hover,
    .skip a:active,
    .skip a:focus{height:auto;width:auto;padding:5px 10px;font-size:inherit;line-height:normal}
    }

    @media only all and (max-width:980px){ /* 문서 너비가 980px 이하일 때 */
    .skip a{height:auto;width:auto;padding:5px 10px;font-size:inherit;line-height:normal}
    }

  15. 정찬명 댓글:

    @길앞잡이
    저도 알게된지 얼마 안됐어요. 지금 알았다고 해도 늦은거 아닙니다. ㅎㅎ

  16. Naph 댓글:

    뷰포트가 너무 궁금했는데 해결되었어요. 감사합니다.

  17. 하잉 댓글:

    정말 감사드립니다. 좋은 지식 공유 감사드립니다. 앞으로도 잘 부탁드립니다.

  18. CMD 댓글:

    오~~~ 좋은 정보 감사드립니다^^

  19. yiabb 댓글:

    http://www.ccca.kr/990 pdf
    완전 재밌는 자료에요!

  20. 정찬명 댓글:

    @yiabb
    덕분에 알았습니다. 고맙습니다. ^^

  21. […] 주제는 CSS 디자이너를 위한 모바일 퍼스트 전략 인데요. 작년에 썼던 'HTML5 & Responsive Web Design' 포스팅과 관련이 있습니다. 모바일 퍼스트 전략이라는 것은 IT 기업들 […]

  22. 익명 댓글:

    2012 html5 & 하이브래드앱 레볼루션 세미나를 들은 사람인데요

    그 세미나에선 nhn 사이트를 개편하신걸 예로들어서 세미나를 하셧는데

    지금 nhn은 반응형웹디자인이 안되어있네요.

    이유가 무엇인가요?

  23. 정찬명 댓글:

    @익명
    NHN 사이트를 개편해 본 것은 세미나를 위해 개인적으로 시도해 본 일이고 공식적으로 적용된 사례를 언급한 것이 아니었습니다. 이 부분을 명료하게 설명하지 않아 착오가 있었다면 사과 드립니다. 죄송합니다.

  24. 꼼순 댓글:

    모바일웹에서 input 타입을 영문자판 먼저 오게 하려면 어떻게 해야 할까요?

  25. 정찬명 댓글:

    @꼼순
    CSS ime-mode 라는 속성이 관련 속성인데요. 모바일 브라우저에서 지원하는지 여부는 모르겠습니다.

  26. […] 최근 출시된 쇼핑몰 테마가 눈에 띄어 소개합니다. 이 테마의 특징은 반응형 디자인으로 제작되었다는 것인데, 브라우저의 사이즈에 따라서 레이아웃이 […]

  27. […] 최근 출시된 쇼핑몰 테마가 눈에 띄어 소개합니다. 이 테마의 특징은 반응형 디자인으로 제작되었다는 것인데, 브라우저의 사이즈에 따라서 레이아웃이 […]

  28. 이순재 댓글:

    바꾸는데 하루도 걸리지 않았고, 별것..실력이 부족한 저로써는 너무 어렵지만
    좋은 글 감사드립니다. 모바일할떄 가로스크롤에 대한것에 공감하고 갑니다. 감사드려요.

  29. 정찬명 댓글:

    @이순재
    제가 너무 잘난척을 했네요. 죄송합니다. ㅎㅎ

  30. 차은화 댓글:

    지난5월 HTML5, CSS3를 이용한 반응형웹디자인 구현 실무 라는 교육들었었는데요~ 파일좀 받을수 잇을까요?
    hssfig앳nate.com 입니다 ^^

  31. 알고싶어요 댓글:

    를 넣으면 낡은 브라우저에서도 html5의 input type을 사용할 수 있는 건가요??

  32. 정찬명 댓글:

    @차은화
    메일로 발송해 드렸습니다. ^^

  33. 정찬명 댓글:

    @알고싶어요
    html5.js 파일을 사용한다 하더라도 IE 6~8 브라우저는 input의 새로운 type을 정식으로 지원하지 않습니다. IE 6~8 브라우저는 그저 기본값 type=”text” 으로 받아들여 처리할 것입니다. html5.js 파일은 그저 새로 추가된 요소들을 브라우저에서 표시될 수 있도록만 지원 합니다.

  34. 알고싶어요 댓글:

    기본값으로 처리해준다면 에러가 나거나 브라우저에 표시가 되지 않는 것 같은 일은 일어나지 않는다는 말씀이시지요?
    답변 감사드립니다!

  35. 정찬명 댓글:

    @알고싶어요
    input type=”search”와 같은 형식의 새로운 타입을 작성해도 IE 6~8 브라우저는 그저 input type=”text”로 해석해서 표시하게 됩니다. 왜냐하면 브라우저가 모르는 값이 등장했기 때문에 type 속성을 통째로 무시하게 되는데요. 기본적으로 type 속성이 작성되지 않는 경우 기본값은 type=”text” 으로 해석되기 때문입니다. 표준에 의하면 type 속성은 생략 가능하고 생략했을 때 기본 값이 text 라서 그렇게 동작하게 되어 있습니다.

  36. 알고싶어요 댓글:

    IE에서 html5페이지를 열었을 때 스크립트 처리되지 않은 화면(깨져보이는엉망진창인화면) 자바스크립트를 실행하기 전에 잠깐 보이잖아요~
    그걸 보이지 않게 할 수는 없는 건가요?

  37. 알고싶어요 댓글:

    낡은 IE브라우저에서요~

  38. 정찬명 댓글:

    @알고싶어요
    CSS 참조 코드가 JS 참조 코드보다 위에 있다면 더 이상 뭔가 할 수 있는게 없습니다. 어쩔 수 없는것 같아요. 혹시라도 방법을 찾으면 제게도 알려주세요. ^^

  39. 알고싶어요 댓글:

    아 그렇군요 ㅠㅠ
    왠지 클라이언트가 한 소리 할 거 같아서 처리 방법이 있다면
    적용하려고 했는데~
    만약 문제를 제기하신다면 어쩔 수 없는 일이라고 해야겠네요…

  40. 임박 댓글:

    친절하고 알기쉽게 설명해 주셔서 감사합니다 ^^

    하지만…
    section과 article에 관한 의문은 끊임이 없습니다.
    본문을 article로 한것은 이해가 가는데요
    왜 댓글부분이 section이 되는지 잘 이해가 가지 않습니다.
    댓글은 본문과 연계가 있기때문에 section을 쓴 것인지….궁금합니다 !!!
    또 다른 설명을 보면요 사용자가 등록한 코멘트 같은경우는 article이라 했거등요// 궁금합니다 정찬명님!!!

  41. 손성원 댓글:

    정말 유용한 정보가 가득합니다.
    현재 웹표준을 공부하고 있는 입장에서
    좋은 자료가 많고 잘 정리되어 있어서
    이렇게 덧글을 남기고 가봅니다^^

  42. […] 최근 출시된 쇼핑몰 테마가 눈에 띄어 소개합니다. 이 테마의 특징은 반응형 디자인으로 제작되었다는 것인데, 브라우저의 사이즈에 따라서 레이아웃이 […]

  43. 알고싶어요 댓글:

    반응형웹을 적용한 사이트를
    모바일에서는
    각각의 콘텐츠들을 간략히 보이게 하는 것 정도가
    옳은 것일까요…
    각각의 콘텐츠 중 몇 개를 아예 보이지 않게 처리하는 것이
    옳은 것일까요..?

    이전 글 중 CSS로 보이지 않게 처리하려면 아예
    서버사이드에서 없애는 것이 옳은 것이라고 하셨는대요..

    그 처리를 해줄 수 없다면 위 둘 중에서 어떤 것이 옳은 것일까요???
    정찬명님의 생각이 궁금합니다…

  44. 정찬명 댓글:

    @임박
    article 요소는 주변 맥락을 제거해도 독립적으로 하나의 완전한 콘텐츠가 되는 경우에 적합합니다. 댓글 영역을 article로 마크업 해도 틀렸다고 보기 어렵지만 주변 맥락을 제거하면 이해하기 어렵기 때문에 section이 더 적합하다고 판단했습니다. 정답이 딱히 있는 문제가 아니라서 제 설명이 정답이라고 생각하실 필요는 없습니다.

  45. 정찬명 댓글:

    @알고싶어요
    콘텐츠의 종류나 상황에 따라 다른 결정을 내릴것 같아요.

  46. […] naradesign.net –  HTML5 & 반응형 웹디자인 […]

  47. withstory.net 댓글:

    upgrade to wp 3.5, responsive design…

    WordPress 3.5 “Elvin” from. WordPress 3.5 가 나왔다고해서 업그레이드 했답 한글로된 추가된 기능 설명은 New! 워드프레스 3.5 새로운 기능 소개 from. HwangC의 착한 워드프레스 워낙 기본 기능만 사용해서인지,, 별로 달라지는건 체감 못 하겠고..-0- mediauploader 도 안 쓰고 quicktags 만 쓸뿐이니 editor 가 달라진들 theme 도 너무 뒤쳐진듯하여 Twenty Twelve 랑 …

  48. Madman 댓글:

    강좌 잘 보았습니다

댓글 쓰기

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

필수 아님

필수 아님