기술 면접 준비 - HTML, CSS 기본 (3)

728x90

HTML, CSS

!Doctype은 어떤 역할을 하는가

[HTML] DOCTYPE은 무엇이고 왜 필요할까?

HTML 버전과 DOCTYPE에 대해 알아보자

velog.io

어떤 버전의 HTML을 사용할 것인지 브라우저에 알려주는 역할을 한다.
이를 선언하지 않으면 같은 내용의 HTML 문서라도 브라우저의 환경에 따라 다른 결과 화면을 출력하는 경우가 발생할 수 있다. 때문에 HTML 문서를 올바르게 실행하기 위해서는 HTML 버전에 맞게 DOCTYPE 선언을 해줘야 한다.
html 5 이후부터는 모두 <!DOCTYPE html>을 사용한다.
meta tag로 할 수 있는 것들은 무엇이 있는가?

메타 태그란?

웹 브라우저가 웹 페이지에 대해서 필수로 알아야 할 정보들을 포함한 테그이다.
어떤 문서유형이고, 키워드가 무엇인지, 개발자가 누구인지에 대한 정보가 있다.
SEO 최적화 작업도 메타태그에 해당된다.

메타 태그 구성

http-equiv : http-equiv="항목명" 웹 브라우저가 서버에 명령을 내리는 속정으로 name 속성을 대신해서 사용 가능. html 문서가 응답 헤더와 함꼐 웹 서버로부터 웹 브라우저에 전송되었을 경우에만 의미를 갖는다.
name : 몇 개의 meta 정보의 이름을 정할 수 있다. 지정하지 않으면 http-equiv 와 같은 기능을 한다.
content : meta 정보의 내용을 지정한다.
charset : html5 에서 새로 추가된 속성. 이전에는 http-equiv content 속성의 속성 값으로 사용되었지만 charset 속성을 사용하면 더 간단하게 명시 가능하다.

// 문자 인코딩 방식
<meta charset="UTF-8">

// 브라우저 호환성
<meta http-equiv="X-UA-Compatible" content="IE=edge">

// 뷰포트 설정
<meta name="viewport" content="width=device-width, inital-scale=1.0">

//해당 문서의 제목
<meta name="title" content="페이지 제목">

// 해당 문서의 저자(작성자)
<meta name="author" content="페이지 작성자">

// 해당 문서에 대한 요약 설명
<meta name="description" content="페이지에 대한 요약 설명">

// 문서 작성시 사용한 편집기
<meta name="generator" content="페이지 작성시 사용한 편집기">

// 키워드 정리
<meta name="keywords" content="키워드를 콤마로 구분하여 나열">

// 사이트 주제
<meta name="Subject" content="사이트주제">

// 캐시(cache) 방지
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">

// 검색 로봇 수집 허용
<meta name="robots" content="index, follow">

view port란?

유저가 화면을 바라보는 전제 하에 해당 화면의 범위나 규모를 말한다.
대형 모니터에서는 viewport는 브라우저 창의 크기이며
일반 모바일 디바이스는 브라우저가 전체화면일때 viewport는 전체화면이다.

Viewport 종류

layout viewport : 브라우저에서 상단 탭을 제외한 innerHeight와 innerWidth, vw, vh가 layout viewport의 높이와 너비다
visual viewport : layout viewport에서 현재 보이는 부분이다. 따라서 visual viewport는 layout viewport보다 같거나 작다.

viewport 사용

모바일 브라우저에서 사용할 때 중요하다.

<meta name="viewport" content="width=device-width, inital-scale=1.0">

다양한 모바일 기기에서도 페이지의 너비나 화면의 배율을 설정할 수 있다.
반응형 웹 페이지를 만드는데 필수적이다.

stacking context란?

html 요소들이 사용자를 향한 가상의 z축을 따라 3차원적으로 개념화된 것.
stacking context를 번역하면 쌓임 맥락이라는 뜻이다.
이는 사용자가 뷰포트를 바라보고 있다고 가정한다.
html 요소들은 이 공간을 요소 속성에 기반한 우선 순위로 차지한다.

우선순위

root 요소(최상위 요소 - <html>)
z-index 음의 값
block level 요소
float 속성이 지정된 요소
inline level 요소
z-index 0 값
z-index 양수 값

css가 선언적인 성격을 띄고 있는 이유

프로그래머가 무엇을 수행하려는지 지정하고 어떻게 수행할지에 대한 세부 사항을 시스템에 맡기는 프로그래밍 특성을 반영하기 때문이다.

이런 접근방식을 통해 코드의 가독성을 높이고 유지 관리를 용이하게 할 수 있다.

Box Model

모든 html 요소는 box 형태의 영역을 가지고 있다. box는 content, padding, border, margin으로 구성되어 있다.

브라우저는 박스 모델의 크기와 프로퍼티, 위치를 근거로 하여 렌더링을 실행한다.

검색 엔진 최적화

웹 접근성

고령자나 시각, 청각 장애를 가진 분들이 비장애인과 같이 웹에 접근할 수 있고 상호작용 가능한지를 의미한다.

예를 들어 시각장애를 가진 사람들에게 음성으로 정보 전달이 가능한 웹일 경우, 웹 접근성이 있다라고 할 수 있다.

법적 준수
장애를 가진 사람들에 대한 혜택
비즈니스 관점에서의 이점 - 추가 고객
서버 부하 감소
검색 엔진 최적화

Sementic Web

기계가 이해할 수 있는 형태로 웹을 구성한 것을 의미한다. 개발자들이 의도한 요소를 html의 요소로 집어넣은 것을 말하는데, 예를 들어 제목을 단순히 div 태그로 하는 것이 아니라 h1 태그를 사용하여 문서를 작성한 경우를 말한다.

왜 sementic markup을 사용해야 할까?

검색 엔진 최적화가 가능하다. - 이러한 방식은 기계가 더 명확하게 해당 요소의 특성을 파악할 수 있기 때문에 검색 노추리 원활하게 할 수 있고, 사용자에게 접근성도 높아진다.
협업 시에 해당 요소의 명확한 사용 의도를 다른 개발자들에게도 알릴 수 있는 방법이 될 수 있다.

HTML 요소

none-sementic : div, span

semantic : for, table, img

+추가된 sementic

header  헤더를 의미합니다
nav  네비게이션을 의미합니다
aside  사이드에 위치하는 공간을 의미합니다
section  본문의 여러 내용(article)을 포함하는 공간을 의미한다.
article 본문의 주내용이 들어가는 공간을 의미합니다
footer 푸터를 의미합니다.

이러한 방법을 활용하여 웹 최적화 작업을 수행할 수 있다.

Browser Rendering 최적화

DOM이란?

html, xml 문서의 프로그래밍 인터페이스다. 문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수 있는 방법을 제공한다.

브라우저 렌더링 과정

브라우저는 어떻게 동작하는가?

브라우저 렌더링 - 리플로우(reflow) 와 리페인트(repaint)

어느 기술 인터뷰에서 리플로우와 리페인트에 대해 설명해 달라는 질문을 받은적이 있었다. 아는대로 설명을 하긴 했지만 언제 어떻게 발생되고 성능적으로 어떻게 개선할 수 있을지에 대해서

kwangsunny.tistory.com

parsing단계에서 html과 css로 DOM과 CSSOM을 만든다
Style 단계에서 DOM과 CSSOM을 합쳐 Render tree를 생성한다.
layout 단계에서 생성 트리를 기반으로 실제 화면에 구현될 레이아웃을 계산한다.
paint 단계에서 실제 화면에 나타낼 레이아웃의 픽셀을 구성한다.
composite를 통해 실제 화면에 그려주어 브라우저 랜더링이 진행된다.

composite단계에서 일어나는 내부 동작

Paint 단계에서 생성된 여러 레이아웃들을 레스터화하고 합성하여 하나의 페이지처럼 보이게 하는 작업을 수행합니다. 이때 레이어 합성은 GPU를 사용하여 효율적으로 수행된다.

DOM트리와 랜더 트리

돔 트리는 html을 브라우저가 이해할 수 있는 형태의 트리 자료구조로 만든 것으로 html에서 표현한 모든 요소를 담고 있지만 랜더 트리는 이러한 요소들 중 실제로 화면에 구현되는 요소들만으로 구성된 트리이다. 대표적으로 display none은 랜더 트리에서 제외되게 된다.

리플로우와 리페인트

리플로우는 기하학적 변화 혹은 연산이 필요한 변화가 있을 경우 동작하며, 리페인트는 색상 등과 같은 픽셀의 변화가 있을 경우 발생한다. 리플로우가 동작하면 필연적으로 리페인트 또한 발생하지만, 색상 값만 바뀌는 경우, 리페인트만 발생하게 된다.

Transform의 translate와 position의 차이

둘 다 요소의 위치를 설정하기 위해 사용되는 속성이다. 하지만 position과 같은 경우 요소의 위치와 크기가 계산되기 때문에 추후 reflow, repaint가 발생할 수 있다. translate는 이를 생략하고 사용자의 컴퓨터 GPU를 사용하기 때문에 브라우저의 부담을 덜 수 있다.

Absolute를 사용하는 대신 transform을 사용하면 생기는 이점

absolute는 브라우저 랜더링 과정에서 요소에 영향을 주기 때문에 동일한 css 애니메이션을 만들 경우, 계속해서 리플로우, 리페인트가 발생하여 CPU 계산이 발생할 수 있다.

하지만 transform을 사용하면 이러한 단계를 건너뛰고 사용자의 웹GPU를 사용하기 때문에 브라우저에 부담을 덜 수 있다.

강제 동기 레이아웃

웹 브라우저에서 레이아웃 계산을 강제로 동기적으로 처리하는 것을 말한다.
레이아웃 계산은 웹 페이지의 요소들의 위치와 크기를 결정하는 과정으로, 브라우저는 일반적으로 최적화를 위해 비동기적으로 레이아웃 계산을 처리한다.
이때 강제 동기 레이아웃은 레이아웃을 변경하는 특정 작업이 수행되는 시점에서 레이아웃을 강제로 계산하도록 하는 것을 의미한다.
이는 레이아웃을 계산하기 위해 다른 요소들의 크기와 위치를 확인해야 할 때 발생할 수 있다.

강제동기 레이아웃이 발생되는 경우

스타일 변경
DOM 요소 읽기

성능에 부정적인 영향을 줄 수 있고, 불필요한 레이아웃 계산이 발생하여 페이지 반응이 저하될 수 있다.

`const tabBtn = document.getElementById('tab_btn');

tabBtn.style.fontSize = '24px';
console.log(testBlock.offsetTop); // offsetTop 호출 직전 브라우저 내부에서는 동기 레이아웃이 발생한다.
tabBtn.style.margin = '10px';
// 레이아웃

레이아웃 스레싱

위의 강제 동기 레이아웃이 연속적으로 발생하는 것을 말한다. → 강제로 여러번 레이아웃을 수행하도록 만든다.

var elements = document.querySelectorAll('.my-element');
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = (elements[i].offsetWidth + 10) + 'px';
}

피하는 방법

스타일 변경을 배치 처리하기 : 먼저 모든 스타일 값을 읽고, 그 다음에 한 번에 스타일 변경을 적용
DOM 에 접근하는 값 캐싱하기: 브라우저가 여러번 계산하는 것을 피하기
Javscript 코드 최적화 : 레이아웃 정보를 필요로 하는 함수를 호출하기 전에 스타일 변경을 수행하지 않도록 주의
RAF (자바스크립트)
디바운스, 스토틀 (자바스크립트)
스타일 변경 최소화
transform tanslate 사용 (CSS)
DOM 연산 결과 캐싱

const boxSty = document.getElementById('box').style;
boxSty.top = "10px";
boxSty.left = "20px";
boxSty.color = "lightgrey";

위의 방법으로 브라우저 랜더링 최적화 수행 가능

RAF, request animation

requestAnimationFrame()에 대해 알아보자

기존의 setTimeout은 프레임을 고려하지 않고 작동하기 때문에 언제 콜백 함수가 호출되는지 보장할 수 없다.
프레임에 걸쳐서 실행될 경우, 해당 프레임을 놓치기 때문에 에니메이션이 버벅거리게 된다.
그러나 RAF는 화면 주사율에 동기화되어 브라우저가 화면을 그릴 준비가 되었을 떄 실행된다. → RAF에 작성된 콜백함수가 animation frame queue에 등록되며 다음 repaint 직전에 이 큐에 있는 모든 콜백함수가 한번에 처리된다. → 프레임이 유실되는 문제를 방지할 수 있다.

이벤트 버블링

버블링

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.

joshua1988.github.io

[JavaScript] 이벤트 위임

자바스크립트 코드 내 이벤트 버블링과 캡쳐링을 이해한다.이벤트 위임 패턴을 이해한다.이벤트 위임이 무엇인지 알기위해서는 먼저 이벤트 버블링과 캡쳐링이 무엇인지 알아야한다.특정 엘리

velog.io

특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다.
브라우저는 특정 화면 요소에서 이벤트가 발행하였을 떄 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. 때문에 각 태그마다 이벤트가 등록되어 상위 요소로 이벤트가 전달되는 것을 확인할 수 있다.
기본적으로 html 엘리먼트까지 올라간다.

하위 요소에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링이라고 한다.

특정 태그에서만 이벤트가 발생할 경우에는 발생하지 않는다.

캡쳐링

이벤트 버블링과 반대로 상위 요소에서 하위 요소로 타고 내려가는 것을 말한다.

addEventListener API 옵션에서 capture:true를 설정해주면 된다.

이벤트 버블링은 기본 태그들이 가지고 있는 기본 동작을 방지하기 위해 사용할 수 있다.

기본 동작 막기
event.preventDefault // form 태그에서 폼이 전달되어 새로고침되는 기능 방지

이벤트 전파 방지
event.stopPropagation (버블링과 캡쳐링 둘다 맊음)
-> 버블링에서는 타겟 엘리먼트만 발생하게 동작하고
캡쳐링에서는 최상단 엘리먼트에서만 이벤트가 발생하게 한다.

이벤트 위임(Event Delegation)

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤드들을 제어하는 방식

이벤트 위임은 캡쳐링과 버블링을 이용한 것으로, 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식이다

var itemList = document.querySelector('.itemList');
itemList.addEventListener('click', function(event) {
	alert('clicked');
});

여러개의 자식 엘리멘트 이벤트 관리
동적 엘리먼트에 대한 이벤트 관리

스크립트 불러오기

일반적으로 브라우저는 HTML 파일을 읽어온 후 위에서부터 아래로 한 줄씩 해석을 수행하며, 스크립트 파일을 마주할 경우 해당 파일이 완료될 때 까지 html 랜더를 일시적으로 막는다. → 용량이 클 경우 html 문서가 제대로 보이지 않는다.

async

<script src="analytics.js" async></script>

브라우저가 DOM을 구성하는 동안 백그라운드에서 스크립트를 불러올 수 있다.
스크립트를 불러오는 과정에서 DOM 랜더를 차단하지 않도록 보장한다.
→ 하지만 async 스크립트는 파일을 부러오는 것만 병렬로 실행한다는 것이 중요하기 때문에 파일의 로딩을 마치게 된다면 그 즉시 DOM 랜더를 멈추고 async 방식으로 불러온 스크립트 파일의 해석을 시작한다.
때문에 파일을 불러와도 스크립트 해석은 스크립트 파일의 오버헤드에 달려있다.

DOM에 접근하는 스크립트를 async 방식으로 불러오는 것은 권장되지 않는다.

실행 순서가 보장되지 않는다.

서드파이 스크립트를 불러올 때 사용

defer

async와 비슷하게 동작하지만 로드가 완료된 후 즉시 내용이 실행되지 않고 모든 DOM이 로드된 후에야 실행

선언한대로 실행 순서가 보장됨

실행 시점을 지연시키는 것이기 때문에 DOMContentLoaded 이벤트가 발생되기 전에 이미 실행된 상태

범용적으로 사용할 수 있는 속성

CLS

CLS(Cumulative Layout Shift)를 알아보자!

Layout Shift란 페이지 콘텐츠가 예기치 않게 이동하는 현상이다.보통 리소스가 비동기식으로 로드되거나 DOM 요소가 동적으로 추가되어 발생한다.크기를 알 수 없는 이미지나 동영상, 대체 크기보

velog.io

Cumulative Layout Shift로 페이지 콘텐츠가 예기치 않게 이동하는 현상이다.

일반적으로 리소스가 비동기식으로 로딩되거나 DOM 요소가 동적으로 추가되어 발생한다.

크기를 알 수 없는 도영ㅇ상
대체 크기보다 작게 랜더링 되는 글꼴
동적으로 크기가 조정되는 광고나 위젯

이외의 웹 지표 개선 방법

[최적화] 핵심적인 웹 지표(LCP,FID,CLS) 개선하기

🐻 : LCP, FID, CLS 에 대해서도 정리해주신다고 했잖아요! 그리하여 웹 성능 최적화 포스팅의 연장. 웹 성능 최적화 V2 ⚡️ 핵심적인 웹 지표 개선하기.

velog.io

개선 방법

이미지 비디오 요소에 width, height값 적기
동적 추가 콘텐츠일 경우 스켈레톤 UI 적용하기
애니메이션일 경우 transform 사용하기
웹폰트일 경우 FOIT와 FOUT를 줄이기
비슷한 크기의 폰트 사용하기

'개발 > 스터디' 카테고리의 다른 글

기술 면접 준비 - React (5) 完 (0)	2024.06.29
기술 면접 준비 - Typescript 기본 (4) (0)	2024.06.24
기술 면접 준비 - HTTP 기본 (2) (0)	2024.06.17
기술 면접 준비 - Javascript 기본 (1) (2)	2024.06.16
F-Lab 내돈내산 수강 후기 (2)	2024.06.12

Daily Habits

기술 면접 준비 - HTML, CSS 기본 (3)

HTML, CSS

!Doctype은 어떤 역할을 하는가

메타 태그란?

view port란?

stacking context란?

css가 선언적인 성격을 띄고 있는 이유

Box Model

검색 엔진 최적화

웹 접근성

Sementic Web

Browser Rendering 최적화

DOM이란?

브라우저 렌더링 과정

강제 동기 레이아웃

RAF, request animation

이벤트 버블링

스크립트 불러오기

CLS

개선 방법

'개발 > 스터디' 카테고리의 다른 글

티스토리툴바

기술 면접 준비 - HTML, CSS 기본 (3)

HTML, CSS

!Doctype은 어떤 역할을 하는가

메타 태그란?

view port란?

stacking context란?

css가 선언적인 성격을 띄고 있는 이유

Box Model

검색 엔진 최적화

웹 접근성

Sementic Web

Browser Rendering 최적화

DOM이란?

브라우저 렌더링 과정

강제 동기 레이아웃

RAF, request animation

이벤트 버블링

스크립트 불러오기

CLS

개선 방법

'개발 > 스터디' 카테고리의 다른 글

관련글

티스토리툴바