Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
아재가 젊은이에게
사랑받는 마크업을
하는 방법
아저씨가 젊은이들에게 사랑 받기 위한 현대적인 HTML/CSS 마크업
사랑받는 마크업 == 시맨틱한 마크업
왜 시맨틱한 마크업을 

해야하는가?
접근성
대다수 사용자에겐 별로 중요하지 않음
SEO
시맨틱해야만 검색 결과 상위에 노출되는 게 아님
이것이 중요하지 않다는 게 아니라 상대를 설득하거나
동기부여 하는데 다소 논리적 빈약함이 있다는 뜻
코딩 규칙과 유지보수성
글로벌 기준의 코딩 규칙 확보, 유지보수성을 높임
의도의 명확성
개발자가 의도한 요소의 뜻을 명확하게 드러냄
협업 개발자간 커뮤니티를 위해 변수명 하나도 허투루 짓지 않듯
마크업 역시 동일한 관점...
匠人
마크업하는 한 인간으로써 작가
(Editorial writer)나 디자이너의
의도를 정확히 이해하고 코드로
명확히 표현해야 할 책임이 있다
강조에는 여러가지 의미가 있다.
<b> … </b>
문서 또는 문장에서 다른 글자와의 문체가 다른 키워드, 테마 등을 나타냄
<em> … </em>
문장의 주된 뉘앙스와 관련된 키워드나 내용을 강조함
<strong> …...
EXAMPLE - <mark>
https://codepen.io/SitePoint/pen/QNLyLV
EXAMPLE - <dfn>
https://codepen.io/njbair/pen/bxcdu
강조 외에 부차적인 문의 상태는?
<small> … </small>
면책 사항, 주석 등 문서 속의 부차적인 내용을 나타냄
<del> … </del>
과거에 작성했지만 이제 참조할 필요가 없는 내용을 나타냄
<ins> ...
EXAMPLE - <ins>
https://codepen.io/pcwebschools/pen/wGVBNJ
EXAMPLE - <s>
https://codepen.io/SitePoint/pen/dMbGoO
문장의 상태 구별을 더욱 명확하게! - 1
<i> … </i>
소설속등장인물의생각이나대사,관용구,속담,고유명사등평범한글자구분됨을나타냄
<q> … </q>
짧은 인용문을 나타냄, 인용문이 길다면 <blockquote>을 ...
문장의 상태 구별을 더욱 명확하게! - 2
<abbr> … </abbr>
준말을 나타내며 title 속성으로 그 준말의 원형을 명시
<cite> … </cite>
책이나 신문, 텔레비전, 노래, 영화 등과 같이 참조(인...
EXAMPLE - <u>
https://codepen.io/tutorialio/pen/ryWZWR
EXAMPLE - <time>
https://codepen.io/tutorialio/pen/YZpOPy
EXAMPLE - <cite>
https://codepen.io/w3tr/pen/bVWQvq
EXAMPLE - <kbd>
https://codepen.io/tutorialio/pen/VpKPoj
보편적인 이름으로 각 폼의 이름을 정한다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
https://html.spe...
HTML의 조각을 렌더링할 때는?
<template> … </template>
기본적으로 파싱은 되지만 렌더링되지 않으며 이를 복제하여 특정 DOM
요소의 자식 요소로 배치해 렌더링 시킬 때 사용
<template id...
EXAMPLE - <template>
https://codepen.io/wolf-w/pen/ZGLdPr
EXAMPLE - <details>
https://codepen.io/tutorialio/pen/QpwKOO
증분 검색(Incremental search)을 구현할 때는?
<datalist> … </datalist>
자식 요소로 <option>을 갖고 검색 키워드와 매치되는 요소 목록을
보여주는 UI를 만들때 사용
<input...
EXAMPLE - <datalist>
https://codepen.io/tutorialio/pen/OpPXrP
모달 팝업(Modal Popup)을 구현할 때는?
<dialog> … </dialog>
대화 상자 또는 얼럿과 같은 팝업 UI를 구현할 때 사용
<dialog class="mdl-dialog">
  <h4 class="...
EXAMPLE - <dialog>
https://codepen.io/SitePoint/pen/XNaLOg
컨텍스트 메뉴를 커스텀하려면?
<menu> … </menu>
네이티브 컨텍스트 메뉴에 특정 기능 메뉴를 제공하고자할 때 사용
<button type="menu" menu="example">메뉴</button>
<menu...
EXAMPLE - <menu>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_menuitem
스크린 사이즈에 맞춰 이미지를 출력하려면?
<picture> … </picture>
화면 사이즈에 따라 이미지를 다르게 출력하고자 할 때 사용
<picture>
  <source srcset="image@x2.png" ...
EXAMPLE - <picture>
https://codepen.io/olivier-c/pen/QNYRPG
감사합니다.
Upcoming SlideShare
Loading in …5
×

아재가 젊은이에게 사랑받는 마크업을 하는 방법

11,732 views

Published on

.

Published in: Engineering
  • 기억했다가 잘 사용할게요. 감사합니다.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 좋은 내용 잘 보았습니다 ^^ 감사합니다.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

아재가 젊은이에게 사랑받는 마크업을 하는 방법

  1. 1. 아재가 젊은이에게 사랑받는 마크업을 하는 방법
  2. 2. 아저씨가 젊은이들에게 사랑 받기 위한 현대적인 HTML/CSS 마크업
  3. 3. 사랑받는 마크업 == 시맨틱한 마크업
  4. 4. 왜 시맨틱한 마크업을 
 해야하는가?
  5. 5. 접근성 대다수 사용자에겐 별로 중요하지 않음 SEO 시맨틱해야만 검색 결과 상위에 노출되는 게 아님 이것이 중요하지 않다는 게 아니라 상대를 설득하거나 동기부여 하는데 다소 논리적 빈약함이 있다는 뜻
  6. 6. 코딩 규칙과 유지보수성 글로벌 기준의 코딩 규칙 확보, 유지보수성을 높임 의도의 명확성 개발자가 의도한 요소의 뜻을 명확하게 드러냄 협업 개발자간 커뮤니티를 위해 변수명 하나도 허투루 짓지 않듯 마크업 역시 동일한 관점에서 시맨틱을 바라봐야 한다.
  7. 7. 匠人 마크업하는 한 인간으로써 작가 (Editorial writer)나 디자이너의 의도를 정확히 이해하고 코드로 명확히 표현해야 할 책임이 있다
  8. 8. 강조에는 여러가지 의미가 있다. <b> … </b> 문서 또는 문장에서 다른 글자와의 문체가 다른 키워드, 테마 등을 나타냄 <em> … </em> 문장의 주된 뉘앙스와 관련된 키워드나 내용을 강조함 <strong> … </strong> 문장에서 가장 주요한 항목이나 심각한 문제임을 드러내고 강조함 <mark> … </mark> <dfn> … </dfn> 검색과 같은 특정 액션에 따라 결과적으로 주목이 필요한 부분을 나타냄 고유 명사나 전문 용어, 서비스 이름 등 특정 정의어를 나타냄
  9. 9. EXAMPLE - <mark> https://codepen.io/SitePoint/pen/QNLyLV
  10. 10. EXAMPLE - <dfn> https://codepen.io/njbair/pen/bxcdu
  11. 11. 강조 외에 부차적인 문의 상태는? <small> … </small> 면책 사항, 주석 등 문서 속의 부차적인 내용을 나타냄 <del> … </del> 과거에 작성했지만 이제 참조할 필요가 없는 내용을 나타냄 <ins> … </ins> 새롭게 추가된 문자나 변경된 내용을 나타냄 <s> … </s> 정보가 낡아 관련 없는 정보가 됐거나 정확성이 보장되지 않는 내용을 나타냄
  12. 12. EXAMPLE - <ins> https://codepen.io/pcwebschools/pen/wGVBNJ
  13. 13. EXAMPLE - <s> https://codepen.io/SitePoint/pen/dMbGoO
  14. 14. 문장의 상태 구별을 더욱 명확하게! - 1 <i> … </i> 소설속등장인물의생각이나대사,관용구,속담,고유명사등평범한글자구분됨을나타냄 <q> … </q> 짧은 인용문을 나타냄, 인용문이 길다면 <blockquote>을 사용 <u> … </u> 분명하게 발음할 수 없는 텍스트(타이포, 심볼, 오탈자, 한자 등)를 나타냄 <time> … </time> 시각, 일시 등의 시간 정보를 나타냄
  15. 15. 문장의 상태 구별을 더욱 명확하게! - 2 <abbr> … </abbr> 준말을 나타내며 title 속성으로 그 준말의 원형을 명시 <cite> … </cite> 책이나 신문, 텔레비전, 노래, 영화 등과 같이 참조(인용)하고 있는 
 창작물의 제목이나 작가명 또는 참조원 URL 등을 나타냄 <kbd> … </kbd> 사용자에게 제공하고 있는 입력 키(단축키나 명령키)를 나타냄 <address> … </address> 제작자나 책임자 등의 개인 / 조직의 연락처 정보를 나타내며 "주소"를 
 뜻하는게 아님
  16. 16. EXAMPLE - <u> https://codepen.io/tutorialio/pen/ryWZWR
  17. 17. EXAMPLE - <time> https://codepen.io/tutorialio/pen/YZpOPy
  18. 18. EXAMPLE - <cite> https://codepen.io/w3tr/pen/bVWQvq
  19. 19. EXAMPLE - <kbd> https://codepen.io/tutorialio/pen/VpKPoj
  20. 20. 보편적인 이름으로 각 폼의 이름을 정한다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete https://html.spec.whatwg.org/multipage/forms.html#autofill
  21. 21. HTML의 조각을 렌더링할 때는? <template> … </template> 기본적으로 파싱은 되지만 렌더링되지 않으며 이를 복제하여 특정 DOM 요소의 자식 요소로 배치해 렌더링 시킬 때 사용 <template id="jsi-hoge">    <dl>     <dt></dt>      <dd></dd>    </dl> </template> <details> … </details> 개요와 상세 부분을 분리하고 사용자가 의사에 따라 상세 내용을 노출하고자 할 때 사용 <details id="jsi-hoge">   <summary>개요<span>...자세히보기</span></summary>   <p>자세한 내용</p> </details> HTML 5.1
  22. 22. EXAMPLE - <template> https://codepen.io/wolf-w/pen/ZGLdPr
  23. 23. EXAMPLE - <details> https://codepen.io/tutorialio/pen/QpwKOO
  24. 24. 증분 검색(Incremental search)을 구현할 때는? <datalist> … </datalist> 자식 요소로 <option>을 갖고 검색 키워드와 매치되는 요소 목록을 보여주는 UI를 만들때 사용 <input type="text" list="example" />   <datalist id="example">    <option>후보 1</option>    <option>후보 2</option>    <option>후보 3</option> </datalist>
  25. 25. EXAMPLE - <datalist> https://codepen.io/tutorialio/pen/OpPXrP
  26. 26. 모달 팝업(Modal Popup)을 구현할 때는? <dialog> … </dialog> 대화 상자 또는 얼럿과 같은 팝업 UI를 구현할 때 사용 <dialog class="mdl-dialog">   <h4 class="mdl-dialog__title">Allow data collection?</h4>   <div class="mdl-dialog__content">     <p> Allowing us to collect data will let us get you the information you want faster. </p>   </div>   <div class="mdl-dialog__actions">     <button type="button" class="mdl-button">Agree</button>     <button type="button" class="mdl-button close”> Disagree </button>   </div> </dialog> HTML 5.2
  27. 27. EXAMPLE - <dialog> https://codepen.io/SitePoint/pen/XNaLOg
  28. 28. 컨텍스트 메뉴를 커스텀하려면? <menu> … </menu> 네이티브 컨텍스트 메뉴에 특정 기능 메뉴를 제공하고자할 때 사용 <button type="menu" menu="example">메뉴</button> <menu type="popup" id="example">    <menuitem type="radio" label="왼쪽" icon="left.png" onclick="setAlign('left')">    <menuitem type="radio" label="중앙" icon="center.png" onclick="setAlign('center')">    <menuitem type="radio" label="오른쪽" icon="right.png" onclick="setAlign('right')">    <hr />    <menuitem type="command" label="적용" icon="decide.png" onclick="decide()"> </menu> HTML 5.1
  29. 29. EXAMPLE - <menu> https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_menuitem
  30. 30. 스크린 사이즈에 맞춰 이미지를 출력하려면? <picture> … </picture> 화면 사이즈에 따라 이미지를 다르게 출력하고자 할 때 사용 <picture>   <source srcset="image@x2.png" media="(min-width: 641px)">   <source srcset="image@x3.png" media="(min-width: 769px)">   <source srcset="image@x4.png" media="(min-width: 961px)">   <img src="image.png" alt="" /> </picture> <picture>   <source srcset="smaller_landscape.jpg" media="(max-width: 769px) and (orientation: landscape)">   <source srcset="smaller_portrait.jpg" media="(max-width: 769px) and (orientation: portrait)">   <source srcset="default_landscape.jpg" media="(min-width: 768px) and (orientation: landscape)">   <source srcset="default_portrait.jpg" media="(min-width: 768px) and (orientation: portrait)">   <img srcset="default_landscape.jpg" alt=""> </picture>
  31. 31. EXAMPLE - <picture> https://codepen.io/olivier-c/pen/QNYRPG
  32. 32. 감사합니다.

×