HTML (5) 썸네일형 리스트형 [번역] 빅테크 프론트엔드 기술 인터뷰 : Html편 Front End Interview Handbook의 HTML 파트를 번역 및 정리한 글입니다 2023.02.01 - [기업면접도전] - [번역] 빅테크 프론트엔드 기술 인터뷰 : CSS편 Meta, Amazon., Google과 같은 미국 빅테크 프론트엔드 면접의 기출 문제라 합니다. 2019년 기준으로 작성된 것들이 꽤 있어서, 몇가지 경험 기반 답변들은 스스로 생각해 보시는 것도 좋은 듯 합니다. 해당 링크에서 원문을 확인하실 수 있습니다. 1. DOCTYPE이 뭔가요? 왜 중요한가요? DOCTYPE은 Document Type의 약자입니다. DOCTYPE은 항상 DTD(Document Type Definition)와 연결됩니다. DTD는 특정 타입의 문서가 어떻게 구성되어야 하는지를 정의하는 반면(.. Iframe 완벽 가이드 꽤 자주 보지만 아직도 익숙하지 않은 Iframe에 대해 알아봅니다. 원문 링크입니다 : https://blog.logrocket.com/the-ultimate-guide-to-iframes/ The ultimate guide to iframes - LogRocket Blog Not a fan of iframes? This post provides an overview of the tag's best features, shows you how to use them, and how to secure them against vulnerabilities. blog.logrocket.com iframe 요소(인라인 프레임의 줄임말)는 아마도 가장 오래된 HTML 태그 중 하나이며 1997년 Microsoft I.. [모질라 읽기] Viewport 메타 태그 모질라의 viewport 메타 태그 섹션을 읽어봅니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag Viewport meta tag - HTML: HyperText Markup Language | MDN This article describes how to use the "viewport" tag to control the viewport's size and shape. developer.mozilla.org 최근 사내 모바일 앱을 개편하면서, 이곳저곳에서 날라오는 여러 무질서한 html을 표준화하는 스크립트를 작성할 일이 있었습니다. viewport meta 태그 설정들이 모바일 앱 레이아웃에서 상당히 중요한 역할을 한다는 것.. CSS 애니메이션 : Keyframe CSS 키프레임 애니메이션은 @keyframes at-rule을 사용하여 선언됩니다. 한 세트의 CSS 선언에서 다른 세트로의 전환을 지정할 수 있습니다. @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0%); } } 각 @keyframes 문에는 이름이 필요합니다! 이 경우 이름을 slide-in으로 지정했습니다. 이것을 전역 변수처럼 생각할 수 있습니다. 키프레임 애니메이션은 일반적이며 재사용할 수 있습니다. animation 속성을 사용하여 특정 선택자에 적용할 수 있습니다. .box { animation: slide-in 1000ms; } 동일한 keyframe 선언에 여러 애니메이션을 .. 브라우저에서 ESModule 사용하기 Super Simple Start to ESModules in the Browser (kentcdodds.com) Super Simple Start to ESModules in the Browser All major browsers support ESModules now. Here's how to get started using them. kentcdodds.com 위 포스트의 요약본이다. 1. 인라인 스크립트로 사용하기 2. import해서 사용하기 // script-src.js import {appendDiv} from './append-div.js' appendDiv('Hello from external script') 중요 : .js 확장자 적어주기 (url에서 가져오는 경우 상관없음.) 비동기 .. 이전 1 다음
