2017.09.16.토요일
10:00~17:00
Schedule
1. HTML5.1의 개요 (https://www.slideshare.net/wsconf/html5-document-outline-wsconfseoul2017-vol2)
- document outline : 문서의 섹션 구조
2. HTML5 outline 알고리즘
- 제목(heading)은 암묵적 섹션을 생성
- 섹션화 콘텐츠는 명시적 섹션 생성
- 제목(heading)이 없는 섹션의 제목은 기본 제목을 사용
- 섹션화 루트(sectioning root) 요소들은 자신의 개요를 가짐
- 섹션안의 헤딩 요소들 중 첫번째 요소가 그 개요의 제목이 된다.
- 하위 등급의 헤딩은 이전 섹션의 일부로 암묵적인 하위 섹션을 시작한다.
- 동일 등급의 헤딩은 새로운 (암묵적인) 섹션을 시작
- 섹션화 콘텐츠는 암묵적 섹션과 관계 없이 가까운 조상 섹션화 루트나 섹션화 콘텐츠의 하위 섹션으로 간주
- 명시적 섹션이 생성될때 헤딩이 존재하지 않을 경우 암묵적 헤딩(일반적으로 untitled)을 생성
- 명시적인 섹션제목을 가지지 않는 섹션들에 대한 기본 제목들을 제공
3. HTML 5.1 변경사항
- 섹션들은 그들의 섹션 중첩 수준과 동일한 등급의 제목(heading)들을 포함할 수 있습니다.
작성자들은 섹션의 중첩 수준에 대한 적절한 제목(heading)들을 사용해야한다.
(하나의 문서안에 여러개의 h1을 쓸 수 없다.)
* 문서 구조를 전달하기 위해 outline에 의존하지 마시오.
- <h1>은 모든 heading들 중 선두로 위치해야한다.
- <li> 요소 내부에 heading 요소를 사용하지 마세요.
4. 아웃룩 구조 체크
- W3C Nu Html checker (https://validator.w3.org/nu/)
웹폰트 파해치기(https://www.slideshare.net/wsconf/web-font-wsconfseoul2017-vol2)
1. 이미지 텍스트의 문제점
- 텍스트 수정이 번거롭고 유지보수가 어려움
- 번역기능, 텍스트 리더기의 사용제한
- 텍스트 복사가 불가능
- 고해상도 텍스트 이미지가 필요하여, 용량이 증가한다.
2. 웹폰트의 장점
- 텍스트 수정이 용이해져 작업시간이 단축되고 유지보수가 쉬움
- 번역기능, 텍스트 리더기의 사용제한 없음
- 텍스트 복사 가능
- 고해상도 텍스트 이미지가 필요 없음
- 경우에 따라 성능 향상
3. 웹폰트란? 방문자의 로컬 컴퓨터에 폰트의 설치 여부 상관없이 온라인의 특정 서버에 위치한 폰트파일을 다운로드하여, 모든 PC에서 동일한 화면을 제공한다.
4. 기본적용 방법
- font-family : CSS 문서에서 사용할 웹폰트 패밀리명 ( 폰트 이름과 웹폰트 이름과 달라지면 유지보수가 어려울 수 가 있다)
- src : 로드 할 폰트의 경로로 local(),url() 속성이 있음.
5. unicode-range : 유니코드 범위를 지정해, 해당 범위의 글자만 폰트가 적용된다.
6. 이슈
- font-family : IE11이하에서는 글자수 13자 이상 적용이 안됨.
- src : local() : 로컬 서체를 로딩 조차하지 못하는 브라우저 존재(IE6-8), 사용자 로컬에서 서체이름이 잘못 저장된 경우 문제 발송. 되도록 local은 사용하지 않는다.
7. 브라우저별 대응 방법
8. 웹폰트를 사용하지 않는 이유
- FOUT(Flash of Unstyled Text) : 웹폰트 파일이 로드 되기 전까지 기본서체가 노출되다가 웹폰트 로드가 완료되면 웹폰트로 바뀌면서 깜빡이는 현상
- FOIT(Flash of Invisible Text) : 웹 폰트 파일이 로드되기 전까지 웹페이지를 로드 하지 않고, 폰트 로드가 완료되면 웹페이지를 로드하기 때문에
로드가 완료되기 전까지 텍스트가 안보이는 현상
- FOFT(Flash of Faux text) : 웹폰트 파일에 font-weight, font-style와 관련된 서체가 있을시, 로드 전 브라우저에서 임의로 서체의 굵기와 스타일을 생성하여 노출하고 웹폰트가 로드가 완료되면 웹폰트로 바뀌는 현상
- 현상 해결 방법 : fontfaceobserver.js , 구글 webfontLoader(더간단함)
9. 웹폰트를 빠르게 로드하는 방법
- data-uri (영문 , 한글 폰트 모두 url 이 용량이 적음. 속도는 영문은 data-uri, 한글폰트는 url이 더 빠름)
- preload : 브라우저에게 리소스가 필요할 것이라고 알려주는 힌트
<link red="preload">
(최신브라우저에서만 지원)
- 서브셋 : 원하는 문자만 사용해서 폰트 크기를 줄이는 방법
'일상' 카테고리의 다른 글
| [리뷰] 옵토마 Suhd61 (0) | 2019.08.27 |
|---|---|
| 2018 새해 목표 (0) | 2018.01.02 |
| [2015-10-04] 서면 cgv 서부전선 무대인사 (0) | 2015.10.04 |
| 부산야경 (1) | 2015.08.03 |
| 청사포 (0) | 2015.08.03 |
