210616 포토샵, 일러스트 기초가 끝나고 코딩을 시작했다.
첫 날이니만큼 편리한 코딩 환경 구축과 웹 표준, 웹 접근성에 대한 기본 개념을 익히게 되었다.
★ 환경 구축
VSC
- Live Server, Image Preview, HTML Snippets, Indenticator 설치
- File > Auto Save ON
Tip
- html문서를 만든 후 html:5 - tab키 -> html5 문서 구조 자동 완성
(Edit - Emmet 기능) - Live Server > alt + L + O로 작성 중인 문서를 웹페이지로 볼 수 있도록
- Ctrl + / > 주석 단축키
- 크롬 개발자 도구에서 >> 눌러서 HTML Validator로 문법 검사를 할 수 있다.
※ 웹 접근성 안에 웹 표준이 들어 있다고 봐도 무관함
1. 웹 표준
- HTML - 구조 계층(의미가 중요... 의미에 맞는 태그를 사용, 시멘틱 마크업)
- Element 요소에는 블록레벨, 인라인레벨 두 가지가 있다.
- 인라인 요소는 블록요소 안에 넣어 사용
- 블록요소 안에 다른 블록요소 사용 가능
- 단 h1~h6, p, address는 또 다른 블록요소 안에 넣어서 사용할 수 없다.
- CSS - 표현 계층(어떻게 보이느냐가 중요...)
- JS - 동작 계층(움직임 중요...)
<html lang="ko"> // 휴먼 랭귀지
<meta charset="UTF-8"> // 인코딩, 다국어 지원
<!-- 주석 --><!-- //주석 --> 주석의 시작과 끝을 명시해 준다.2. 웹 접근성
- 웹 접근성 연구소 사이트 참고
- View Document Outline으로 h1 ~ h6 제목 요소들 배치를 확인할 수 있다.
(순서대로 사용해야지 h1 다음에 h3를 바로 사용하면 X) - 문단 안에 들어가는 인용구 '', ""는 q태그를 사용해준다.
(인용구가 아닌 '', ""는 직접 써 준다.) - 독립적인 인용문은 blockquote태그를 사용한다.
(p태그 즉, 문단을 포함할 수 있다.) - strong태그로 강한 강조를하고 싶은 부분을 마크업한다.
(em태그는 약한 강조) - 주소는 당연히 address태그로 마크업한다.
- 부등호 같은 경우에는 > = >, < = <, & = &으로 헷갈리지 않도록 작성한다.
UI개발자 in Hivelab