[오딘프로젝트] Intermediate HTML Concepts

박먼지·2023년 8월 20일
0

오딘 프로젝트

목록 보기
1/5
post-thumbnail

Emmet

왜 Emmet을 사용해야 합니까?

Emmet은 VS Code에 내장된 플러그인으로, 단축키를 통해 HTML 및 CSS를 효율적으로 작성할 수 있습니다.

유용한 Emmet 약어는 무엇입니까?

! HTML 상용구

이 요소를 만드는 데 어떤 구문을 사용하시겠습니까 <p class="text"></p>?

p.text

내부에 자식 요소가 있는 요소로 확장되는 구문은 무엇입니까? 예를 들어:<div><p></p></div>

div>p

동일한 클래스 이름을 가진 세 개의 요소를 만들려면 어떤 구문을 사용해야 합니까?

div.text*3

SVG

SVG(Scalable Vector Graphics)는 확장 가능한 이미지 형식으로, 파일 크기를 늘리지 않고 쉽게 확장하고 화질을 유지할 수 있습니다.

xmlns속성은 무엇입니까?

XML 네임 스페이스를 말합니다. 사용중인 XML 언어를 지정합니다.

SVG를 사용하고 싶지 않은 상황은 무엇입니까?

복잡하고 사실적인 이미지나 그런지 텍스처 같은 경우 SVG는 적합하지 않습니다.

SVG를 '인라인'으로 하면 어떤 장단점이 있습니까?

CSS 또는 Javascript를 통해 동적으로 이미지를 변경할 수 있습니다.

Tables

테이블은 무엇입니까?

테이블은 행과 열로 구성된 구조화된 데이터 집합입니다.

페이지 레이아웃에 HTML 테이블을 사용하는 것이 왜 나쁩니까?

  1. 레이아웃 테이블은 시각장애인의 접근성을 낮춥니다.
  2. 자동으로 반응하지 않습니다.
  3. 복잡한 마크업 구조를 만들어 코드 작성이 더 어려워 질 수 있습니다.

caption 요소는 무엇에 유용합니까?

<table>
  <caption>
    Dinosaurs in the Jurassic period
  </caption>
  ...
</table>

캡션은 테이블 내용에 대한 설명을 포함하기 위한 것으로 시각 장애인에게 유용합니다.

scope 속성은 무엇입니까?

<th scope='col | row | colgroup | rowgroup'>

해당 헤더 셀이 관련되는 셀의 종류를 명시합니다.

profile
개발괴발

0개의 댓글