0809 - 0815

0809

21일 차 HTML5 Markup

2주간의 알고리즘 수업을 마치고 본격적으로 HTML/CSS 수업이 시작되었다.
알고리즘 때와는 수업 방식이나 속도가 달라서 처음에 적응하지 못하고 놓친 부분이 있는 것 같다.
뒤쳐지지 않으려면 내일부터는 제대로 준비해서 놓치지 않도록 대비해야겠다.

사전과제 피드백

a태그 안에 h1태그를 작성하는 것은 디자인 할 때 이슈가 생길수도 있다.
- 블럭 요소 안에 인라인 요소를 넣는 것을 고려해보자
인풋 태그는 값을 입력하는 것. 흔히 클릭하는 기능이 있으면 버튼 태그를 사용해야 한다고 착각하기 쉽지만 input태그와 같이 사용할 경우에는 label 태그를 함께 사용하는 것이 좋다.
- 버튼 태그를 레이블 태그로 바꾸자
이벤트를 바로 태그에 반영하는 방식은 과거의 유물이다.
- onclick, onblur등 레거시한 방법보다는 addEventListener 사용을 고려해보자

웹 개요

Internet service

Telnet
e-mail
usenet
FTP
IRC
Archie
Gopher
WWW

WWW

World Wide Web
who?
- 팀 버너스 리
- 웹의 아버지
why?
- Connect

HTML5, CSS3, JS

HTML5
- 구조화된 견고한 신체
CSS3
- 근사한 스타일링
JS
- 스마트한 두뇌

웹 표준

W3C (World Wide Web Consortiums
예전에는 표준을 정하는 단체였지만 현재는 벤더와 주객이 전도되었다.

웹 접근성

장애인을 위해 개발되었지만 비장애인을 위한 일이기도 하다. (편의성)

장애에 대한 이해

시각장애 - 전맹, 저시력
청각장애
지체장애 - 절단 및 지체기능 장애
뇌병변장애 -> 장애인에게 필요한 것은 줄기세포가 아니라 IT 기술

환경에 대한 이해

다양한 플랫폼
Cross Browsing
SEO (Search Engine Optimization)
저사양 혹은 저속 회선

마우스를 사용해서 이용할 수 있는 서비느는 키보드를 사용해서도 이용할 수 있어야 한다. 웹 접근성은 선택이 아닌 필수

새로운 표준 HTML5

HTML의 탄생

HTML5가 탄생하기 이전까지 HTML의 최초 버전은 1993년에, 최신 버전은 1999년에 발표 됨
W3C가 XHTML1.0을 구체화 하기 위해 XHTML2.0 작업을 진행 중이었으나 하위 호환상에 치명적인 문제가 있었음
2004년 애플, 모질라, 오페라 소프트웨어가 공동으로 설립한 공개 그룹인 WHATWG(Web Hypertext Application Technology Working Group)가 W3C와 별개로 Web Application 1.0과 Web Forms 2.0을 만들어 냄
2007년 3월 W3C가 공개적으로 WHTML 2.0의 실패를 인정한 후 새롭게 HTML을 개발하기로 결정하면서 WHATWG의 표준안을 대부분 수용하여 HTML5가 탄생

콘텐츠 모델

명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화하였는데, 이를 HTML5의 콘텐츠 모델이라고 함

아웃라인 알고리즘

HTML5에서는 정보 구조를 명확히 할 수 있도록 ‘아웃라인 알고리즘’이라는 개념이 도입되었음
아웃라인 알고리즘은 웹 페이지의 정보 구조를 판별할 수 있는 개념으로, 책의 목차와 비슷
직접적으로 아웃라인을 구성하는 요소에는 헤딩 콘텐츠, 섹셔닝 콘텐츠, 그리고 섹셔닝 루트 요소 등이 있음

HTML5 서식

HTML5sms HTML4.01이나 XHTML1.0 문법을 모두 허용하기 때문에 기존에 사용하던 마크업 문법을 그대로 사용할 수 있음
이는 하위 호환성을 위한 정책으로, 과거 HTML4.01로 제작된 문서가 문법적인 느슨함으로 인해 발생했던 문제가 되풀이될 수 있기 때문에 좀 더 엄격한 규칙을 정하고 마크업 문서를 작성하는 것이 바람직할 것임

종료 태그의 처리

HTML5는 종료 태그를 생략할 수도 있지만, 기존 XHTML1.0의 규칙처럼 시작과 종료 태그를 정확히 명시하여 정형식 구조로 마크업할 것
<p><img src="images/back.gif" alt="뒤로" /></p>

대소문자의 사용

HTML5는 속성에 대문자 또는 소문자를 사용할 수도 있지만, XHTML1.0 규칙처럼 소문자를 사용할 것을 권장

빈 요소

종료 태그를 가지고 있지 않은 요소를 ‘빈 요소’라고 하는데, HTML4.01에서는 <img>형식으로, XHTML1.0에서는 <img />형식으로 선언해야 하며, HTML5에서는 두 가지 모두 허용

속성과 값

논리 속성의 경우 속성값을 지정 또는 생략할 수 있음
속성 값은 인용 부호를 생략하거나 홀따옴표와 겹따옴표 등으로 구분할 수도 있음

잘못된 중첩 사용 불가능

시작 태그와종료 태그의 중첩에 문제가 발생하지 않도록 해야 함

속성의 중복 사용 불가능

시작 태그에 동일한 속성을 중복하여 선언할 수 없음

문자 참조

”<”, “>”, “&”와 같은 특수 문자의 경우, Characters Entity Name이나 Characters Entity Code로 변환하여 마크업 해야 함
& -> x
& -> o
& -> o

HTML5의 Doctype

HTML4.01이나 XHTML1.0에서는 HTML 문서의 첫 줄에 문서형 선언을 기술했으며 해당 문서의 버전과 타입을 명시했지만, HTML5에서는 문서의 버전 및 문서 타입이 생략된, 간소화된 형식을 가짐
기존 HTML 문서형 선언의 목적과 달리 모든 웹 브라우저에서 표준 모드로 렌더링될 수 있도록 하는 역할만을 담당하기 때문

Web Cafe HTML 구조 설계

HTML 구조를 설계하기 전에 3단으로 할지 4단으로 할지 먼저 정해야 한다.
3단은 크게 헤더, 메인, 푸터로 구성되어 있고 헤더 안에 네비게이션을 포함한 구조이다.
4단은 크게 헤더, 네비게이션, 메인, 푸터로 구성되어 있다.
Web Cafe 사이트는 3단 레이아웃을 기본틀로 구현하기로 했다.

컨테이너 영역은 꼭 있어야 하는 것은 아니지만, 있으면 레이아웃을 잡기 편하다.

id보다는 class 사용할 것
현업에서는 gnb(global navigation), lnb(local navigation) 같은 약어들을 사용한다.
슬로건은 아티클 태그를 사용한다.
- 아티클은 독립된 정보에서 사용하는데, 이 문장만 따로 떼어내서 독립적으로 사용할 수 있을 때 사용한다.
구조를 설계할 때는 익숙해지기 전까지 그림을 그려보자

WAI_ARIA

Web Accessibility initiative - Accessible Rich Internet Application의 약자로 UI 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양
시맨틱한 의미를 가지지 않는 <div>같은 요소를 이용해서 체크박스를 만들면 전맹 시각장애인이나, 구글이나 네이버의 크롤러들이 사이트에 들어왔을 때는 <input type="checkbox">이라는 의미의 요소를 찾아야 하는데, <div>밖에 못 찾게 되고, 여기서 WAI-ARIA가 사용된다.

<div class="checkbox" role="checkbox" />

이렇게 attribute를 넣는 것처럼 role, aria-label등의 키워드에 알맞은 값을 넣어주면, 해당 요소를 분석하여 크롬등의 브라우저가 의미에 맞게 읽게 된다.
의미없는 <div> 요소로 짜는 것보다 의미에 맞는 요소를 사용하여 시맨틱하게 HTML을 작성한다면 대부분의 접근성 문제는 해결된다.
하지만, 자동완성 같은 모듈 같은 복잡한 UI는 요소로 정의되지 않았기 때문에, 이런 경우 적합한 WAI-ARIA를 사용하자
위에서 HTML의 구조를 설계하면서 적합한 요소가 없는 visual 영역을 제외하고는 시맨틱한 요소들과 함께 class명을 작명했다.
시맨틱 마크업 - 사람과 기계 모두 이해하기 편한 코드

점진적 향상법

Progressive enhancement
기초부터 차근차근 기능을 향상시켜 가는 방법
한 번에 만드는 것이 아니라 기능을 점차 늘려가는 방법

변수 표기법

파스칼 케이스
- 모든 단어의 앞 글자를 대문자로 표기
- MemberService
카멜 케이스
- 첫 단어는 소문자, 두 번째 단어부터는 앞 글자를 대문자
- memberService
케밥 케이스
- 모든 단어가 소문자로 시작하고, 단어와 단어 사이는 -로 연결된다.
- member-service
스네이크 케이스
- 케밥 케이스와 유사. -가 아니라 _로 연결
- member_service

헤더 설계

헤더 영역은 Web Cafe 웹 페이지 상에서 크게 3개로 나뉜다.

로고
링크 모음
메뉴

로고

이 페이지의 제목으로 로고를 사용하기 위해서 h1 태그를 가장 바깥쪽에 작성했다.
보통 로고 페이지를 누르면 홈페이지 메인으로 이동하는 기능이 있기 때문에 a 태그 작성
img를 배경으로 깔아야 할 이유가 없기 때문에 a가 img의 부모태그가 되게 한다.
img태그에 대체 텍스트를 작성하는 것은 가장 접근성을 지키기 쉬운 방법이면서도, 지키지 않았을 때 치명적이다.
대체 텍스트에는 정보를 얻을 수 있도록 작성한다.

링크모음

여러 링크들을 아이템 모음처럼 사용하기 위해서 ul, li 태그를 사용하였다.

메인

메인에 있는 세 공간을 group이라는 공통 클래스와, group1,2,3이라는 개별 클래스로 나눠서 지정하였다.

CSS

box-sizing의 기본값을 border-box로 처리

*,
*::after,
*::before {
  box-sizing: border-box;
}

box-sizing의 값으로는 주로 내부 여백과 테두리의 너비를 포함해서 요소의 크기를 결정하는 border-box로 주로 사용되기 때문에 모든 태그에서의 기본값을 위와 같은 방식으로 변경할 수 있다.

margin: 0 auto

margin: 0 auto;는 가운데 정렬처럼 보이게 해주는 것이지 실제로는 트릭이다.
위 아래로는 margin을 주지 않고, 좌우 여백을 균등하게 분배한다는 의미로 실제로는 좌우에 여백이 차 있어서 박스 모델의 크기가 증가한다.

justify-content: space-evenly 크로스 브라우징

메인의 세 div를 정렬하기 위해 필요로 하는 값은 space-evenly 값이다.
크롬에서는 잘 동작하지만 해당 값은 IE에서는 동작하지 않는다.
여기서 CSS만으로 동작하게끔 사고하는 능력이 중요하다.
IE에서도 동작하는 space-between 값으로 바꾼 뒤, 세 요소의 총 너비는 820px, main의 너비는 940px이므로 main에서 패딩을 30px 준다면 IE에서도 동일한 너비만큼 떨어져 보이도록 구현할 수 있다.

0810

22일 차 CSS3

CSS 개요

CSS란?

CSS 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어
HTML과 XHTML에 주로 쓰이며, XML에서도 사용 가능
CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높은 언어
CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어로, 스타일은 웹의 독창적인 개념이 아니라 웹 이전부터 워드프로세스 등에 사용했던 개념임

CSS의 과거와 현재

1996년 W3C의 주도하에 첫 번째 CSS 버전인 CSS Level 1이 발표
1998년에 CSS Level 2가 등장하면서 대부분의 웹 브라우저들이 CSS Level 2를 지원하기 시작
그 후 CSS Level 2의 버그를 수정한 CSS Level 2.1이 2006년에 발표되면서 현재까지 표준으로 사용되고 있음
CSS Level 3은 모든 명세가 포함된 버전이 아닌 모듈 단위로 개발되고 있으며, 표준화가 모듈 단위로 진행되고 있음
- 몇몇 모듈은 현재 권고안 단계에 있으며, 초안 단계에 머물러 있는 모듈도 있음

웹표준 개발 단계

초안 (Draft)
작업 초안 (Working Draft)
권고 후보 (Candidate Recommendation)
최종 권고안 (Proposed Recommendation)
권고안 (Recommendation)

HTML, CSS 관련 사이트

HTML 스펙 공식 사이트
브라우저별 CSS 호환성과 사용가능한 CSS 상세하게 확인 가능
하나의 마크업 구조로 여러 디자인된 CSS 확인 가능

수업 핵심 정리

컨테이닝 블록

요소의 크기와 위치는 컨테이닝 블록의 영향을 받고는 한다.
대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨의 조상의 콘텐츠 영역이나, 항상 그런 것은 아니다.

position 속성이 static, relative, sticky 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 블럭 컨테이너, 또는 가장 가까우면서 서식 맥락을 형성하는 조상 요소(table, flex, grid 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성된다.
position 속성이 absolute인 경우, 컨테이닝 블록은 position 속성 값이 static이 아닌 가장 가까운 조상의 내부 여백 영역이다.
position 속성이 fixed인 경우, 컨테이닝 블록은 뷰포트나 페이지 영역이다.
position 속성이 absolute나 fixed인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백이 컨테이닝 블록이 될 수도 있다.
1. transform이나 perspective 값이 none이 아닌 경우
2. filter의 값이 none이 아닌 경우
3. will-change의 값이 transform이나 perspective인 경우
4. contain의 값이 paint인 경우

컨테이닝 블록으로부터 백분율 값 계산

height, top, bottom 속성은 컨테이닝 블록의 height를 사용해 백분율을 계산한다.
width, left, right, padding, margin 속성은 컨테이닝 블록의 width를 사용해 백분율을 계산합니다.

이미지에 여백이 남는 경우 해결법

a태그 안에 이미지를 삽입할 경우 하단에 1~3px 정도의 여유 공간이 발생하는 것을 발견하였다.
학습하다가 이유가 너무 궁금해서 찾아보았다.

발생 원인

img태그가 인라인 요소이기 때문에 가상의 기준선이 존재하는데, 기본값으로 vertical-align의 baseline에 위치하게 된다.
예를 들어 영문 소문자로 치자면 아래 삐침이 없는 글차의 아랫쪽에 위치하게 된다.
그래서 아래 삐침이 있는 글자를 고려하여 하단에 공백을 유지하게 되는 것이다.

해결 방법

display: block; _ 인라인 요소에서 블록 요소로 속성을 변경시키는 방법 _ 블록 요소로 변경하면 기존 속성이던 vertical-align: baseline이 없어진다.

인라인 요소와 띄워쓰기

우리는 코드를 가독성 좋게 작성하기 위해 인덴트와 띄워쓰기를 주지만, 인라인 요소들은 줄바꿈을 하거나 하면 렌더링이 될 때 띄워쓰기 처리가 된다.
ul태그 내에서 li를 가로로 정렬하기 위해서 display: inline-block으로 지정해줬는데, 의도치 않은 공백이 있었고 개발자 도구로 검사해봐도 패딩이 없었기 때문에 상당히 당황스러웠다.
문제는 인라인 요소 특성과 띄워쓰기에 있었고, 부모 요소에서 폰트를 0으로 하고 자식 요소인 li에서 폰트 크기와 line-height를 조정하는 트릭을 이용해서 문제를 해결하였다.

/* 부모 ul태그 */
.member-service {
  background-color: yellow;
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  font-size: 0;
  text-align: right;
  padding: 2px 0;
}
.member-service li {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.15;
}

ul태그의 기본 속성을 초기화 시키기 위해서 list-style-type과 margin, padding-left를 초기화 시켜줬다.
reset.css를 사용해서 전체 초기화를 하면 편하기는 하지만 필요 없는 요소들까지 초기화되어 성능상 이슈가 발생할 수도 있다.
- 성능에 민감한 기업들은 필요한 요소들만 따로 reset하여 사용한다고 한다.

BFC (Block Formatting Context)

웹페이지에 나타나 있는 블록들이 보여지는 css 렌더링의 일부
블록의 속성이 다시 부여되어 다르게 렌더링 되는 현상 혹은 그러한 컨텐트
BFC는 레이아웃 안의 작은 레이아웃이라고 생각하면 된다. BFC 내부의 모든 요소는 이 블록안에 속한다.
- 내부 요소가 float 상태라 해도 마찬가지
- 그래서 container에 overflow: hidden; 속성을 부여하면 float 요소는 container 높이에 영향을 준다.

block 레벨 요소는 float된 자식 요소를 포함하지 않는다. float는 한 요소가 보통 흐름으로부터 빠져 나와서 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정하기 때문이다.

BFC 생성 규칙

html root 태그
none을 제외한 float
position: fixed, absolute
display: inline-block, table, table-cell, table-caption
overflow: visible을 제외한 모든 값
display: flow-root
display: flex, inline-flex, grid, inline-grid

BFC의 특성

float는 BFC를 생성한다.
BFC는 margin collapse를 막는다.

float 심화

new BFC
Line Box - BFC, IFC에 따라 그려지는 것이 아니라, Line Box에 따라 그려진다.

New BFC

Normal Flow + Float Model
두 번째 div에서 float를 지정해주는 즉시 이전까지의 BFC를 파기하고 새로운 BFC 영역이 시작된다.
inline 요소는 guard 되어 밀려나고, block 요소는 float되기만 할 뿐 밀려나지는 않는다.

Line Box

float 요소만 고려됨
부모요소는 높이를 점차 잃게 된다.
float 요소가 생성될 때마다 가용 linebox를 생성한다.
- linebox가 점점 줄어듬

float 해제 방식

블록 요소를 수평으로 정렬하기 위해 float를 사용하는 경우, 레이아웃이 망가진 것처럼 착각할 수 있지만 실은 그게 아니다.

overflow: hidden
- bfc 생성을 이용한 방법
- 걸쳐놓는 디자인을 할 경우 숨겨져서 보이지 않는다.
- hidden은 float과 아무 상관이 없는 속성이기 때문에 좋지 않다.
부모 요소를 float
- 부모 요소가 떠버릴 수 있다는 문제가 있다.
마크업 요소를 건드리기
- 아무것도 없는 div에 class=”clearfix”를 지정
- css에서 clearfix에 clear: both;를 준다.
- 말 그대로 마크업을 건드리기 때문에 css적으로 해결하는 것이 좋다.
부모 요소에 after 가상 요소 선택자

.main::after {
  content: "";
  display: block;
  clear: both;
}

display: flow-root
- 자식들을 float로 정렬시키고 부모를 루트로 한다는 뜻
- 호환성 때문에 크로스 브라우징 이슈가 있다.

렌더링 엔진

브라우저의 역할

브라우저의 주요 역할은 2가지이다.

사용자가 입력한 웹페이지, 이미지 등의 자원을 서버에게 요청
서버로부터 전달받은 자원을 화면에 출력

브라우저의 구성 요소

UI
- 사용자가 접근할 수 있는 영역
Browser Engine
- UI와 Rendering Engine 사이의 동작을 제어해주는 엔진
- 브라우저라는 프로그램의 비즈니스 로직, 핵심 중추 부분
- Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업
Rendering Engine
- 요청한 콘텐츠를 화면에 출력하는 역할
- HTML, CSS 등을 파싱하여 최종적으로 화면에 그린다.
Networking
- http 요청을 할 수 있으며 네트워크를 호출할 수 있다.
JS Engine
- javascript 코드를 해석하고 실행한다.
UI Backend
- 기본적인 위젯을 그리는 인터페이스
Data Storage
- Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역

렌더링 엔진의 동작 원리

브라우저는 서버로부터 HTML 문서를 모두 전달 받는다.
렌더링 엔진은 전달받은 HTML 문서 파싱하여 DOM 트리를 구축한다.
- 어휘와 구문을 분석하여 HTML 문서를 파싱하고, 파싱 트리를 생성한다.
- 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
- 파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다.
외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
- DOM을 생성할 때 거쳤던 과정을 그대로 CSS에 반복
- 브라우저가 이해하고 처리할 수 있는 형식 (CSSOM - css object model)로 변환
DOM 트리와 3번의 결과물을 합쳐 렌더 트리를 구축한다.
- DOM Tree가 구축되어 가는 동안 브라우저는 DOM Tree를 기반으로 렌더 트리를 생성
- 문서를 시각적인 구성 요소로 만들어주는 역할을 한다.
렌더 트리의 각 노드에 대해서 화면 상에서 어디에 배치할 지 결정한다.
- 렌더링 트리는 위치와 크기를 가지고 있지 않기 때문에, 객체들에게 위치와 크기를 결정해준다.
UI 백엔드에서 렌더 트리를 그리게 되고, 화면에 우리가 볼 수 있도록 출력된다.
- 렌더 트리의 각 노드를 화면의 픽셀로 나타낸다.
- 렌더 트리 그리기가 완료되면, 화면에 콘텐츠가 표현된다.

기타

css를 작업할 때 높이는 가급적 auto로 놔두는 것이 좋다.
a 태그에 padding을 주어서 클릭을 쉽게 만든다.
- 사용성 향상
가상 요소 선택자를 사용해서 : 같은 의미없는 문자를 스크린 리더기가 읽어주는 경우, aria-hidden="true"속성을 사용하면 스크린 리더기가 읽지 않는다.
숨김 컨텐츠
- 디자인 상 존재하지는 않지만 전체적인 맥락을 이해하는데 도움을 주는 컨텐츠
- a11y-hidden = accessibility-hidden
  - a와 y사이에 스펠링이 11개라는 뜻

0811

23일 차 수업 정리

Negative margins

음수 마진은 문서 내의 정상적인 흐름을 건들이지 않는다.
즉, 요소를 이동하기 위해 음수 마진을 사용하면, 그 뒤에 오는 모든 요소들도 함께 이동하게 된다.
float이 적용되면 다르게 동작하므로 음수 마진을 사용할 경우에 좀 더 주의를 기울여야 한다.

static 요소에 음수 마진을 사용하는 경우

float이 적용되지 않은 요소라고 정의하면, top/left에 음수 마진을 주면, 그 방향으로 요소가 이동한다.
하지만 bottom/right에 음수 마진을 사용하면, 요소가 그 방향으로 이동하는 것이 아니라, 이 요소 다음에 오는 요소를 끌어당기게 된다.
음수 마진을 적용하는 요소에 width를 주지 않고, left/right에 음수 마진을 사용하게 되면 요소의 width를 넓히게 되는 효과가 나타난다.
- 마치 마진이 padding과 같이 동작

숨김 컨텐츠

`display: none`

/* 숨김 콘텐츠 */
.a11y-hidden {
  background-color: yellow;
  display: none;
}

콘텐츠를 숨기면 깔끔하게 숨겨지기는 하지만, 스크린 리더기가 데이터를 읽을 수 없기 때문에 접근성 관점에서는 좋지 않다.

top으로 이동하는 방법

/* 숨김 콘텐츠 */
.a11y-hidden {
  background-color: yellow;
  position: absolute;
  top: -9999em;
  overflow: hidden;
}

화면에서는 숨기고, 스크린 리더기는 데이터를 잘 읽을 수 있다.
스크린 리더기가 읽다가 스크롤이 위로 튀어버린다는 문제가 있다.
접근성은 보장이 되지만, 사용성이 떨어진다.

접근성, 사용성 보장하는 방법

.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  /* clip-path는 둘 중 하나 */
  clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}

접근성과 사용성 모두 보장한다.
가로 세로 1px의 요소를 생성하고, overflow를 hidden 처리하여 요소를 감춘다.
1px의 요소도 숨겨야 해서 clip과 clip-path 사용
- 크로스 브라우징을 하기 위해서 모두 선언
- 중요한 것은 구형 브라우저에서 적용되는 것을 위에 써야한다.
1px 요소가 다른 요소의 위치 선정에 방해되지 않기 위해서 position을 absolute로 변경

reflow와 repaint

어떠한 변화가 발생했을 때 브라우저는 최소한의 대응을 하도록 설계되었으며 특정 엘리먼트의 color값에 변화가 발생한다면 오직 해당 엘리먼트의 repaint만 유발한다.
하지만 엘리먼트의 포지션에 변화가 발생했을 경우에는 엘리먼트의 repaint는 물론 레이아웃까지도 유발(reflow)한다.
html 엘리먼트의 폰트사이즈를 키우는 것과 같은 커다란 변화들은 전체 렌더 트리의 repaint와 reflow를 유발한다.

repaint

엘리먼트의 스킨에 변화가 발생하지만, 레이아웃에는 영향을 미치지 않을 때 윱라
repaint는 해당 행위가 발생하는 순간, 문서내 DOM tree의 다른 노드들의 스킨까지도 검증해야 하므로 비용이 높다.

reflow

문서 내 노드들의 레이아웃, 포지션을 재계산 후 뿌려주므로 repaint보다도 더 심각한 퍼포먼스 저하를 유발시키는 프로세스이다.
특정 엘리먼트에 대한 reflow 발생 시, 해당 요소는 즉시 reflow state가 되며 해당 엘리먼트의 자식요소와 부모/조상 요소 역시 레이아웃 계산을 진행한다.
대부분의 리플로우는 페이지 전체의 렌더링을 다시 일으킨다고 볼 수 있다.
대표적인 reflow 발생 시키는 속성으로는 padding, margin, width, height, display, position등 외에도 레이아웃을 건드리는 속성들이 있다.

새로운 css 속성

box-shadow

요소의 테두리를 감싼 그림자 효과를 추가
쉼표로 구분해서 수평 수직거리(offset), 흐릿함과 확산 정도, 색상으로 이루어짐
border-radius가 요소와 함께 적용됐다면 박스 그림자도 똑같이 둥근 모서리를 갖게 됨

linear-gradient

그레이디언트는 배경처럼 background 속성에 적용 가능한 함수
기본 선형 그레이디언트는 두 가지의 색만 지정하면 된다.
- ex) linear-gradient(blue, pink);
기본적으로, 선형 그레이디언트는 위에서 아래로 진행하지만, 방향을 지정함으로써 그레이디언트를 회전할 수 있다.
ex) linear-gradient(to right, blue, pink);
그레이디언트가 적용되지 않을 때의 기본색을 지정할 수 있다.
- ex) #ccc linear-gradient(to right, blue, pink);
- #ccc가 기본색

white-space

요소가 공백 문자를 처리하는 법을 지정
normal: 연속 공백을 하나로 합침. 개행 문자도 공백 문자와 동일하게 처리. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄 바꿈
nowrap: 연속 공백을 하나로 합침. 줄 바꿈은 <br> 요소에서만 일어남
pre: 연속 공백 유지. 줄 바꿈은 개행문자와 <br> 요소에서만 일어남

기타

상하 여백은 안쪽에서 margin으로, 좌우 여백은 바깥 쪽에서 padding으로
크기가 변동될 일이 없는 컨텐츠라고 판단되면 높이를 정해놓기도 한다.
background는 먼저 작성된 이미지가 위에 쌓인다.

Twitter Facebook LinkedIn

이정훈