[W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보자

프론트엔드 스터디를 하면서 강의를 다 듣고 나면, w3schools라는 사이트에서 관련 문제들을 풀어보기로 정하였다. 

 

https://www.w3schools.com/quiztest/default.asp

W3Schools Quizzes

위 사이트에 들어가면 HTML, CSS, JavaScript뿐만 아니라 Java, C, Kotlin 등 다양한 언어에 대한 퀴즈를 풀어볼 수 있다. 퀴즈가 영어로 되어있다는 점은 아쉽지만 그래도 복습하기에는 좋은 것 같다.

 

이번에는 HTML을 공부했으므로 HTML에 대한 퀴즈를 풀어봤다.

 

퀴즈 결과

풀어본 결과 40문제를 풀어서 30문제를 맞았다. 문제를 풀어보니 내가 아직 모르는 개념들도 많고 알고 있다고 생각했는데 막상 퀴즈를 푸니 헷갈려하는 개념들이 많다는 것을 깨달았다. 그래서 틀린 문제들을 오답정리하면서 HTML을 더 확실히 익히기로 했다.

---

오답정리

 

HTML은 무엇을 의미하는가?

→ HTML은 Hyper Text Markup Language이다.

 

 

강조된 텍스트를 정의하는 올바른 HTML 요소를 선택하세요

→ <em>을 사용하면 텍스트를 강조할 수 있다.

 

 

드롭다운 목록을 만들기 위한 올바른 HTML은 무엇인가요?

→ <select>를 사용하면 drop-down list를 만들 수 있다.

 

※ drop-down이 뭐지?

→ HTML에서 "드롭다운"은 사용자가 클릭하거나 마우스를 올리면 선택 가능한 목록이 표시되는 인터페이스 요소를 의미합니다. 주로 선택할 수 있는 여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴 또는 드롭다운 목록이라고도 불립니다. 사용자가 드롭다운을 클릭하면 목록이 펼쳐지며, 사용자는 그 중 하나의 항목을 선택할 수 있습니다.

(출처: chatGPT)

 

텍스트 영역을 만들기 위한 올바른 HTML은 무엇인가요?

→ <textarea>를 사용하면 텍스트 영역을 만들 수 있다.

 

블록 요소는 보통 새로운 줄을 시작하지 않고 표시됩니다.

→ 거짓이다. 블록 요소는 새로운 줄을 시작하고 표시된다.

 

※ <p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소이다.

그에 반해 inline은 새로운 줄을 시작하지 않고 표시되는데, <span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소이다.

(출처: http://www.tcpschool.com/html/html_space_blockInline)

 

HTML 전역 속성인 "contenteditable"은 다음과 같이 사용된다:

→ "contenteditable" 속성은 요소의 편집 가능 여부를 지정하는 데 사용된다. 이 속성을 사용하면 웹 페이지에서 해당 요소의 내용을 직접 편집할 수 있는 기능을 제공할 수 있다. 속성 값으로 "true"를 설정하면 요소의 내용이 편집 가능해지고, "false"를 설정하면 편집이 불가능해진다.(출처: chatGPT)

 

 

HTML에서 "onblur"과 "onfocus"는:

→ event attributes다.

• "onblur": 이벤트 핸들러 속성으로, 요소가 포커스를 잃었을 때 실행되는 JavaScript 코드를 지정합니다. 즉, 요소에서 포커스가 벗어났을 때 어떤 동작을 수행할지 정의하는 데 사용됩니다.
• "onfocus": 이벤트 핸들러 속성으로, 요소에 포커스가 이동했을 때 실행되는 JavaScript 코드를 지정합니다. 즉, 요소가 포커스를 받았을 때 어떤 동작을 수행할지 정의하는 데 사용됩니다.

(출처: chatGPT)

 

SVG로 정의된 그래픽은 어떤 형식으로 되어 있나요?

→ SVG로 정의된 그래픽은 "XML 형식"으로 되어 있다. SVG는 "스케일러블 벡터 그래픽"의 약자로, 벡터 그래픽을 표현하기 위한 XML 기반의 형식이다. XML은 데이터를 구조화하고 태그로 둘러싸인 요소를 사용하여 정보를 표현하는 형식이며, SVG도 이와 같은 구조를 따른다. SVG 형식은 확대 또는 축소에 따라 그래픽이 깨지지 않고 부드럽게 조정될 수 있는 장점을 가지고 있다. 또한, SVG 형식을 사용하여 그래픽을 정의하면 크기가 조정 가능하고 다양한 환경에서 일관된 모양을 유지할 수 있다.(출처: chatGPT)

 

HTML에서 입력 필드가 반드시 작성되어야 함을 지정하는 데 사용되는 속성은 무엇인가요?

→ required를 사용하면 된다.

 

※ HTML에서 **required**는 입력 필드에 사용되는 속성으로, 해당 입력 필드가 반드시 작성되어야 함을 지정한다. 이 속성을 사용하면 사용자가 양식을 제출할 때 해당 필드가 비어있으면 양식이 유효하지 않다고 판단된다. 따라서 required 속성을 추가하면 사용자가 필드를 작성하지 않은 경우, 브라우저는 경고 메시지를 표시하거나 양식을 제출할 수 없도록 막는다.

예시로 <input> 요소에 required 속성을 추가하여 필수 입력 필드를 정의할 수 있다: <input type="text" required>

위의 코드는 텍스트 입력 필드를 생성하고, required 속성을 추가하여 사용자가 반드시 해당 필드를 작성해야 한다고 지정한다.(출처: chatGPT)

 

 

HTML에서 스칼라 측정 값을 범위 내에서 표시하는 데 사용되는 요소는 무엇인가요?

→ HTML에서 스칼라 측정 값을 범위 내에서 표시하는 데 사용되는 요소는 <meter> 요소이다.

 

※ <meter> 요소는 스칼라 값을 표시하고, 해당 값이 지정된 범위 내에서 어떤 수준을 나타내는지 시각적으로 나타낼 수 있다. <meter> 요소는 다음과 같은 속성을 사용하여 값을 설정하고 범위를 지정할 수 있다:

• value: 표시할 값이다.
• min: 최소값을 지정한다.
• max: 최대값을 지정한다.
• low: 낮은 수준을 나타내는 임계값을 지정한다.
• high: 높은 수준을 나타내는 임계값을 지정한다.
• optimum: 최적의 수준을 나타내는 임계값을 지정한다.

예시로, <meter> 요소를 사용하여 스칼라 값과 범위를 표시할 수 있다:

<meter value="70" min="0" max="100" low="30" high="80" optimum="90"></meter>

위의 코드는 값이 70이고, 범위가 0부터 100까지이며, 낮은 수준은 30, 높은 수준은 80, 최적의 수준은 90으로 지정된 <meter> 요소를 생성한다. 브라우저는 이를 시각적으로 표시하여 해당 값을 범위 내에서 어떻게 평가할 수 있는지 나타낼 수 있다.(출처: chatGPT)