기술면접 - HTML
1.Local Storage vs Session Storage vs Cookie
로컬 스토리지는 클라이언트 측 웹 스토리지 메커니즘으로, 웹 브라우저의 로컬에 데이터를 영구적으로 저장합니다. 로컬 스토리지에 저장된 데이터는 사용자가 웹 페이지를 닫고 다시 열어도 유지됩니다. 로컬 스토리지는 도메인 레벨로 데이터를 저장하며, JavaScript를 사
2.script, script async, script defer가 무엇인가요?
<script> 태그는 HTML 문서에서 JavaScript 코드를 로드하고 실행하는 데 사용됩니다. <script> 태그에는 세 가지 주요 속성이 있습니다: async, defer, 그리고 속성 없음.<script> 태그에 속성이 없는 경우, 브라우저
3.시멘틱 마크업이 무엇인가요?
시멘틱 마크업(Semantic Markup)은 웹 문서를 작성할 때 HTML 요소를 사용하여 문서의 구조와 의미를 명확하게 표현하는 것을 말합니다. 즉, 시멘틱 마크업은 HTML 요소를 의미와 역할에 맞게 사용하여 문서의 구조를 논리적으로 정의하는 것을 의미합니다.시멘
4.Doctype이 무엇인가요?
DOCTYPE(문서 유형 선언)은 HTML 문서의 첫 줄에 위치하는 특별한 선언입니다. DOCTYPE은 웹 브라우저에게 문서가 어떤 버전의 HTML이나 XML로 작성되었는지를 알려주는 역할을 합니다. DOCTYPE은 다음과 같은 형식으로 작성됩니다:위의 예시는 HTML
5.html 렌더링 중에 js가 실행되면 렌더링이 멈추는 이유가 무엇인가요?
JavaScript는 브라우저에서 동적인 기능을 제공하기 위해 사용되는 프로그래밍 언어입니다. 브라우저는 HTML 문서를 파싱하고 렌더링하는 도중에 JavaScript 코드를 만나면 해당 코드를 실행합니다. 이 때 JavaScript 코드의 실행이 끝날 때까지 HTML
6.이벤트 버블링과 캡처링에 대해 설명해주세요
이벤트 버블링(Event Bubbling)과 캡처링(Event Capturing)은 웹 개발에서 이벤트 처리 방식을 설명하는 용어입니다. 이 두 용어는 HTML 문서 내에서 이벤트가 전파되는 방향을 나타냅니다.이벤트 버블링(Event Bubbling)은 특정 요소에서
7.data 속성에 대해서 설명해주세요.
HTML의 data 속성은 사용자 정의 데이터를 HTML 요소에 추가하는 데 사용되는 속성입니다. 이 속성을 사용하여 웹 개발자는 요소에 추가 정보를 제공하고 JavaScript 및 CSS에서 해당 정보를 활용할 수 있습니다.data 속성은 data- 접두사를 가진 속
8.프로그레시브 렌더링이 무엇인가요?
프로그레시브 렌더링(Progressive Rendering)은 웹 페이지를 사용자에게 점진적으로 표시하는 웹 성능 최적화 기법입니다. 이 기법은 사용자가 웹 페이지를 빠르게 확인할 수 있도록 페이지의 초기 로딩과 함께 내용을 조금씩 렌더링하는 방식을 채택합니다.일반적인
9.이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요?
srcset 속성은 <img> 태그에서 사용되는 속성으로, 웹 페이지에서 다양한 디바이스와 화면 크기에 맞는 이미지를 제공하는 데 사용됩니다. 이 속성을 사용하는 주된 이유는 다음과 같습니다:반응형 이미지 제공: 다양한 장치와 화면 크기에서 최적화된 이미지를 제공
10.section 태그와 article 태그의 사용 용도가 무엇인가요?
<section> 태그와 <article> 태그는 HTML5에서 도입된 의미론적인 요소로, 웹 페이지의 구조와 콘텐츠를 더 명확하게 정의하는 데 사용됩니다. 각각의 사용 용도에 대해 설명해드리겠습니다:<section> 태그:<section> 태그는
11.aria- 속성이 무엇인가요?
aria- 속성은 웹 애플리케이션의 접근성을 향상시키기 위해 사용되는 HTML 속성입니다. "aria"는 Accessible Rich Internet Applications(접근 가능한 풍부한 인터넷 애플리케이션)의 약자입니다. aria- 속성은 웹 페이지나 애플리케이
12.aside 태그가 무엇인가요?
HTML5의 <aside> 태그는 웹 문서에서 주요 콘텐츠와는 관련이 적은 내용을 표현하는 데 사용되는 태그입니다. <aside> 태그 안에 포함된 내용은 일반적으로 주요 콘텐츠와는 독립적이지만 관련성이 있을 수 있습니다. 이 태그를 사용하여 부가적인 정보,
13.p 태그와 br 태그의 차이점은 무엇인가요?
<p> 태그는 HTML에서 단락(paragraph)을 표현하기 위해 사용되는 태그입니다. <p> 태그는 텍스트의 블록을 생성하며, 보통 문단이나 단락으로 구성된 텍스트를 묶는 데 사용됩니다. <p> 태그 안에는 텍스트, 이미지, 링크 등 다양한 내용을
14.ol 태그와 ul 태그의 차이점이 무엇인가요?
<ol> 태그와 <ul> 태그는 모두 목록(list)을 나타내는 태그입니다. 그러나 그들의 주요 차이점은 다음과 같습니다:<ol> 태그 (Ordered List):<ol> 태그는 정렬된 목록(ordered list)을 나타냅니다.목록 항목은 일련번
15.HTML5의 폼 유효성 검사(Validation)를 어떻게 구현하나요?
HTML5에서 폼 유효성 검사(validation)를 구현하는 방법은 다음과 같습니다:필수 필드 검사 (Required Field Validation):<input> 요소에 required 속성을 추가하여 필수 필드로 지정합니다.사용자가 해당 필드를 작성하지 않으
16.SEO를 위해 HTML에서 어떤 요소와 속성을 사용하나요?
SEO (Search Engine Optimization)를 위해 HTML에서 다양한 요소와 속성을 사용할 수 있습니다. 이러한 요소와 속성은 검색 엔진에서 웹 페이지를 색인화하고 이해하는 데 도움을 줄 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 요소와 속성입니
17.HTML5에서 새롭게 추가된 미디어 요소는 무엇인가요?
HTML5에서 새롭게 추가된 미디어 요소는 다음과 같습니다:<video> 요소: 동영상을 재생하는 데 사용됩니다. <source> 요소를 사용하여 다양한 형식의 동영상 파일을 지원할 수 있습니다. 또한 controls 속성을 추가하여 사용자가 동영상을 제어할
18.다국어 사이트 제작시 주의할 점은 무엇인가요?
다국어 사이트를 제작할 때 주의해야 할 몇 가지 점은 다음과 같습니다:언어 및 지역 문화 이해:각 언어와 지역의 문화, 관습, 선호도 등을 고려하여 콘텐츠를 번역하고 맞춤화해야 합니다.각 언어 및 지역에 적합한 이미지, 색상, 단어 선택 등을 고려하여 사용자 경험을 개
19.meta 태그가 무엇인가요?
<meta> 태그는 HTML 문서의 메타 데이터(metadata)를 정의하는 데 사용되는 태그입니다. 메타 데이터는 문서에 대한 정보를 제공하며, 브라우저나 검색 엔진 등이 문서를 이해하고 처리하는 데 도움을 줍니다. <meta> 태그는 <head> 요
20.img태그와 background-image의 차이가 무엇인가요?
<img> 태그와 background-image의 차이는 다음과 같습니다:사용 방식:<img> 태그: <img> 태그는 HTML 문서의 일부로 이미지를 직접 삽입하는 방식입니다. <img> 태그의 src 속성을 사용하여 이미지 파일의 경로를 지정합