Changseon Shin

Changseon Shin

WannaBe Web Front-end Developer

[Day 04] 웹 접근성과 표준 + HTML5 Basic + CSS Basic

웹 접근성과 표준

  • BACK-END
    • Server
    • Database
    • Application Layer
  • FRONT-END
    • Client
    • Web Browser
    • Presentation Layer
  • FRONT-END의 3가지 기술
    • HTML5 : 건강한 신체
    • CSS3 : 근사한 스타일링
    • Javascript : 스마트한 두뇌
  • 웹 표준(Web Standard)
    • 웹 표준은 W3C(World Wide Web Consortiums) 에서 제정한다.
    • 하지만 HTML5 이후 제작사에서 표준을 만들고 제정만 W3C에서 하기도 한다.
    • 책 추천 : 제프리 젤드만의 웹표준 가이드
  • 웹 접근성(Web Accessibility)
    • 웹의 힘은 보편성에 있다. 장애가 있음에도 불구하고 웹에 접근할 수 있어야 한다. - Tim Berners Lee
    • 개발할 때 고려해야 할 장애 환경
      • 시각 장애 - 전맹, 저시력
      • 청각 장애
      • 지체 장애 - 절단 및 지체기능 장애
      • 뇌병변 장애
    • 접속 환경에 대한 이해
      • 다양한 Platform
      • Cross Browsing
      • SEO (Search Engine Optimization) : 검색 엔진 최적화
      • 저사양 또는 저속회선


HTML5 Markup

  • HTML의 탄생
    • HTML 3.2
      • <center>, <font> 등의 태그가 존재했고, 이에 대한 문제점이 있었다.
    • HTML 4.01
      • [DTD] (DOCTYPE)의 등장
        • DTD를 근거로 html 문서를 해석한다.
        • DTD에 없으면 에러
      • 태그 이름에 대소문자 구분 X
    • XHTML (W3C 주도)
      • XML 처럼 태그를 사용자가 만들어낼 수 있다.
      • 소문자만 사용
      • 속성 = “값” / checked = “checked”
      • 시장에서는 실패(모든 태그가 종료 태그를 갖는 등 불편한 점 때문)
      • 호환성에도 문제
    • HTML5 (WHATWG 주도)
      • XHTML 2.0의 실패 이후 개발된 HTML
      • DTD가 아닌 브라우저에 따라 HTML 구조가 해석된다.
      • HTML + CSS + Javascript 통합된 개념
      • 콘텐츠 모델(Content Models)의 등장
        • 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화한다.
        • 콘텐츠 모델이 문법적으로 허용하느냐 아니냐가 inline, block 보다 더 중요하다.
        • 콘텐츠 모델에서 정해진 문법에 따라 구조를 잡는 것이 가장 중요하다.
      • 콘텐츠 모델의 카테고리(Category)
        • Flow, Heading, Sectioning, Metadata, Embedded, Phrasing, Interactive 등
        • 인터랙티브 콘텐츠(Interactive Content)
          • 사용자가 어떤 기능을 조작할 수 있는 (상호작용) 콘텐츠
          • 인터랙티브 콘텐츠 간에 중첩 불가
      • 아웃라인 알고리즘(Outline Algorithm)
        • <section>, <article>, <aside> , <nav> 등을 활용해 명시적으로 아웃라인(웹 페이지의 정보구조)을 잡을 수 있다.
      • API(Application Programming Interface)
        • 기능을 동작시키는 것(엄밀히 따지면 자바스크립트 함수 덩어리)
        • 오프라인 웹 구현을 위한 API
          • Web Storage
          • Web SQL Database / Indexed Database
          • Application Cache
        • 실시간 커뮤니케이션 API
          • Web Workers
          • Web Socket
          • Notifications
        • 파일/하드웨어 접근 API
          • File API(Desktop Drag-In, Desktop Drag-out)
          • Geolocation
          • Device Orientation
          • Speech Input
        • GUI를 위한 API
          • Drag & Drop
    • HTML 기본 골격
      • <!DOCTYPE html>
        • 문서 타입
      • <html lang="ko-KR">
        • html 문서의 시작
        • lang 속성은 language
        • 문서를 voice로 읽을 때에도 이 언어에 따라 읽는다. (웹 접근성 증대)
      • <head>
      • <meta charset="UTF-8">
        • 캐릭터(글자) 인코딩
        • UTF-8은 다국어 호환
        • EUC-KR은 깨진다.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
        • 반응형 사이트, 모바일 사이트를 만들 때 사용
      • <meta http-equiv="X-UA-Compatible" content="ie=edge">
        • 값에 X가 붙어 있으면 비표준
        • 브라우저 버전에 따른 호환성을 조정해서 렌더링 해준다. (호환성 보기)
        • content 속성의 경우에는 edge로 맞춰 놓으면 해당 ie의 가장 최신 버전으로 렌더링 해준다.
      • <title>
        • 문서 전체를 관통하는 제목
        • 모든 페이지에 같은 title이 달리면 SEO에 안좋다.
        • 쓸데없는 ‘*****’ 같은거 넣지 않는다. (웹 접근성 차원에서 안좋음)
        • yahoo 검색 시 html:title 로 검색하면 웹페이지의 title에 html이 포함되어 있는 것을 검색한다.
    • HTML 구조 잡기
      • 콘텐츠 중심 마크업
        • 성격이 서로 다른 contents 끼리 나누거나 묶어주는 작업이 필요하다.
        • 3단 골격
          • header
          • [ visual area ]
          • main content
          • [ slogan area ]
          • footer
        • 4단 골격
          • header
          • navigation
          • main content
          • footer
        • header area
          • 브랜딩 영역과 navigation을 포함할수 있다.
      • 의미 중심 마크업(semantic markup)
        • <div>는 의미가 1도 없다.
        • <header> - block level
        • visual area 같이 의미론적인 태그가 존재하지 않을 경우 <div>
        • <main>
        • 독립적인 섹션으로 부분적으로 떼서 전달해도 될 정도의 내용 <article>
          • <section>은 여러가지 중 하나의 섹션
          • article, section, aside, nav tag는 아웃라인에 직접적으로 영향을 미치기 때문에 heading tag를 필요로 한다.(없으면 warning)
        • <footer>
        • 모든 문서를 아우르는 영역은 <div>
        • <div> 같이 여러번 나오는 태그에는 네이밍이 필요하다.
          • id(#) - unique
          • class(.)
            • 최근에는 component 조립 위주로 개발되기 때문에 id 보다는 class로만 네이밍 한다.
          • Pascal Case (ex. MainMenu)
          • Camel Case (ex. mainMenu)
          • Snake Case (ex. main_menu (소문자 + _))
          • kebob Case (ex. main-menu (소문자 + 꼬챙이 -))
        • 바깥쪽에 div.container가 있어야 하는 이유는 컴포넌트 핸들링이 편하기 때문이다.


CSS (Cascading Style Sheet)

  • CSS3 이후로는 표준화가 모듈 단위로 진행되고 있다.
    • CSS4 가 아니라 CSS3의 어떤 모듈의 Level이 올라간다.
  • CSS 사용의 의의 : 문서의 구조와 표현을 분리한다.
  • CSS 우선순위
    • user agent stylesheet < author style
  • <body>의 기본 font-size: 16px
  • vendor prefix
    • -webkit- : chrome, safari, opera
    • -ms- : ie, edge
    • -moz : firefox
  • size 단위
    • vh : viewport height (viewport의 몇 %)
  • margin
    • margin의 좌우에 auto를 주면 viewport를 기준으로 양쪽에 균등하게 배분된다. (가운데 정렬처럼 보인다.)

댓글남기기

참고