목차
웹표준과 웹접근성
새로운 표준 HTML5
DTD(문서형 정의)
제목과 단락
이미지와 피규어
오늘 하루를 돌아보며
웹표준과 웹접근성
Web(웹)이란?
Internet은 inter network의 약자로, 거미줄처럼 전 세계적으로 연결된 망이다.
처음에는 인터넷 서비스가 다양하게 있었지만, 이제는 거의 다 웹서비스(WWW - World Wide Web)로 이동했다.
웹을 탄생시킨 사람은 Tim Berners-Lee다. 웹의 아버지라고도 불린다. 지리적으로 멀리 떨어져 있는 사람들을 연결시키기 위해 만들었다. 사실 처음에는 중요한 연구 자료가 여러 나라를 이동하면서 유실되는 것을 막고, 빠르게 주고 받기 위해 만들었다.
Web 기술의 설정값
개발자로서 여러 페르소나를 선정해서 개발해야 한다. 성별, 연령, 장애 유무 등을 고려해야 한다. UX(User Experience 사용자의 경험)가 좋은 UI(User Interface 사용자에게 제공하는 것)를 만들기 위해서는 구조를 잘 짜야 한다.
- HTML5 = 건강한 신체
- CSS = 근사한 스타일링
- Javascript = 스마트한 두뇌
Web Standards 웹 표준 기술
웹표준은 W3C(World Wide Web Consortiums)가 만든다.
Web Accessibility 웹 접근성
The power of the Web is in its universality, access by everyone regardless of disability is an essential aspect.
- Tim Berners-Lee
접근성 측면으로 보자면 나이듦도 장애라는 것을 기억해야 한다. 고령화 사회에서 어떤 서비스를 개발할지 고민해 보자. 연령대마다, 세대마다 익숙한 UI가 다를 수 있기 때문이다. 내 눈에 예뻐보이게 하는 것보다 타겟 분석을 하고, 장애를 가진 사람도 고려하는 개발자가 돼야 한다.
기본기, 다양한 경험, 열린 사고가 주니어 개발자로서 장점이 된다.
장애에 대한 이해
- 시각 장애(전맹, 저시력) - 시야가 좁을 수도 있고, 노안처럼 시력이 떨어질 수도 있다. 대비감을 더 주거나 폰트를 키울 수 있다.
- 청각 장애 - 자막이나 수어가 필요할 수 있다.
- 지체 장애(절단 및 지체기능 장애) - 마우스에 의존한 디자인이 아니라 다양한 방법으로 접근할 수 있도록 신경써야 한다.
- 뇌병변 장애
인간은 스스로의 힘으로 해결하고 싶어한다. 그런 기본적인 욕구가 보장되어야 한다. 구글조차도 모든 사람에게 만족스러울 수는 없다. 하지만 지금보다 더 신경써서 1%라도 더 사람들에게 편해진다면 의미가 있다.
장애인에게 필요한 것은 줄기세포가 아니라 현실적인 정보기술(IT)
- 이상목 교수
장애는...
볼 수 없는 것이 아니라 보는 방법이 다를 뿐
걸을 수 없는 것이 아니라 걷는 방법이 다를 뿐
말할 수 없는 것이 아니라 말하는 방법 다를 뿐이다.
환경에 대한 이해
- 다양한 Platform
- Cross Browsing
- SEO(Search Engine Optimization)
- 저사양 또는 저속회선
웹표준 기술을 활용해서 차별없는 서비스를 개발하자!
새로운 표준 HTML5
HTML의 표준은 HTML4.01, XHTML1.0, HTML5(새로운 표준)가 있다. 이번 수업에서는 HTML5를 사용한다.
HTML5는 문법을 허용하는 범위가 넓어서 협업할 때 문서가 충돌할 수도 있다. 이럴 때 포매터(Prettier)를 사용한다.
DTD (문서형 정의)
DTD(Document Type Definition)는 문서의 형식을 정의하는 문장이다. 브라우저가 어떤 버전의 HTML인지 알아야 제대로 화면에 보여줄 수 있기 때문이다.
<!-- HTML5는 대문자, 소문자 모두 허용한다. -->
<!doctype html>
<!DOCTYPE HTML>
제목과 단락
<h1> ~ <h6> 제목(heading) 요소
<p> 단락/문단(paragraph) 요소
<br /> 줄바꿈 태그
<!-- 제목 요소 -->
<h1>제목</h1>
<!--단락 요소 -->
<p>여기에 단락을 적습니다.</p>
기본적으로 h1이 가장 크고 굵고, h6으로 내려갈수록 폰트 크기가 작아진다.
p의 폰트는 일정하다.
스타일을 정의하기 전에는 웹브라우저 기본 스타일이 적용된다. 나중에 css를 사용해서 개발자 스타일을 적용하게 된다.
제목은 문맥상 내용의 제목이어야 한다. 보기에 크고 굵다고 제목으로 쓰는 것이 아니다. 디자인만 보고 h1을 쓰는 게 아니다.
디자인에 없다고 안 만들면 안 된다. 없으면 만들어내야 한다!
HTML은 디자인을 만드는 툴이 아니다!
아래 링크는 html 코드를 감싸는 태그를 만들어 주는 유용한 익스텐션이다.
htmltagwrap - Visual Studio Marketplace
Extension for Visual Studio Code - Wraps selected code with HTML tags
marketplace.visualstudio.com
이미지와 피규어
img 요소
이미지를 불러오는 빈 요소(empty element)다. img 태그 안에 속성(attribute)을 정의할 수 있다. 속성이 여러개일 때는 공백으로 구분한다.
<img src="경로" alt="대체 텍스트" />
src는 source, 이미지 파일의 소스, 즉 이미지를 어디에서 가져올지를 알려주는 속성이다. src는 절대/상대 경로일 수도 있고 url일 수도 있다.
alt는 alternative, 대체 텍스트를 정의하는 속성이다. 웹접근성에 중요한 역할을 한다. 스크린리더가 이미지는 이미지라고 읽기 때문에 대체텍스트로 '채팅 이미지'라고 적으면 '채팅 이미지 이미지'라고 읽는다. 문맥을 살피고 어떤 대체 텍스트를 넣어야 하는지 고민해야 한다. alt가 없으면 src를 읽는다. alt 속성을 ""(공란, 널값)으로 하면 src를 읽지 않는다. 장식성 이미지면 공란으로 두는 것이 좋다.
img에 사용할 수 있는 또 다른 속성은 width(가로 길이)와 height(세로 길이)다. img 태그를 쓸 때는 width와 height 속성을 모두 사용하는 것이 렌더링 차원에서 좋다.
svg 요소
이미지가 코드화되어 있는 svg 파일을 불러오는 요소다. 이미지 자원을 요청하지 않아서 서버 차원에서 성능이 더 좋다.
figure 요소
이미지와 캡션을 한 묶음으로 만드는 요소다.
<figure>
<img src="경로" alt="" width="100" height="100" />
<figcaption>이미지 설명</figcaption>
</figure>
추가
주석은 '<!--'와 '-->' 사이에 넣는다. 단축키는 ctrl + /
<!-- 주석 -->
오늘 하루를 돌아보며
벌써 1주일이 지났다. 처음에는 html을 배운다면서 무슨 CLI나 Git을 배우나, 이건 뭐지 했었다. 하지만 오늘 html 파일을 만들고 깃허브에 올리고 내려받으면서 정말 꼭 필요했다는 걸 알게 됐다. 파일을 관리하는 게 너무 편하다.
첫 숙제를 받았다. 대학 시절로 돌아간 것 같다. 하지만 그때보다 더 열심히 공부하고 열심히 연습해서 부트캠프에서 배우는 것들을 얼른 익숙해지도록 만들 거다!
'부트캠프' 카테고리의 다른 글
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 7 (텍스트 레벨 요소, 테이블 관련 요소, 임베디드 요소) (0) | 2025.05.03 |
|---|---|
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 6 (하이퍼링크, 섹션 관련 요소, 컨테이너 요소) (0) | 2025.05.01 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 4 (Node 환경 이해 및 관련 패키지 설치와 활용) (0) | 2025.04.29 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 3 (Git을 이용한 버전 관리) (0) | 2025.04.29 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 2 (CLI & Git(버전 관리)) (0) | 2025.04.27 |
