업무에 바로쓰는 html5 1일차
단축키 / vsCode 단축키
Window + Tab: 새로운 데스크톱 생성 가능
Window + Ctrl + 방향키: 여러개 데스크톱 이동 가능
Ctrl+Shift+P: 커맨드창
Ctrl+Shift+P => wrap => 선택한 영역 wrapping
=> 단축키 등록해서 쉽게 사용하자 Ctrl+Shift+W
// 각 요소가 ul 태그 밑에 li태그에 href="/" 값을 가진 태그로 wrapping됨
ul>li*>a[href="/"]
vsCode 확장 프로그램
git history
auto close tag
auto complete tag
auto rename tag
live server
vscode-icons
degit 라이브러리
깃 클론 편하게 해주는 라이브러리
모든 레포지토리가 아니라 일부 폴더만 골라서 클론받을 수 있음
HTML과 XHTML
<link/> -> XHTML
<link> -> HTML 4.01
HTML5는 두가지 방식 모두를 지원함
XHTML -> HTML를 XML방식으로 재정의하는 방식
HTML은 굉장히 느슨한 언어. (대소문자 구분 안함, 속성값 선택적, 닫힘 태그 생략 가능..)
이러한 문제를 해결하기 위해 XML로 재정의한 XHTML를 사용하게 됨
JSX 또한 XML 패턴을 따르기 때문에 같은 규칙을 사용하고 있음
리액트에서 마크업 또한 XML에 맞게 하는게 좋음!
HTML4.01, XHTML1.0과 HTML5의 차이점
- 콘텐츠 모델
- interactive, embedded, phrasing, metadata, heading, sectioning....
- html 마크업에 문법 오류는 없는지 validation 해보기
- html 업데이트 항목을 볼 수 있는 공식 페이지
HTML Standard
HTML Living Standard — Last Updated 30 November 2023
html.spec.whatwg.org
<a href="/">
<div>블록 콘텐츠</div> // inline요소에 block요소가 들어감, html5 이전에는 불가능했음
<a/>
<a href="/">
// interactive 요소 안에 두 개의 요소가 들어감. => 잘못된 마크업
<div>블록 콘텐츠</div>
<button>버튼</button>
<a/>
// 콘텐츠 모델 상 ul안에는 li요소만 포함 가능함, div 같은거 안됨
아웃라인 알고리즘
- <section></section> 태그를 통해 명시적인 아웃라인을 지정할 수 있음.
- 따로 지정하지 않으면 암묵적인 아웃라인이 생성됨. (h1과 같은 태그를 기준으로)
- 아웃라인 계층을 지정하는 section, article 태그를 사용하지 않고 div를 사용하게 되면 아웃라인을 지정해주는 태그를 잘 사용해야 함 (h 태그)
- 검색 최적화 관점에서도 중요한 설계 단계
DOCTYPE
<!DOCTYPE html> // 문서타입, 현재 문서가 HTML5 타입이라는 의미
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> // html:4t => html4.1 버전
// Transitional 과도기 Strict 엄격
- DOCTYPE을 기입하지 않으면 호환 모드로 렌더링 됨 (비표준)
- 표준 비표준에 따라 적용 가능한 스크립트가 달라짐
- 비표준: document.id
- HTML5는 살아있는 표준이기 때문에 변경 사항이 자동으로 적용됨
- DOCTYPE위에 script를 삽입하면 표준이 아니라 호환 모드로 작동하게 됨. => 금지!
접근성(accessibility)
- 모두(장애, 비장애)를 위한 접근성
- language
- <html lang="">
- 보이스 오버 기능: html 태그의 언어에 맞게 음성지원을 함
- 영어의 경우 span 태그를 감싸고 lang 속성을 설정해주기
- title
- 각 페이지의 제목은 unique하게 설정해줘야 함
- 홈 - 이디야 커피, 로그인 - 이디야 커피
- 특수 문자(장식성 문자) 제거
- 스크린 리더의 경우 특수 문자를 다 읽어줌
- 각 페이지의 제목은 unique하게 설정해줘야 함
- meta
- vscode에서 기본 언어 속성과 기본 html 버전을 설정해 줄 수 있음 (emmet setting)
- 한글이 등장하기 전에 meta 태그의 language를 설정해줘야 인코딩이 깨지지 않음
- RWD 반응형 웹 작업할 때 들어가야 하는 meta tag
- svg는 화면 해상도에 영향을 받지 않음
- meta name="og:url, tpye, image.."
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- a tag와 함께 aria-labelledby 와 같이 접근성을 지킬 수 있는 태그들이 있음
폰트
눈누
상업용 무료한글폰트 사이트
noonnu.cc
Sun
sun.fo
<!-- cdn 으로 폰트 사용, 해당 cdn 서버 죽으면 우리 서비스도 영향 받게 됨 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css"
/>
구조 설계
- 3단
- 머리말(네비게이션 포함 혹은 없는 경우) / 본문 / 바닥글
- 4단
- 머리글 / 네비게이션 / 본문 / 바닥글
- 시맨틱 태그: header, nav, main, footer tag
- 시맨틱 태그 사용하는거 중요함!
- 적어도 a, button 태그는 사용하도록 하자
- div tag에 클래스 이름으로 주기
- role 속성을 주면 시맨틱 마크업과 동일한 역할을 할 수 있음
- tabindex 속성을 주면 키보드로 접근할 수 있게 설정할 수 있음
- click event: device dependency 이벤트이기 때문에 키보드로 이동해서 엔터키가 눌려도 click event가 발생하게 됨
디자인 패턴
- 태그 명이 바뀔 수도 있으니 태그 선택자보다는 클래스 선택자로 스타일 적용하기
- 클래스명을 들었을 때 용도가 짐작되도록 작명하기
로고 이미지
- 배경으로 설정
- 이미지 스프라이트를 사용해서 화면 크기에 따라 position만 바꿔서 적용
- 성능 상 우월함
- 이미지 태그
- svg 태그
- css로 색상 변경 가능
- 서버에 이미지를 요청하지 않기 때문에 성능에서 우수함
- 최신 트렌드: svg sprite 방식
- picture + source tag
- device에 따라 가장 최적화 된 이미지를 렌더링 함
- 네이밍 규칙
- BEM 규칙: 재사용 가능한 css를 설계하기 위한 네이밍 패턴
- logo__link : 로고 영역 내의 링크라는 의미를 내포함
- sass를 사용하는 경우 리액트에서 사용하면 좋지만, 아닌 경우엔 안티 패턴임
- logo__link--primary, logo__link--secondary: -- 뒤에 상태 값을 넣어줌
BEM — Introduction (getbem.com)
BEM — Introduction
Introduction On smaller brochure sites, how you organize your styles isn’t usually a big concern. You get in there, write some CSS, or maybe even some SASS. You compile it all into a single stylesheet with SASS’s production settings, and then you aggre
getbem.com