21.08.19 노트정리
HTML5 Outline 알고리즘
섹셔닝 루트
<body>그리고 섹셔닝 콘텐츠에 헤딩이 없으면 outline을 형성하지 않는다.
최상위 수준 헤딩이 둘 이상이면 명시적 섹션은 사라지고 헤딩에 의한 암시적 섹션을 형성한다.
유연한 outline를 형성하려면 헤딩과 함께 섹셔닝 콘텐츠를 쓰자
하위 호환성을 확보하려면 헤딩의 수준을 결정할 때 outline 알고리즘에 의존하지 말자
문서의 구조를 명확하게 하려면 최상위 수준의 헤딩은 하나만 작성하자
헤딩 (Heading)
문서의 outline를 형성하는 기본 아이템
헤딩 없이 outline 없다
명시적 / 암시적 섹션
명시적 섹션
명시적 섹션을 사용하면 최신 웹 브라우저는 outline의 수준을 자동으로 보정한다.
- 섹셔닝 콘텐츠를 사용하여 명시적으로 outline를 생성하도록 만든 섹션
- outline = 섹셔닝 콘텐츠
암시적 섹션
- 섹셔닝 콘텐츠를 사용하지 않고 헤딩 만을 사용하여 암시적으로 outline를 생성하도록 만든 섹션
- outline = 헤딩 블럭
섹셔닝 루트
독립적 콘텐츠로 분리되어 아웃라인에 영향을 주지는 않지만, 보이지 않는 자기만의 제목이 있다.
독립체지만, 구조 중 하나에 포함될 수 있도록 해줘야 좋은 아웃라인이 된다.
섹셔닝 루트는 새로운 outline를 생성하지만, 조상 섹셔닝 루트는 자손 섹셔닝 루트를 outline로 취급하지 않는다.
<body><blockquote><figure><fieldset><td>
섹셔닝 콘텐츠
명시적 outline를 생성하는 outline 컨테이너
헤딩을 함께 사용하면 헤딩 수준이 자동으로 바뀐다.
섹셔닝 콘텐츠를 사용하면 최신 브라우저의 outline 알고리즘이 헤딩 수준을 적절하게 보정한다.
outline 알고리즘에 의존하지 않는 명시적 헤딩을 사용하면 낡은 웹 브라우저와 화면낭독기의 호환성을 확보할 수 있다.
<section><article><nav><aside>
Button이 figure를 포함할 수 없는 이유
알수없다 ㅠ
transparent model
transparent model의 콘텐츠 모델(자식으로 허용하는 요소)은 transparent model 부모 콘텐츠 모델과 동일하게 결정됨
모든 태그를 자식으로 받을 수 있음
<a><ins><del><object><video><audio><map><noscript><canvas>
<a role="button"> 트릭
button이 figure를 포함하면(섹셔닝 루트와 연관있는듯) 문법적 오류가 있기 때문에
모든 요소를 포함할 수 있는<a>요소에 button이라는 역할을 주어 figure를 포함한 버튼으로 만든다
BEM, OOCSS, SMACSS (CSS방법론)
- 추후 상세 작성
aria-haspopup(property)
ariaHasPopup속성은aria-hasPopup상태의 값을 반영함- 이는 메뉴나 대화상자 등의 요소에 트리거할 수 있는 인터렉티브한 팝업요소의 가용성을 나타냅니다
dl, dt, dd (Definition list or Description list)
- 국내 사이트에는 구조화하여 마크업하기 쉽다는 이유로
<dl>,<dt>,<dd>태그를 많이 사용합니다. <dl>,<dt>,<dd>태그는 1:1로 쌍을 이룰 때 사용하는 것이 가장 정확한 의미를 읽어내어 스크린리더 사용자의 이해가 쉽습니다.
<dl>
<dt>Cabin Class</dt>
<dd><input type="radio" id="cla-1">
<label for="cla-1">Economy Class</label>
</dd>
<dd><input type="radio" id="cla-2">
<label for="cla-2">Prestige Class</label>
</dd>
<dd><input type="radio" id="cla-3">
<label for="cla-3">First Class</label>
</dd>
</dl>- 위와 같은 형태는 정의형 목록도 아니고 설명을 위한 목록도 아닙니다.
flex
무조건 보기 특히 (gap)과 연관있는거 같은거 보기
img[Attributes Style]
속성 스타일
<img src="/path/to/image.png" width="800" height="400" />webp 포맷
WebP 이미지는 JPEG 및 PNG 이미지보다 25 ~ 35% 작습니다.
- 페이지 크기를 줄일 수 있고 성능이 향상됩니다.
Youtube는 WebP형식으로 썸네일을 바꾸면 페이지 로드 속도가 10% 빨라진다는 것을 발견했습니다.
페이스북은 WebP형식을 사용할 때 JPEG의 파일크기를 25 ~ 35% 줄였고, PNG의 파일 크기를 80% 줄였습니다.
- JPEG, PNG, GIF의 뛰어난 대체품 입니다.
비손실 압축과 손실 압축 모두 지원합니다.
비손실 압축에서는 데이터가 손실되지 않습니다.
손실 압축에서는 파일 사이즈를 축소할 수 있지만 이미지 품질을 저하시킬 수 있습니다.
picture (if문 같이 동작한다)
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>정리
- 우선 되어야 하는 이미지 포맷은
<source>태그에서 가장 먼저 마크업 해야함 - type Attribute의 갑은 이미지 포맷에 대응하는 MIME 타입이어야 함
- 이미지의 MIME 유형과 확장자는 비슷하지만 같은 것은 아님 (ex : .jpg vs imagejpeg)
<img>태그는 항상 포함하고 모든<source>태그 뒤에 마지막에 표시<img>태그로 지정된 리소스는 fallback이미지로 사용할 수 있게 범용적으로 지원되는 형식(JPEG)등이어야 함<img>태그는<picture>태그를 지원하지 않는 브라우저에서 이미지를 보여주기 위한 부분
multi-column layer
다단(multi-column) 레이아웃은 다단 텍스트 정의가 쉽도록 블록 레이아웃 모드를 확장함
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width
이미지 이상한 여백 이슈 해결
- vertical-align: top;
- display: block;
currentColor
currentColor는 CSS3에서 도입된 개념으로 currentColor 키워드가 설정되면, color가 상속으로 처리됨
div {
border-color: currentColor;
}backdrop-filter
/* 키워드 값 */
backdrop-filter: none;
/* SVG 필터를 가리키는 URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 값 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* 다중 필터 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* 전역 값 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;구글 SEO(헤딩이 도움된다?)
구글 크롤러가 웹사이트의 정보를 크롤링하고 순위를 매기는 방식에 맞도록 웹사이트를 수정, 조율하여
최적화 작업을 하고, 이를 통해 검색 결과(SERPs)의 상단에 타겟 웹사이트를 구글 상위에 노출시켜
트래픽(방문자)를 높이는 디지털 마케팅 전략
정의
SEO(Search Engine Optimization)의 약자로 검색 엔진 최적화를 의미함
특정 웹사이트의 온사이트(on-site)와 오프사이트(off-site), 컨텐츠와 기타 중요 요소들을
검색엔진이 선호하는 구조로 최적화 하여 사용자가 특정 검색어를 입력했을 대 본인의 웹사이트가
상단에 올 수 있도록 하여 트래픽을 늘리고 매출을 높이는 디지털 마케팅 전략
SEO 기술적 요소
- 전략적인 메타 태그
- 캐노니컬 태그 외의 다양한 태그의 정리
- 모바일 최적화
- 내부링크
- 외부 링크 등등
