HTML/CSS (2)
HTML
✔️ 목록 관련 태그
<ol> : ordered list, 순차적 목록
- 순서가 중요한 목록에 적용한다.
📍 추가 지식
브레드크럼 BreadCrumbs
사이트 구조와 현재 페이지의 계층구조를 링크 목록 등을 나타내는 것을 말하며 사용자의 웹사이트 탐색을 도와준다.
<ul> : unordered list, 비순차적 목록
- 순서가 중요하지 않는 목록에 적용한다.
<li> : 목록의 항목
- ol, ul의 자식 요소로만 사용할 수 있다.
<dl> : definition list, 설명 목록
- <dt> : 용어
- <dd> : 용어 설명
- 용어사전, 메타데이터(키-값 목록)을 표시할 때 사용한다.
- dd의 값이 변할 수 있다면 dl를 사용하면 안된다.
- 이미 정의되어 있거나 설명이 정해져 있는 경우에만 사용하여야 한다.
블록 레벨/인라인 레벨 요소는 이제 없어!
블록 레벨, 인라인 레벨의 분류는 HTML 4.01까지 사용되었다.
현재 표준 HTML에서는 콘텐츠 카테고리 집합으로 대체되었다.
✔️ block
▪️ 부모 요소의 전체 공간을 차지한다.
▪️ 앞뒤 요소 사이에 새로운 줄을 만든다.
▪️ 이전 이후 요소 사이에 줄 바꿈이 일어난다.
⚠️ 블록 요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소 안에 중첩이 가능하다.
▪️ div, p, li, nav, footer 등
✔️ inline
▪️ 항상 블록 레벨 요소 내에 포함된다.
▪️ 콘텐츠에 따라 할당된 공간만 차지한다.
▪️ 새로운 줄을 만들지 않는다.
▪️ a, em, strong 등
콘텐츠 카테고리 등장
자료 사진 출처 : 위니브 프론트엔드 스쿨
콘텐츠 카테고리? 특성을 공유하는 요소
MDN에서 정의한 콘텐츠 카테고리의 유형
- 메인 콘텐츠 카테고리는 여러 요소가 서로 공유하는 일반적인 콘텐츠 규칙을 설명한다.
- 폼 관련 콘텐츠 카테고리는 입력 폼 관련 요소가 공통으로 가지는 규칙을 설명한다.
- 특정 콘텐츠 카테고리는 소수의 요소만 공유하는 카테고리를 설명하며, 특정 문맥에서만 유효하기도 한다.
CSS
✔️ 간단하게 알아보는 웹 폰트와 최적화
❓ 웹 폰트는 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술이다.
- UX(사용자가 웹에서 정보를 얻는 과정의 경험) 측면에서 사용된다.
웹 폰트는 렌더링 과정에서 문제점이 생길 수 있다.
CSSOM(CSS Object Model)을 생성하는 과정에서 외부 웹 폰트 파일을 다운로드 한다.
→ paint 단계에서 외부 링크로 연결된 파일의 다운로드가 완료되지 않으면 브라우저는 해당 자원을 사용하는 콘텐츠의 렌더링을 차단하다.
→ 결과적으로 웹 폰트가 페이지에 보이지 않게 된다.
해결방안
폰트 파일의 용량 줄이기 : WOFF 2.0 형식 폰트, 서브셋 폰트, unicode-range 속성
텍스트가 항상 보이게 하기
❓ 브라우저 렌더링 차단 처리 방식의 이해
Internet Explorer 계열 브라우저는 FOUT(Flash Of Unstyled Text) 방식, 그 외 브라우저는 FOLT(Flash Of Invisible Text) 방식으로 렌더링 차단을 처리한다.
- FOUT 방식은 웹 폰트가 로딩될 때까지 우선 폴백 폰트로 텍스트를 렌더링한다. 웹 폰트 로딩이 완료되면 텍스트를 웹 폰트로 전환한다.
- FOIT 방식은 웹 폰트가 로딩되기 전까지 해당 텍스트를 화면에 보여주지 않는다.
→ 웹 폰트 로딩이 3초가 지나면 폴백 폰트로 우선 렌더링하여 웹 폰트의 로딩 시간에 대비한다.
👉 로딩이 길어져 텍스트가 보이지 않는 문제 등은 UX적으로 좋지 않지 때문에 FOUT 방식을 사용한 최적화가 가능하다.
👉 Font Face Observer 라이브러리, CSS font-display 속성 등
Font Style Matcher로 폰트 간 차이 줄이기 : FOUT 방식을 적용해도 레이아웃 깨짐 등의 문제가 발생할 수 있기 때문에 Font Style Matcher에서 폴백 폰트와 웹 폰트의 서식을 조정하여 두 폰트의 레이아웃을 비슷하게 맞추면 FOUT 현상이 발생할 때 레이아웃 깨짐을 최소화 할 수 있다.
preload 옵션으로 먼저 로딩하기 : HTML에서 <link rel="preload" href="" ~~>을 사용하면 해당 리소스를 다른 리소스보다 빨리 로딩한다. 중요도가 높은 자원을 의도적으로 먼저 로딩할 때 preload 옵션을 사용한다.
구글 웹폰트 : 구글 웹폰트는 동적 분할과 캐싱을 지원하기 때문에 여러 웹 사이트에서 전체 다운로드 시간을 줄여준다.
참고 : 웹 폰트 사용과 최적화의 최근 동향, 웹 성능 개선 폰트편
선택자 우선순위
1. 후자우선 원칙
▪️ 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따르게 된다.
2. 구체성의 원칙(Specificity, 명시도)
▪️ 가중치
1. inline 스타일 속성
2. id #
3. class .
4. type(tag), 가상 요소 선택자
▪️ 우선 순위 계산
- inline-style : 1000점
- id 선택자 # : 100점
- class ., 가상클래스, 속성선택자 : 10점
- 타입, 가상요소 선택자 : 1점
- 전체선택자 * : 0점
3. 중요성 원칙
▪️ important : 다른 CSS의 어떤 선언보다도 우선된다.
박스가 모델해서 Box Model lolol
→ HTML 요소를 감싸는 상자
▪️ 요소, 패딩, 테두리, 마진으로 구성되어있다.
▪️ 블록 레벨 요소에만 적용되고, 인라인 레벨 요소는 박스 모델에 정의된 일부 동작만 사용한다.
→ inline 요소는 width, height, 상하 margin 값이 적용되지 않는다.
⭐ 마진병합 현상 Margin Collapsing
1. 요소와 요소 사이에 마진 탑/바텀의 공간이 있는 경우 더 높은 마진 값이 적용된다.
2. 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑/바텀 값은 부모의 높이에 영향을 미치지 않는다.
자료 사진 출처 : 위니브 프론트엔드 스쿨
< 마진병합 현상 해결방법 >
부모요소에
- overflow 속성 값 적용
- display: inline-block 값 적용
- border 값 적용
- display: flow-root 적용 (IE 지원 ❌)
추가 연습!
div 딱 한 개만 쓸께요 흑흑
하면서 고민했던 점
- section 마다 마진을 줘서 테두리에 여백을 남긴건데 가운데에 생기는 마진 겹침은 어떻게 상쇄 시켜야 할까?
- first-child, last-child로 오른쪽, 왼쪽만 단위를 조절하는 것이 맞을까? - CSS를 더 깔끔하게 쓸 수 있는 방법 없을까?
- flex가 너무 어렵다..!
- 화면 확대, 축소 시 높이가 글자랑 화면 크기에 맞게 같이 확대, 축소 될 수 없을까?
- 이 고민과 함께 단위 사용에 대한 고민이 있었다😭
