상위 60개 HTML 인터뷰 질문 및 답변(2025)
다음은 꿈의 직업을 얻기 위한 신입 지원자와 숙련된 지원자를 위한 HTML 인터뷰 질문과 답변입니다.
1) HTML이란 무엇입니까?
HTML은 HyperText Markup Language의 약자이며 World Wide Web의 언어입니다. 웹에서 페이지를 만들고 표시하는 데 사용되는 표준 텍스트 형식 언어입니다. HTML 문서는 콘텐츠와 페이지에 적절하게 표시되도록 형식을 지정하는 태그라는 두 가지 요소로 구성됩니다.
2) 태그란 무엇입니까?
콘텐츠는 적절한 형식을 지정하기 위해 HTML 태그 사이에 배치됩니다. 보다 작음 기호(<)와 보다 큼 기호(>)를 사용합니다. 슬래시 기호는 닫는 태그로도 사용됩니다. 예를 들어:
<strong>sample</strong>
3) 모든 HTML 태그는 쌍으로 제공됩니까?
아니요. 닫는 태그가 필요하지 않은 단일 HTML 태그가 있습니다. 예는 다음과 같습니다 태그와 태그.
4) 페이지를 디자인할 때 사용할 수 있는 일반적인 목록에는 어떤 것이 있나요?
다음 목록 유형 중 하나 또는 조합을 삽입할 수 있습니다.
– 주문 목록
– 순서가 없는 목록
– 정의 목록
– 메뉴 목록
– 디렉토리 목록
이 목록 유형 각각은 서로 다른 태그 세트를 사용하여 작성합니다.
5) HTML에 주석을 어떻게 삽입하나요?
HTML의 주석은 “로 시작합니다. ". 예를 들어:
<!-- A SAMPLE COMMENT -->
6) 모든 캐릭터 개체가 모든 시스템에서 올바르게 표시됩니까?
아니요. 운영 체제 실행 중인 브라우저가 해당 문자를 지원하지 않습니다. 이런 경우 해당 문자는 상자로 표시됩니다.
7) 이미지맵이란 무엇인가요?
이미지 맵을 사용하면 단일 이미지를 사용하여 다양한 웹 페이지에 연결할 수 있습니다. 이미지 매핑의 일부로 만들려는 이미지의 모양을 정의할 수 있습니다.
8) 공백을 축소하면 어떤 이점이 있나요?
공백은 공백 문자의 연속으로 HTML에서 단일 공백 문자로 처리됩니다. 브라우저는 여러 공백을 단일 공백으로 축소하므로 여러 공백에 대해 걱정하지 않고 텍스트 줄을 들여쓸 수 있습니다. 이를 통해 HTML 코드를 훨씬 더 읽기 쉬운 형식으로 구성할 수 있습니다.
9) 속성 값을 무엇이든 설정할 수 있습니까? 아니면 허용되는 특정 값이 있습니까?
일부 속성 값은 사전 정의된 값으로만 설정할 수 있습니다. 다른 속성은 크기의 픽셀 수를 나타내는 모든 숫자 값을 허용할 수 있습니다.
10) 브라우저 페이지에 저작권 기호를 어떻게 삽입하나요?
저작권 기호를 삽입하려면 © 또는 & #169; HTML 파일에서.
11) 같은 페이지 내의 섹션에 대한 링크를 어떻게 생성합니까?
태그를 이용하여 링크를 생성할 수 있으며, 숫자(#) 기호를 이용하여 참조할 수 있습니다. 예를 들어, BACK TO TOP 이라는 한 줄을 사용하면 웹페이지에 "BACK TO TOP"이라는 단어가 표시되고 topmost라는 책갈피에 대한 링크가 표시됩니다. 그런 다음 사용자가 "BACK TO TOP"을 클릭하면 해당 지점으로 연결되도록 동일한 웹페이지 상단 어딘가에 별도의 태그 명령을 생성합니다.
12) HTML 파일에서 목록 요소를 바로 유지하는 방법이 있습니까?
들여쓰기를 사용하면 목록 요소를 직선으로 유지할 수 있습니다. 각 하위 목록을 포함하는 상위 목록보다 더 깊게 들여쓰면 포함된 다양한 목록과 요소를 한눈에 확인할 수 있습니다.
13) 잡지에 표시된 웹 주소는 어느 웹 페이지를 가리키는 것입니까?
웹의 모든 웹페이지는 별도의 웹 주소를 가질 수 있습니다. 이러한 주소의 대부분은 최상위 웹 페이지와 관련이 있습니다. 잡지에 표시되는 게시된 웹 주소는 일반적으로 이 최상위 페이지를 가리킵니다. 이 최상위 페이지에서 웹사이트 내의 다른 모든 페이지에 액세스할 수 있습니다.
14) 이미지 매핑에서 대체 텍스트의 용도는 무엇입니까?
이미지 맵을 사용하면 어떤 핫스팟이 어떤 링크에 해당하는지 확인하기가 쉽게 혼란스럽고 어려울 수 있습니다. 대체 텍스트를 사용하면 각 핫스팟 링크에 설명 텍스트를 넣을 수 있습니다.
15) 이전 HTML 파일이 최신 브라우저에서 작동합니까?
예, 이전 HTML 파일은 HTML 표준을 준수합니다. 대부분의 오래된 파일은 최신 브라우저에서 작동하지만 일부 기능은 작동하지 않을 수 있습니다.
16) 하이퍼링크는 텍스트에만 적용되나요?
아니요, 하이퍼링크는 이미지뿐만 아니라 텍스트에도 사용할 수 있습니다. 즉, 사용자가 클릭하면 다른 페이지로 링크할 수 있는 링크로 이미지를 변환할 수 있습니다. ... 태그 조합 내에서 이미지를 둘러싸세요.
17) 사용자의 운영 체제가 필요한 문자를 지원하지 않는 경우 기호는 어떻게 표현됩니까?
운영 체제가 특정 문자를 지원하지 않는 경우에도 해당 문자를 이미지로 표시하여 표시할 수 있습니다.
18) 목록 중간에 있는 숫자 유형을 어떻게 변경하나요?
그만큼 태그에는 유형과 값이라는 두 가지 속성이 포함됩니다. 유형 속성은 목록 항목의 번호 매기기 유형을 변경하는 데 사용할 수 있습니다. value 속성은 숫자 인덱스를 변경할 수 있습니다.
19) 스타일 시트란 무엇입니까?
스타일 시트를 사용하면 일관되고 이동 가능하며 잘 정의된 스타일 템플릿을 작성할 수 있습니다. 이러한 템플릿은 여러 다른 웹 페이지에 연결될 수 있으므로 사이트 내 모든 웹 페이지의 모양과 느낌을 쉽게 유지 관리하고 변경할 수 있습니다.
20) HTML에서 사용 가능한 상태 글머리 기호 유형
순서가 지정된 목록을 사용하면 알파벳 및 로마 숫자를 포함한 몇 가지 다른 목록 유형을 사용하도록 선택할 수 있습니다. 순서가 지정되지 않은 목록의 유형 속성은 디스크, 정사각형 또는 원형으로 설정할 수 있습니다.
21) 웹페이지에 다양한 색상의 텍스트를 어떻게 만드나요?
다양한 색상으로 텍스트를 생성하려면 색상을 적용하려는 모든 문자에 대해 ... 태그를 사용하세요. 이 태그 조합을 필요한 만큼 여러 번 사용할 수 있으며 단일 문자 또는 전체 단어를 둘러쌀 수 있습니다.
22) 숫자 엔터티 값과 이름이 지정된 문자 엔터티 값이 모두 있는 이유는 무엇입니까?
숫자 값은 다양한 문자의 ASCII 값에서 가져오지만 기억하기 어려울 수 있습니다. 이로 인해 웹 페이지 디자이너가 더 쉽게 사용할 수 있도록 명명된 문자 엔터티 값이 생성되었습니다.
23) 다음을 출력하는 HTML 테이블 태그 시퀀스를 작성하십시오.
50개 100 500
10개 5 50
답변 :
<table> <tr> <td>50 pcs</td> <td>100</td> <td>500</td> </tr> <tr> <td>10 pcs</td> <td>5</td> <td>50</td> </tr> </table>
24) 여러 개의 체크박스를 그룹화하면 어떤 이점이 있나요?
체크박스는 서로 영향을 주지 않지만 체크박스를 그룹화하면 정리하는 데 도움이 됩니다. 체크박스 버튼은 이름을 가질 수 있으며 그룹에 속할 필요는 없습니다. 단일 웹 페이지에는 다양한 확인란 그룹이 있을 수 있습니다.
25) 태그 세트가 겹치면 어떻게 되나요?
두 개의 HTML 태그 세트가 겹치는 경우 첫 번째 태그만 인식됩니다. 이 문제는 브라우저 화면에 텍스트가 제대로 표시되지 않을 때 발생합니다.
26) 애플릿이란 무엇입니까?
애플릿은 계산, 애니메이션, 정보 처리 등의 특정 기능을 수행하기 위해 웹 페이지에 내장할 수 있는 작은 프로그램입니다. 애플릿은 Java 언어를 사용하여 작성됩니다.
27) 태그 사이에 텍스트가 없거나 실수로 텍스트를 생략한 경우 어떻게 되나요? HTML 파일 표시에 영향을 미치나요?
태그 사이에 텍스트가 없으면 서식을 지정할 항목이 없습니다. 따라서 서식이 나타나지 않습니다. 일부 태그, 특히 다음과 같이 닫는 태그가 없는 태그 태그 사이에는 텍스트가 필요하지 않습니다.
28) 표 테두리에 특정 색상을 설정할 수 있나요?
스타일 시트를 사용하여 테두리 색상을 지정할 수 있지만 스타일 시트를 사용하지 않는 표의 색상은 텍스트 색상과 동일합니다.
29) 클릭하면 다른 웹페이지로 연결되는 링크를 어떻게 만드나요?
하이퍼링크나 다른 웹페이지로 연결되는 링크를 만들려면 href 태그를 사용하세요. 일반적인 형식은 다음 과 같습니다.
"site"를 텍스트를 클릭하면 연결될 것으로 예상되는 실제 페이지 URL로 바꾸세요.
30) 이미지를 정렬하고 텍스트를 줄바꿈하는 데 사용할 수 있는 다른 방법은 무엇입니까?
표를 사용하여 텍스트와 이미지의 위치를 지정할 수 있습니다. 이미지 주위에 텍스트를 배치하는 또 다른 유용한 방법은 스타일 시트를 사용하는 것입니다.
31) 단일 텍스트 링크가 두 개의 다른 웹 페이지를 가리킬 수 있습니까?
아니요 . 태그는 단일 href 속성만 허용할 수 있으며 단일 웹페이지만 가리킬 수 있습니다.
32) 디렉토리 및 메뉴 목록과 순서가 없는 목록의 차이점은 무엇인가요?
주요 차이점은 디렉토리 및 메뉴 목록에 글머리 기호 스타일을 변경하기 위한 속성이 포함되어 있지 않다는 것입니다.
33) 총알의 색깔을 바꿀 수 있나요?
글머리 기호 색상은 항상 목록 항목의 첫 번째 문자 색상과 동일합니다. 주변을 둘러보면 색상 속성이 설정된 태그 세트가 있는 첫 번째 문자, 글머리 기호 색상 및 첫 번째 문자는 텍스트와 다른 색상이 됩니다.
34) 텍스트 필드 크기의 제한은 무엇입니까?
텍스트 필드의 기본 크기는 약 13자입니다. 그러나 크기 속성을 포함하면 크기 값을 1까지 낮게 설정할 수 있습니다. 최대 크기 값은 브라우저 너비에 따라 결정됩니다. 크기 속성이 0으로 설정되면 크기는 기본 크기인 13자로 설정됩니다.
35) 마 태그는 항상 행이나 열의 시작 부분에 와야 합니까?
어느 태그는 다음과 같이 변경될 수 있습니다. 꼬리표. 이로 인해 태그는 브라우저에서 굵게 표시됩니다. 하지만 태그는 주로 제목에 사용되며 제목에만 사용할 필요는 없습니다.
36) 테두리 속성과 규칙 속성 사이에는 어떤 관계가 있나요?
테두리 속성이 1이 아닌 값으로 설정된 경우 두께가 1픽셀인 기본 셀 테두리가 셀 사이에 자동으로 추가됩니다. 마찬가지로 테두리 속성이 포함되지 않은 경우 규칙 속성이 추가되면 기본 XNUMX픽셀 테두리가 나타납니다. 꼬리표.
37) 천막이란 무엇입니까?
선택 윤곽을 사용하면 웹 페이지에 스크롤 텍스트를 넣을 수 있습니다. 이렇게 하려면 스크롤하여 표시하려는 텍스트를 그리고 태그.
38) 클릭하면 이메일을 보낼 수 있는 웹페이지 텍스트를 어떻게 만드나요?
텍스트를 클릭 가능한 링크로 변경하여 이메일을 보내려면 href 태그 내에서 mailto 명령을 사용하세요. 형식은 다음과 같습니다.
<A HREF=”mailto:youremailaddress”>text to be clicked</A>
39) 아르 태그는 텍스트 섹션을 분리하는 유일한 방법입니까?
아니요. 태그는 텍스트 줄을 구분하는 한 가지 방법일 뿐입니다. 다음과 같은 다른 태그 태그와 태그와 별도의 텍스트 섹션도 있습니다.
40) 텍스트가 브라우저 외부에 나타나는 경우가 있습니까?
기본적으로 텍스트는 브라우저 창 내에 나타나도록 줄 바꿈됩니다. 그러나 텍스트가 정의된 너비를 가진 테이블 셀의 일부인 경우 텍스트가 브라우저 창 너머로 확장될 수 있습니다.
41) 액티브 링크는 일반 링크와 어떻게 다릅니까?
일반 및 활성 링크의 기본 색상은 파란색입니다. 일부 브라우저는 마우스 커서를 해당 링크 위에 놓으면 활성 링크를 인식합니다. 다른 사람들은 링크에 포커스가 있을 때 활성 링크를 인식합니다. 해당 링크 위에 마우스 커서가 없는 링크는 일반 링크로 간주됩니다.
42) 스타일 시트는 괄호 안에 포함될 수 있는 새로운 스타일 정의의 수를 제한합니까?
스타일 시트는 주어진 선택기의 대괄호 안에 포함될 수 있는 스타일 정의의 수를 제한하지 않습니다. 그러나 모든 새로운 스타일 정의는 세미콜론 기호로 다른 스타일 정의와 구분되어야 합니다.
43) 글꼴 두께에 대해 670 또는 973과 같은 분수 가중치 값을 지정할 수 있습니까?
구현은 브라우저에 따라 크게 다르지만 표준은 분수 가중치 값을 지원하지 않습니다. 허용되는 값은 두 개의 XNUMX으로 끝나야 합니다.
44) 스타일 시트와 관련하여 준수되는 계층 구조는 무엇입니까?
단일 선택기에 세 가지 다른 스타일 정의가 포함된 경우 실제 태그에 가장 가까운 정의가 우선합니다. 인라인 스타일은 내장 스타일 시트보다 우선하고 외부 스타일 시트보다 우선합니다.
45) 클래스 이름을 가진 여러 선택자를 함께 그룹화할 수 있나요?
쉼표로 구분하여 동일한 스타일 정의로 여러 선택기를 정의할 수 있습니다. 이 동일한 기술은 클래스 이름이 있는 선택자에도 적용됩니다.
46) 외부를 열면 어떻게 되나요? CSS 브라우저에 파일이 있나요?
브라우저에서 외부 CSS 파일을 열려고 하면 파일 확장자가 다르기 때문에 브라우저에서 파일을 열 수 없습니다. 외부 CSS 파일을 사용하는 유일한 방법은 다음을 사용하여 참조하는 것입니다. 다른 HTML 문서 내의 태그.
47) 사진을 웹 페이지의 배경 이미지로 어떻게 만드나요?
이렇게 하려면 태그 코드를 다음과 같이 태그를 지정하세요.
<body background = “image.gif”>
image.gif를 이미지 파일 이름으로 바꾸세요. 그러면 사진이 촬영되어 웹페이지의 배경 이미지가 됩니다.
48) 문단과 같이 목록이 아닌 요소에 list-style-type 속성을 사용하면 어떻게 되나요?
단락과 같이 목록이 아닌 요소에 list-style-type 속성을 사용하면 해당 속성이 무시되고 단락에 영향을 주지 않습니다.
49) 언제 프레임을 사용하는 것이 적절한가요?
프레임을 사용하면 사이트 탐색이 훨씬 쉬워집니다. 사이트에 대한 기본 링크가 브라우저 상단이나 가장자리를 따라 나타나는 프레임에 있는 경우 해당 링크의 콘텐츠는 브라우저 창의 나머지 부분에 표시될 수 있습니다.
50) 행 또는 열 속성의 값 개수의 합이 100%가 되지 않으면 어떻게 됩니까?
브라우저는 값의 총합을 기준으로 프레임 크기를 조정합니다. cols 속성이 100%, 200%로 설정되면 브라우저는 두 개의 수직 프레임을 표시하며 두 번째 프레임은 첫 번째 프레임의 두 배입니다.
51) HTML5를 지원하는 브라우저는 무엇입니까?
최신 버전의 Google Chrome, Apple Safari, Mozilla Firefox 및 Opera는 모두 대부분의 HTML5 기능을 지원합니다.
52) HTML 5에 포함된 두 개의 새로운 태그 이름을 지정하세요.
그리고 HTML5 버전에 포함된 새로운 태그입니다. 주로 Flash, Silverlight 및 유사한 기술을 대체하여 멀티미디어 항목을 재생하는 데 사용됩니다.
53) HTML5 버전에 어떤 두 개의 시맨틱 태그가 포함되어 있는지 아시나요?
그만큼 그리고 태그는 HTML5에 포함된 두 개의 새로운 태그입니다. 기사는 여러 기사를 포함할 수 있는 여러 섹션으로 구성될 수 있습니다. 기사 태그는 더 큰 전체의 한 부분인 콘텐츠의 전체 블록을 나타냅니다.
54) 무엇입니까? HTML5에서?
이 태그는 자체 포함된 유동 콘텐츠를 나타냅니다. 주로 문서의 주요 흐름을 참조하는 단일 단위로 사용됩니다.
55) 캔버스 요소의 용도는 무엇입니까?
캔버스 요소는 차트, 그래프, 우회를 작성하는 데 도움이 됩니다. 포토샵 2D 이미지를 생성하고 이를 HTML5 코드에 직접 배치합니다.
56) HTML5에서 사용할 수 있는 새로운 FORM 요소는 무엇입니까?
HTML5의 새로운 Form 요소는 이전 버전보다 훨씬 더 나은 기능을 제공합니다.
이러한 기능을 수행하기 위해 제공되는 태그는 다음과 같습니다.
1) – 이 태그는 입력 컨트롤에 대한 옵션 목록을 지정하는 데 사용됩니다.
2) – 이 태그는 키 쌍 생성기 필드를 나타냅니다.
삼) – 이는 모든 스크립팅 계산의 결과를 나타냅니다.
57) HTML5 웹 저장소의 두 가지 이점을 알려주세요.
HTML5 웹 저장소의 두 가지 주요 이점:
- 쿠키에 있는 데이터보다 확실히 더 많은 최대 10MB의 데이터를 저장할 수 있습니다.
- 웹 스토리지 데이터는 HTTP 요청으로 전송할 수 없습니다. 애플리케이션의 성능을 높이는 데 도움이 됩니다.
58) HTML5의 두 가지 유형의 웹 저장소는 무엇입니까?
HTML5의 두 가지 저장 유형은 다음과 같습니다.
세션 스토리지: 현재 세션의 데이터만 저장합니다. 브라우저를 닫으면 세션 저장소에 저장된 데이터가 자동으로 지워진다는 의미입니다.
로컬 스토리지: 로컬 저장소는 HTML5 웹 저장소의 또 다른 유형입니다. 로컬 저장소에서는 현재 브라우저 창을 닫아도 데이터가 자동으로 삭제되지 않습니다.
59) HTML5의 애플리케이션 캐시는 무엇이며 왜 사용됩니까?
애플리케이션 캐시 개념은 웹 애플리케이션이 캐시된다는 의미입니다. 인터넷 연결 없이도 접속이 가능합니다.
애플리케이션 캐시의 몇 가지 장점:
- 오프라인 탐색 – 웹 사용자는 오프라인일 때도 애플리케이션을 사용할 수 있습니다.
- 속도- 캐시된 리소스가 더 빠르게 로드됩니다.
- 서버 부하 감소 – 웹 브라우저는 서버에서 업데이트된 리소스만 다운로드합니다.
60) 양식을 위해 HTML5에서 제공하는 다섯 가지 새로운 입력 유형을 설명하시겠습니까?
다음은 HTML5에서 제공하는 중요한 새로운 데이터 유형입니다.
- 시간 사용자가 날짜를 선택할 수 있습니다.
- 날짜/지역: 이 입력 유형을 사용하면 시간대 없이 날짜와 시간을 선택할 수 있습니다.
- 날짜 시간: 이 입력 유형을 사용하면 사용자가 시간대와 함께 날짜 및 시간을 선택할 수 있습니다.
- 월: 사용자가 월과 연도를 선택할 수 있습니다.
- 이메일 : 이러한 입력 필드는 이메일 주소를 포함하는 데 사용됩니다.
이러한 면접 질문은 귀하의 비바(구술)에도 도움이 될 것입니다. 밝은 경력을 쌓기 위해 UI / UX 개발자라면 지원자는 다양한 HTML5 인터뷰 질문을 받는 인터뷰를 풀어야 합니다.
당신은 좋아할 것입니다 :
선생님,
HTML 코드의 텍스트 상자에 대해 알고 싶습니다
입력한 텍스트 상자의 숫자를 계산하는 방법 내 말은.. 텍스트 상자에 1234를 입력한다는 거죠. 나는 결과 1+2+3+4 =10을 원합니다. 어때? 거기에 대한 코드를 알려주세요
이를 위해서는 자바스크립트를 사용해야 합니다. 예를 들어 1234와 같은 입력 문자열을 분할한 다음 해당 숫자를 추가해야 합니다.
안녕하세요
나는 HTML 웹사이트를 배우고 있어요
나의 도움.
HTML에서
매우 유용한 튜토리얼….훌륭해요…좋아요!!
HTML 상상
감사합니다. 인터뷰에 참석하는 것이 정말 큰 도움이 되었습니다.
훌륭합니다…나에게 매우 도움이 됩니다…html 퀴즈…
좋은
멋진 학습 콘텐츠,
많은 감사
10q 당신은 HTML에 대한 완전한 지식을 바탕으로 새로운 세대를 창조하고 있습니다.
귀하의 기사가 새로운 독자에게 매우 독점적이고 효과적이기 때문에 귀하의 블로그에 진심으로 만족합니다.
정말 도움이 되네요... 강좌 시험에..
이거 정말 좋다. 많이 도와주세요. 업로드해 주셔서 감사합니다.
감사합니다 면접에 참석하는데 많은 도움이 되었습니다
HTML을 알 수 있게 도와주셔서 정말 감사합니다
좋은 HTML 주제
TQ 선생님
좋은 퀴즈와 웹사이트, 이걸 만드는 데 정말 많은 노력을 했다는 걸 알아요
Hi
계산기 인터페이스를 코딩하려고 합니다.
나는 두 가지 문제에 직면하고 있습니다 :
1) 이 버튼의 (.,+) 크기가 정확하지 않은 이유
2) 이 코드가 필요한 이유:
.스타일 {
여백 : 0 자동;
인터페이스가 중앙에 있지 않습니까?
그런데 내 브라우저는 Edge입니다
감사
내 HTML 코드:
계산기 인터페이스
0
7
8
9
4
5
6
1
2
3
0
.
±
×
+
-
÷
=
초기화
.버튼 {
배경색: rgb(81, 122, 121);
테두리: 7px 단색 RGB(213, 236, 213);
색상 : 흰색;
패딩 : 10px 45px;
글꼴 크기 : 25px;
}
.button20 {
배경색: rgb(36, 117, 117);
패딩 : 15px 32px;
텍스트 정렬 : 오른쪽;
폭 : 285px;
높이 : 45px;
}
.button19 {
패딩 : 10px 20px;
}
.스타일 {
여백 : 0 자동;
}
네, 도움이 됩니다
여백이 0인 자동 너비 제공
HTML 학습자입니다. 귀하의 수업이 저에게 매우 도움이 되기를 바랍니다.
도움이된다
도대체 html img 태그의 올바른 방법은 무엇입니까
오심
니스
각각의 개념이 명확하게 잘 구성되어 설명되어 있는 콘텐츠를 제공해 주셔서 정말 감사합니다. 하지만 한 가지 더 개선해야 할 점은 이론적인 내용이 아닌 이해하기 쉬운 내용이 더 필요하다는 점입니다.