HTML
HTML5를 개방형 웹 플랫폼으로 간주할 때, HTML5의 구성 요소는 무엇인가요?
의미 - 콘텐츠를 보다 더 정확하게 설명할 수 있도록 허용
연결 - 새롭고 혁신적인 방법으로 서버와 통신할 수 있도록 허용
오프라인과 저장소 - 웹 페이지가 클라이언트 측에서 데이터를 로컬로 저장하여, 오프라인에서보다 효율적으로 작동하도록 허용
멀티미디어 - 개방형 웹에서 비디오와 오디오를 일급으로 만듬
2D/3D 그래픽과 효과 - 훨씬 다양한 프레젠테이션 옵션을 허용
성능과 통합 - 컴퓨터 하드웨어의 성능 최적화와 개선으로 더 나은 사용을 제공
장치 접근 - 다양한 입출력 장치의 사용을 허용
스타일링 - 사용자가 더 세련된 테마를 사용하게 함
이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 이 속성의 컨텐츠를 실행할 때 브라우저의 프로세스를 설명하세요.
기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 srcset 속성을 사용.
레티나 디스플레이를 통해 장치에 고품질 이미지를 제공하여 사용자 경험을 향상시키고, 저해상도 이미지를 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄임. (이유 : 더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문)
예를들어 img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""는 클라이언트의 해상도에 따라 브라우저에 small, medium, large .jpg 그래픽을 표시하도록 지시. 첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비. 320px 너비의 경우, 다음과 같은 계산을 따릅니다
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
클라이언트의 해상도가 1x 일 경우, 1.5625가 가장 가깝고 small.jpg에 해당하는 500w가 브라우저에 의해 선택.
해상도가 레티나 (2x)인 경우 브라우저는 최소값에서 가장 위로 가까운 해상도를 사용. 500w (1.5625)는 1보다 크고 이미지가 보기 좋지 않을 수 있기 때문에 선택하지 않는다는 것을 의미합니다. 그래서 브라우저는 계산 결과 비율값이 2에 가까운 1000w (3.125) 이미지를 선택.
srcset는 데스크탑 디스플레이처럼 거대한 이미지를 필요로하지 않기 때문에 화면 장치를 좁히는 작은 이미지 파일을 제공하고자하는 문제를 해결.
srcset는 화면이 작은 기기에서 데스크탑 디스플레이처럼 큰 이미지가 필요하지 않기 때문에 작은 이미지 파일을 제공하는 문제를 해결. 또한 선택적으로 고해상도/저해상도 화면에 다른 해상도 이미지를 제공.
프로그레시브 렌더링이 무엇인가요?
프로그레시브 렌더링이란 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술. (특히, 인식되는 로딩 시간을 향상)
예전에는 광대역 인터넷을 사용하기도 했지만 불안정한 모바일 데이터 연결이 점점 인기를 끌면서 최근 개발에 있어서도 여전히 유용
관련 기술 예시
- 이미지 지연 로딩
페이지의 이미지를 한꺼번에 로딩하지 않습니다. JavaScript를 사용하여 사용자가 이미지를 표시하는 페이지 부분으로 스크롤 할 때 이미지를 로드. - 보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링)
가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링될 페이지에 필요한 최소한의 CSS/콘텐츠/스크립트 만 포함하면 deferred 스크립트를 사용하거나 DOMContentLoaded/load 이벤트를 사용하여 다른 리소스와 내용을 로드. - 비동기 HTML 프래그먼트
페이지의 백엔드에서 HTML 페이지의 일부를 브라우저로 가져옴.
CSS
브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요?
문제와 그 문제를 일으키는 브라우저를 식별한 후, 해당 브라우저가 사용 중일 때만 로드되는 별도의 스타일 시트를 사용. 하지만 이 방식을 사용하려면 서버사이드 렌더링이 필요.
이미 이러한 스타일링 문제를 처리하고 있는 Bootstrap 같은 라이브러리를 사용.
autoprefixer를 사용하여 벤더 프리픽스를 코드에 자동으로 추가.
Reset CSS 또는 Normalize.css를 사용.
기능이 제한된 브라우저의 페이지는 어떻게 처리하나요? 어떤 기술/프로세스를 사용하나요?
- 우아한 퇴보
최신 브라우저를 위한 어플리케이션을 구축하는 동시에 그것이 구형 브라우저에서도 계속 작동하도록 하는 구축 방법. - 점진적 향상
기본 수준의 사용자 환경에 대한 응용 프로그램을 구축하지만 브라우저가 이를 지원할 경우 기능을 강화하는 방법.
caniuse.com을 사용하여 기능 지원을 확인.
자동 벤더 프리픽스 삽입을 위해 Autoprefixer 사용.
Modernizr를 사용하여 기능 감지.
CSS Feature 쿼리 @support 사용.
margin과 padding의 차이점은 무엇인가요?
margin 속성은 테두리와 이웃하는 요소 사이의 간격(배경색 영향X)
padding 속성은 내용과 테두리 사이의 간격
Event Bubbling에 대해서 설명해주세요.
DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음, 해당 이벤트가 부모에게 bubbling되고 부모에서 같은 이벤트가 발생합니다. 이 bubbling은 요소의 최상단 부모요소인 document까지 계속적으로 발생시킵니다. 이벤트 bubbling은 이벤트 위임의 작동 메커니즘입니다.
