HTML,CSS 교육

이수빈·2023년 12월 4일

웹접근성 퍼블리싱

Html, Css, JS

목록 보기

4/7

Extension

Headings Map => 웹사이트 구조파악하는 extension
Web Developer => 자바스크립트, css 같은거 disabled 할 수 있는 extension
degit => git clone이 아니라 필요한 폴더만 clone 하도록 가능하게 해주는 패키지

작업공간 만들기

듀얼모니터 없을 때 노트북으로만 작업할 경우 유용함.
window + Tab 하면 작업공간 만들 수 있음
ctrl + window 화살표로 화면 작업공간 전환가능함.

새로운 표준 HTML5

HTML의 버전 => 현재 표준 HTML5, HTML4.01, XHTML 버전 존재
HTML5은 HTML4.01, XHTML의 문법을 모두 호환가능함.

HTML Content Model

HTML5 이전에는 HTML 태그들을 inline (인라인), block (블록) 이 두 가지의 요소로만 구분을 지었음.
HTML5에 들어서면서 단순히 인라인 vs 블록의 구분이 아닌 태그의 특성에 따라 Metadata, Flow, Sectioning, Heading, Phrasing, Embedded, Interactive로 총 7개의 카테고리로 분류함
하나의 태그가 여러가지 content Model을 가질 수도 있다.

ref) https://html.spec.whatwg.org/multipage/dom.html

1.Meta Content

문서의 메타데이터, 문서관련 정보들을 담고있는 태그들이다.

base link meta noscript script style template title

2.Flow Content

플로우 컨텐츠는 문서나 Application의 본문 (body태그) 안에서 사용되는 컨텐츠임

a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas,
cite, code, command, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i,
iframe, img, input, ins, kbd, keygen,
label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre,
progress, q, ruby, s, samp, script, section, select, small, span, strong,
sub, sup, svg, table, textarea, time, ul, var, video, wbr, text

time 태그 => 날짜형식 내용 담을 때 사용함.
section => 안에 article

3.Section Content

헤더, footer의 범위를 정하는 콘텐츠이다

article aside nav section

4.Heading Content

Section content의 header를 정의하는 태그들이다
마크업 과정에서 Heading Content 태그들을 이용해 문서의 제목을 정의해줘야한다.

h1, h2, h3, h4, h5, h6

다음은 구글검색창에 구글이라고 쳐본 결과이다. headings Map에 계층구조로 나오는 형태는 Heading Content 태그들을 사용한 결과들이다.
웹 접근성 측면에서 시각장애인 분들은 스크린 리더를 사용해 페이지를 읽는데, 이 때문에 문서 header을 정의해야 정확한 정보를 탐색 할 수 있다.
header를 정의하고 보통 UI상에 나타내야 할 이유가 없다면 보이지 않도록 숨김처리한다.

5.Phrasing Content

텍스트와 텍스트가 포함된 마크업을 정의하는 컨텐츠.

abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist,
dfn, em, embed, i, iframe, img, input,
kbd, keygen, label, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp,
script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr, text

6.Embedded Content

다른 리소스를 문서에 삽입하는 컨텐츠이다.

audio, canvas, embed, iframe, img, math, object, svg, video

7.Interactive Content

사용자와 상호작용을 위해 사용하는 태그들이다

a, button, details, embed, iframe, select, textarea, keygen, label

audio (controls 속성이 있으면)

img (usemap 속성이 있으면)

input (type 속성이 hidden 상태가 아니면)

menu (type 속성이 toolbar 상태면)

object (usemap 속성이 있으면)

video (controls 속성이 있으면)

interactive Content가 동시에 들어간 마크업은 잘못된 마크업이다.

  <a><button>이게 잘못된 마크업</button></a>

Doctype

doctype에 따라 어떤 형식으로 쓰였는지 여부가 달라짐 => doctype을 확인하면 html5, html4.01 xhtml 중 어떤 형식으로 작성되었는지 알 수 있다.
dtd : document type definition

<!--html 5버전-->
<!DOCTYPE html>

<!--html 4.01 버전-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--xhtml 1.0 버전-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head></head>
  <body>
    
  </body>
</html>

doctype이 없이 html을 만들면 호환모드로 렌더링됨
doctype이 없으면 비표준!! (표준모드로 동작하게 해주는 중요한 역할이다.)
a태그 target="_blank" => 새창에 띄움
html lang 속성을 통해 언어 설정가능함. ko-KR..(korean Korea Republic, 언어-국가코드 형식)

접근성

모두를 위한 디자인 => 비장애인들을 위해 마크업을 제대로 해야함.
한글페이지에서 영어문장이 나오면 => span으로 묶은후 lang="en" 속성으로 알려주는게 맞음
항상 페이지 제목은 unique하게 줘야함(똑같으면 안됨)
검색할때 => title:html5 : 검색할때도 타이틀에 검색어를 포함해서 검색하는게 가능함.
description => 설명
keywords => 검색엔진에 검색되는 단어들

  <meta
      name="description"
      content="이디야 커피 브랜드 사이트 (학습용) 웹사이트 입니다."
    />
    <meta
      name="keywords"
      content="이디야, 커피, 브랜드, 사이트, 학습용, 홈페이지, 이듬, 블렌디드 러닝"
    />
    <meta name="author" content="이듬(E.UID)" />

SEO

검색엔진최적화

    <meta name="og:site_name" content="멀티캠퍼스 정규 과정" />
    <meta name="og:title" content="업무에 바로 쓰는 HTML5와 CSS3" />
    <meta
      name="og:description"
      content="업무에 바로 쓰는 HTML5와 CSS3 예제."
    />
    <meta name="og:url" content="https://euid.dev/" />
    <meta name="og:type" content="website" />
    <meta name="og:image" content="./images/og-image.png" />
    <link rel="icon" href="./favicon/favicon.svg" />

4.1 에는 파비콘 확장자가 ico였음.
글골계열 2가지 존재 => sans-serif, serif 인데 보통 default 글꼴로 두가지 계열중 파악해서 지정함(가장 비슷한 글꼴로)
cdn이 동작하지 않았을때, 또는 브라우저가 해당 글꼴을 인식하지 못할 때를 대비해서 적용

<link href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css" rel="stylesheet">

<style>
    body {font-family: 'SUIT Variable', sans-serif;}
</style>

시멘틱 태그 안쓸경우 div태그에 role 속성을 적용해 접근성 항상가능
태그만으로는 명확히 어떤 역할을 하는지 알기 힘든 경우 사용
role 속성으로는 여러가지 값들을 줄 수 있다.

ref) https://www.w3.org/TR/wai-aria-1.1/#roles_categorization

스크린리더 같은경우 => 원하는 곳으로 바로 jump 할수 있다.

picture 태그

https://web.dev/learn/design/picture-element?hl=ko

picture태그에 이미지를 wrapping한 형태로 사용가능함.
picture > source > img 태그를 함께 사용하는 형식으로 사용함.
source는 없어도됨. => media속성에 따라 source srcset을 설정가능 => 이걸 이미지 태그에 넣어서 보여주는 형식임.
만약 없다면 default img 렌더링

<picture>
  <source srcset="image.avif" type="image/avif"> //1 
  <source srcset="image.webp" type="image/webp"> //2
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async"> //default
</picture>

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture> 
//디바이스 폭에 따라 이미지 다르게 렌더링 가능함.

https://responsivelogos.co.uk/
source를 지정하지 않고, 이미지가 4가지 크기로 포함되어있는 그림을 하나 받아서 transition으로 위치를 조정하는 방식도 가능함.

접근성트리

접근성 트리 활성화 하면 이렇게 뜸 => Accessbility Tree임
어떻게 접근성이 보이는지 알 수 있음.

ref) https://koko8829.tistory.com/2399

figma Tip

피그마에서 css 변수로 뽑아낼 수 있다. => Export Styles to CSS variables 이거 사용하면 됨
user agent stylesheet 있음.
line height 1 이면 글자크기와 한줄의크기가 동일해짐.
line height 1.5, 1.6정도 추천
Figma For Vs Code Extension 존재 => vs Code내에서 Figma 열어서 볼 수 있다.
normalize.css

CSS

반응형 작업순서

반응형을 만들때는 mobile first로, 데스크탑에서 필요한 것 쓰는게 더 나은 방식

숨김처리코드

width, height를 최소로 주고 margin으로 바깥이동뒤, overflow : hidden 하는 형태
그냥 display : none 이나 visibiltiy :hidden 하면 되는거 아니냐?

display:none <-> block : 아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
visibility:hidden <-> visible : 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨

즉 해당 태그자체가 사라지는 경우 접근성을 항샹시키기 위해 쓴 태그라면 사라지면 의미가 없다.
visibility hidden 인 경우 공간을 차지하기때문에 문제가 발생.


.a11yHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  background: red;
  overflow: hidden;
  margin: -1px;
  border-width: 0;
  white-space: nowrap;
}

  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%); 이렇게 자를수도 있음
  
  
  .header {
  background-color: yellow;
  /* width: 740px; */
  inline-size: 74rem;
  /*넓이*/
  block-size: 200px;
  /*높이 */
} // modern단위

float 활용법

https://m.blog.naver.com/degal903/221385830893

카드뉴스같은데 정렬할때 사용하기 좋음
자식요소에 float를 주면 부모에게 떠다니는 상태가됨
display : flow-root를 부모에게주면 자식을 다시 포함하는 상태가 됨.
가상요소에 clear both속성을 줘서도 해결가능함.

.menu {
  display: flow-root;  
  background-color: lime;
  /* 
  &::after {
    content: '';
    display: block;
    clear: both;
  } */
}

.menu__item {
  float: left;
  position: relative;
  top: -10px;
}

.header {
    inline-size: clamp(74rem, 100%, 120rem);
  }

Clamp함수

clamp함수? : https://mong-blog.tistory.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EA%B5%AC%ED%98%84%EC%97%90-%EC%A2%8B%EC%9D%80-min-max-clamp
clamp(최솟값, 선호값, 최댓값) 형식으로 요소의 최소, 선호, 최댓값을 정할 수 있다.
일반적으로 선호값이 지정되지만 최솟값 미만, 최댓값 초과의 값은 지정되지 않는다.

ex) width : width: clamp(50%, 300px, 70%); 일경우?
부모요소의 너비가 670px이라면 => 335, 300, 67*7
최솟값이 335이므로 최솟값이 지정됨.
부모요소의 너비가 500px이라면? => 250, 300,350 => 300지정
부묘요소의 너비가 400px이라면? => 200, 300, 280 => 280지정

Animation Reflow, Repaint

https://bbosong-develop.tistory.com/5
1

top, left 좌표 => 애니메이션 reflow, repaint 많이 발생함.
상자에 크기에 영향을 주는 것들이 퍼포먼스에 영향을 많이 받게 됨.
transform : translate() 이용하는게 더 나음.
애니메이션 효율은 transform, opacity를 이용할 때 가장 빠르고, 그 다음은 색상이 변할 때가 빠르며 마지막으로 위치와 크기가 변할 때 가장 느리다.

CSS 요소 변화 시 렌더링 속도 비교

transform, opacity > color, background-color 등 색상 요소 > width, height 등 위치 및 크기 요소

결론
결론적으로 위치와 크기를 변화 시키는 애니메이션은 transform을 활용하고, 색상을 변화시키는 애니메이션은 opacity를 활용하는 게 가장 효율적이다.

빨강에서 파랑 등 어떤 특정 색상에서 또 다른 색상으로 변하는 애니메이션이 아니라, disabled 등 색상을 흐리게만 해도 되는 상황일 때는 opacity를 활용하는 게 좋음

Grid 사용법

참고용 좋은 사이트 : https://yamoo9.gitbook.io/css-grid/css-grid-guide
row, column 먼저 설정하고 grid-template-area로 세부 grid layout 잡을 수 있다.

.grid-container {
  grid-template-rows: repeat(3, 300px);
  grid-template-columns: repeat(4, 1fr);

  /**
   * 그리드 템플릿 영역 설정
   * 각 행은 동일한 개수의 열 설정이 요구됩니다.
   */
  grid-template-areas:
    "header header header header"  /* 1행: 4열 모두 header                */
    "main main . sidebar"          /* 2행: 2열 main 1열, 공백 1열, sidebar */
    "footer footer footer footer"; /* 3행: 4열 모두 header                */
}

/* 그리드 영역 이름 설정 */
.grid-header  { grid-area: 'header';  }
.grid-main    { grid-area: 'main';    }
.grid-sidebar { grid-area: 'sidebar'; }
.grid-footer  { grid-area: 'footer';  }

grid 안에서 item 관련 정렬하기 => alignself, justifiy self 사용

선택자

<div>
  <p>Lorem</p>
  <div>ipsum</div> 
  <p>dolor</p>
</div>

p:nth-child
nth-child는 부모 요소의 n번째 자식 요소를 의미함
p:nth-child(2)는 태그의 부모 요소를 기준으로 두 번째 자식 요소에 해당하는 ipsum를 지칭합니다.
p:nth-of-type
nth-of-type은 부모 요소의 자식 요소 중 type 조건을 만족하는 n번째 자식 요소를 의미
p:nth-of-type(2)는 부모 요소의 두 번째 dolor 자식 요소를 선택

display : inline flex

ref) https://heropy.blog/2018/11/24/css-flexible-box/

display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.
Item에는 영향이 없다. 동일함 => Container가 inline속성을 가지는 지 block 속성을 가지는지의 차이임.

Video 작업

video 태그 vs iframe태그
video 태그추천 => flexible 하게 적용하기 편하다.
iframe 같은경우 aspect-ratio 속성을 통해 크기조절해야함.
video안에 source태그를 삽입해 크로스브라우징 환경에 대응한다.

<video>
   <source src=""/>
   <source src=""/>
   <source src=""/>
</video>

줄수 제한하는 방법

-webkit-line-clamp 속성을 통해 box model에 나타나는 줄 수를 제한 가능함.
display 속성을 -webkit-box 또는 -webkit-inline-box로 주고,
-webkit-box-orient 속성을 반드시 vertical 로 설정해야만 동작함
-webkit-line-clamp은 단순히 요소의 줄 수만 제한하기 때문에 overflow: hidden 속성과 함께 사용하면 넘친 텍스트를 감출 수 있음.

BFC

ref) https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

Block formatting Context
block 요소가 아닌데, block 요소로 만들어주는 속성들이 존재한다.

aria 속성들

접근성 관련해서 활용 할 수 있는 속성들임
아래와 같이 버튼안에 svg이미지 형태가 wrapping된 형태라면, 스크린 리더가 아래 코드를 읽으면 버튼안에 텍스트를 읽어줌
svg이미지 대신 어떤 역할을 하는 버튼인지 알려면 aria-label 속성을 통해 버튼의 역할을 정의해줘야함.

<button type="button" class="button--none icon--prev" aria-label="이전 공지사항 보기">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <rect x="0.5" y="0.5" width="15" height="15" stroke="#F5F5F5" />
                  <path d="M9.25 10.5L6.75 8L9.25 5.5" stroke="#F5F5F5" />
                </svg>
              </button>

본문 바로가기 링크

웹페이지 상단에 본문 바로가기 링크가 존재 => 마우스가 아닌 키보드(Tab)키를 통해 웹 페이지에 접근하는 경우 유용
main 태그로 바로 이동할 수 있도록 Navbar 위에 숨겨놓는다.

  <div class="skipNav">
    <a href="#main">본문 바로가기</a>
  </div>

.skipNav a {
  display: block;
  padding: 1.5rem;
  text-align: center;
  background: #000;
  color: #fff;
  font-size: 1.4rem;
  position: absolute;
  inline-size: 100%;
  translate: 0 -150%;
  z-index: 10;
}

.skipNav a:focus {
  translate: 0 0;
}

순수 CSS Dark Mode

svg 파일내에 class를 정의해서 fill값을 직접적으로 바꿈
media 속성내에서 prefers-color-scheme을 받아 dark인지 light인지 모드값을 식별 할 수 있음.

 .brand{
      fill: #31287C;
    }

    @media (prefers-color-scheme: dark){
      .brand{
        fill: #fff;
      }
    }
    
    @media (prefers-color-scheme:dark) {
  .splash {
    background: var(--primary-blue-1);
    color: var(--grayscale-white)
  }

SVG-sprite

ref) https://a11y.gitbook.io/graphics-aria/svg-graphics/sprites

하나의 파일에서 여러 svg 존재함. id와 태그를 통해 사용하는 태그를 정하는 방식임.
fill값 변경 불가.
svg generator 와 같은 extension으로 쉽게 만들 수 있음
use 태그를 통해 사용가능함.
React에서도 svg sprite를 만들어놓고 동적으로 id 값을 변경하도록 사용 가능함.

 <button type="button">
    <svg>
      <use xlink:href="./images/svg/_sprite.svg#uncheck"></use>
    </svg>
  </button>

css

valid invalid 속성 존재함.

이수빈

응애 나 애기 개발자

이전 포스트

Date-fns

다음 포스트

HTML,CSS 교육

Html, Css, JS

Extension

작업공간 만들기

새로운 표준 HTML5

HTML Content Model

1.Meta Content

2.Flow Content

3.Section Content

4.Heading Content

5.Phrasing Content

6.Embedded Content

7.Interactive Content

Doctype

접근성

SEO

picture 태그

접근성트리

figma Tip

CSS

반응형 작업순서

숨김처리코드

float 활용법

Clamp함수

Animation Reflow, Repaint

Grid 사용법

선택자

display : inline flex

Video 작업

줄수 제한하는 방법

BFC

aria 속성들

본문 바로가기 링크

순수 CSS Dark Mode

SVG-sprite

css

Date-fns

JS 데이터타입 및 메모리

0개의 댓글