[프론트엔드 스쿨 6기] 🗓️ 5월 26일

유동균·2023년 5월 25일

TIL 멋쟁이 사자처럼

프론트엔드 스쿨 6기

목록 보기

4/44

📚 공부한 내용

웹표준과 웹접근성

웹표준

웹표준이란?
웹표준은 W3C의 토론을 통해 나온 권고안을 말하며 HTML, CSS, Javascript, DOM 등 웹에서 "표준"적으로 사용되는 기술을 의미한다.

웹표준의 요소

HTML(Hyper Text Markup Language) :구조 설계
- XML(eXtensible Markup Language)
  - 저장되는 데이터의 구조를 기술하기 위한 언어
  - HTML이 데이터의 표현에목적을 두고 있다면
    XML은 데이터 교환을 위한 구조정의에 목적이 있다.
- XHTML(eXtensible Hypertext Markup Language)
  - XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격하다.
  - 기존의 부정확한 HTML의 문법들을 보완하고자 나온 것이 XHTML

vscode XHTML setting

// settings.json
"emmet.syntaxProfiles": {
  "attr_case": "lower",
  "attr_quotes": "double",
  "html": "xhtml",
  "inline_break": 3,
  "self_closing_tag": "xhtml",
  "tag_case": "lower"
}

CSS(Cascading Style Sheet) : HTML, XHML, XML 같은 문서의 스타일링
Javascript : 웹 페이지에서 복잡한 기능을 구현

웹접근성

웹접근성이란?
웹 접근성은 웹 사이트, 도구, 기술이 모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 사용할 수 있도록 설계 및 개발된 것

웹접근성 준수의 필요성
웹 접근성을 준수하게 되면 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이용할 수 있게 된다.

웹 콘텐츠 접근성 가이드라인(Web Content Accessibility Guidelines)

원칙	설명
인식 Perceivable	모든 사용자는 서비스 콘텐츠를 인식할 수 있어야 한다.
	Q: 시/청각 장애를 가진 사용자가 서비스를 인식하는데 문제가 없습니까?
운용 Operable	모든 사용자는 서비스의 기능을 운용할 수 있어야한다.
	마우스 없이 서비스를 이용할 수 있고, 성공적으로 수행할 수 있습니까?
이해 Understandable	모든 사용자가 서비스의 콘텐츠, 기능 사용법 등을 이해하기 쉬워야 한다.
	명확하고 이해하기 쉬운 콘텐츠를 제공하고 있습니까?
견고 Robust	사용자가 이용하는 모든 기기 및 브라우저에서 접근, 사용 가능해야 합니다.
	특정 운영체제 또는 브라우저에서만 서비스를 이용할 수 있지 않나요?

웹접근성 준수
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)

접근성과 상호 운용성을 향상시키기 위한 WAI-ARIA는 역할(Role), 속성(Property), 상태(State) 등의 3가지 기능을 제공한다.

역할(Role) - 유저 인터페이스(User Interface, 이하 UI)에 포함된 특정 컴포넌트의 역할을 정의
속성(Property) – 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 “aria-*”라는 접두사를 사용
상태(State) - 해당 컴포넌트의 상태 정보를 정의

RIA 기법은 ARIA 속성을 사용하여 RIA의 구조, 의미, 상태를 설명함으로써 보조 기술을 사용하는 장애인들이 RIA를 보다 쉽게 이해하고 사용할 수 있도록 도와줍니다.

시맨틱(Semantic)
시맨틱이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다.
- 헤더/푸터에 <header>와 <footer> 사용
- 메인 컨텐츠에 <main>과 <section> 사용
- 독립적인 컨텐츠에 <article> 사용
- 최상위 제목으로 <h1> 사용
- 순서가 없는 목록으로 <ul>과 <li> 사용
- 내비게이션에 <nav>사용

git clone / branch / merge

1. 원격 서버의 저장소를 복제
> git clone 원격 저장소 경로

> git clone https://github.com/ryudg/pract.git
Cloning into 'pract'...
remote: Enumerating objects: 11, done.
remote: Counting objects: 100% (11/11), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 11 (delta 0), reused 11 (delta 0), pack-reused 0
Receiving objects: 100% (11/11), done.

2. 브랜치 생성 및 병합

> git branch 생성할 브랜치명
> git merge 병합할 브랜치명

# lion이라는 브랜치를 생성
> git branch lion
# lion이라는 브랜치로 이동
> git switch lion
# main 브랜치로 복귀
> git switch main
# lion 브랜치를 main 브랜치로 병합
> git merge lion
# lion 브랜치 삭제
> git branch -d lion
# 원격 브랜치 삭제
> git push <원격 저장소 이름> -d <원격 브랜치 이름>

유동균

이전 포스트

[프론트엔드 스쿨 6기] 🗓️ 5월 26일