FDS12_Markup_Summary

Web Layout

웹 접근성과 웹 표준 | WSA ( Web Standard and Accessibility )

웹접근성과 웹표준 ebOOK 바로가기

웹 표준 | Web Standards

: 여러 Browser 환경에서 표준 확인하고 지원할 수 있어야 함

웹 접근성 | Web Accessibility

The power of the Web is in its university. Access by everyone regardless of disability is an essential aspect.

Tim Berners - Lee , W3C Director and inventor of the World Wide Web

웹 표준을 지키는 것으로 웹 접근성을 강화할 수 있다.

HTML5

: C와 같은 Compiled Language가 아닌 Interpreted Language이다.

<title> 요소

Web Page 제작 3단계

  1. 선형화 (구조) 단계 : Linearize Structure

    : Markup을 할 때는 디자인이 아닌 Contents의 논리적 순서, 구조를 생각하는 것이 핵심

  2. 의미있는 요소로 마크업 : Semantic Element

    • header는 <header>, footer는 <footer> 요소를 사용
    • navigation <nav>
    • main은 <main>(중복 사용 x), side정보는 <aside>
    • <airticle> : 독립적으로 존재하는 contents
    • <section> : 장이나 절 등으로 나눌 수 있는 contents group → Contents에 대한 분석이 필요
     <header>
     <nav>
 </header>
 <div>
 <main>
 <article>
 <footer>
    ### 2-1. WAI-ARIA

    RIA(Reach Internet Application)을 위한 접근성 권고안

    • <div> : division. Computer가 <div> tag만으로 role 알기 어려움
    • role attribute : global attribute
     <div role="banner">
     <nav>
 </div>
 <div role="group">
 <div role="main">
 <div role="article">
 <footer>
    • Native로 focus 받을 수 있는 요소들
      1. <a href="">
      2. <form>에 속하는 <button> 요소 등
    • button 쓰지 못한다면 ARIA로 개선 <a role="button">

  3. Naming

    : UI 방향(top, left, bottom)이 아니라 Contents 의미에 따라서 네이밍

    • Pascal : MainContent
    • Carmel : mainContent
    • Snake : main_content
    • Cebab : main-content
    • 요즘은 id 말고 class로 주로 naming
     <div .container / .wrapper>로 전체 감싸줌!
 <header .header>
 <nav .navigation>
 <div .visual>
 <main .main>
 <article .slogan>
 <div .footer-bg> (footer 배경 칠하기 위한 배경)
 <footer .footer>

CSS Box Model (Layout)

Content-box (defualt)

: padding, margin, border 늘어날 때마다 실제 box가 차지하는 크기가 커짐

Border-box

: width, height에 padding과 border가 포함되는 방식

HTML5의 Contents Model

CSS Spec | Cascading Style Sheet

CSS spec

Align Center

Normal Flow

: Markup한 순서대로 화면에 나타나는 것

Flex Box

Css-tricks의 flexbox-guide

  1. flex container
    • 정렬할 아이템의 parent, 즉 flex container가 될 요소에 display: flex를 적용한다. 
      .containter {
 display: flex;
}
    • flex-direction
    • row 1
    • row-reverse 2

Without Flex!

  1. Float : left, right
    • group1에 float: left 속성을 적용하면 normal flow를 벗어난다. 5

      float 개체 밑에는 inline 요소가 올 수 없다. → 밀어냄!