주제 : 웹접근성과 웹표준
학습목표: 웹접근성과
웹표준의 기본 개념을 파악하고 웹표준을 준수하는 것이 웹접근성 관점에서 왜 필요한지 살펴본다.
세부내용 : - 웹접근성이란?
웹표준 관련 기술
구조와 표현 및 동작
OpenWax를 활용한 웹접근성 점검 - 사다리 모양 점수체크
- Web Developer Tool 활용 ㅡ 크롬 확장프로그램(?) 톱니바퀴 모양 설치
- 문법 검사(Validation) ㅡ https://validator.w3.org/ https://jigsaw.w3.org/css-validator/
오늘 웹 접근성과 웹 표준에 대해서 많이 배웠는데, 잘 기억나지 않는다
이런 지식을 이 배웠으나 기억나지 않는 지식일 것 같다.
웹의 전반적인 역사, web 표준은 w3c
web accessibility가 현업에서 간과되고 있다는 점 정도 기억에 남는다
나는 sample 또는 basic이라는 틀을 저장해두고,시작할 때복붙해서사용하곤 했다.
emmet을 배우고,html:5라는저장하고 있는단축 명령어를사용함으로써더 이상틀을 저장할 필요가 없어졌다
*에밋명령어를 알아두면 효율적일 것 같다.
<!DOCTYPE html> /*HTML 버전5사용하겠다*/
<html lang="en"> ko-KR 북한은 KP //국가 코드가 있구나 생략하면 접근성 떨어짐
<head>
<meta charset="UTF-8"> 과거에 사용하던 기존문법 <meta http-equiv="cottent-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 반응형 할때 필요한 태그 고정형 이라 필요 x
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 과거의 솔루션을 도입해야 될때, 익스플로어 키고 F12확인가능
<title>Document</title>
</head>
<body>
</body>
</html>둘다 사용가능한 부분에서 왜 이렇게 사용하지?라는 의문을 갖고 ㅡ> 최신 표준이며 ,
----예외 사항이 HTML의 약점 ㅡㅡXML이 대안, HTML 4.0 버전의 명령어 재정의 -- XHTML1.0
인코딩코드가 TITLE태그보다 늦게 나올시 발생할 문제에 대해 설명해주셨다.
코드를 작성할때 1. 선형화 단계 2. 시멘틱 요소 3. 코드작업 및 네이밍을 해야한다.
기억에 남는 부분은 box model 이 css의 중요한부분이라는 것이다.
100vh : 100%랑 비슷 뷰포트
alt shift 아래 : 복제 단축키
BOX 크기는 w/h+p+b+m 높이,너비+패딩+보더+마진
단위를 주는 방법에는 여러가지
0,0,0,auto
0,auto
중요한 부분 float 와 flex
float: left, right, none
상자는 겹치나 글씨를 밀어냄 (inline 상자는올수 x)
float의 원리를 모르면 계단 형식이 생길 수 있다
clear:both; 플로트 개체랑 겹치기 x
clear-요소는 block에만 사용 가능
겹쳤던 높이만큼 강제 마진
overflow 트릭(넘치는 영역 콘텐츠보다 상자가 작을 때 어떻게 콘텐츠를 처리할 것인가)
:before, :after: 엘리먼트를 만듦
:hover: 상황을 가상으로 만듦
before (첫째 가상 요소를 만들어냄) 인라인 상자
after(마지막에 가상 요소를 만듦) 인라인 상자
(clear 사용 xx)
오늘의 중요한점
**설계와 배치, 박스모델 이해**
베이직 박스와 플랙스 박스 차이
**선택자 방식**
<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>
읽어보기
<https://flexboxfroggy.com/#ko>
*공부하고 만들어보기*
내일배울것
구조설계를 위한 HTML5
HTML5가 이전 버전과 어떻게 다른지 살펴보고 견고한 구조 설계에 필요한 개념 및 다양한 명령어를 학습한다.
- HTML5의 탄생배경
- 콘텐츠 모델(Content Model)
- 아웃라인 알고리즘(Outline Algorithm)
- 시멘틱 마크업(Semantic Markup)
- 구조 설계(Structure Design)
- Headingsmap을 활용한 아웃라인 구조 분석
- 시멘틱 마크업 실습
'공부 > TIL' 카테고리의 다른 글
| 2019-04-04 (0) | 2019.04.04 |
|---|---|
| 2019-04-02 (0) | 2019.04.02 |
| 2019-03-30 (0) | 2019.03.30 |
| 2019-03-29 (0) | 2019.03.29 |
| 2019-03-26 (0) | 2019.03.26 |
