새 제목: 순수 CSS 및 HTML을 사용한 압축 HTML 매트릭스 레이아웃 디자인

Question

순수한 HTML과 CSS를 사용하여 로고를 만들려고 합니다. 디자인은 매우 직관적이며 일부 색상 항목을 포함하는 [13x13] 매트릭스입니다.

CSS는 매우 간단하고 사소합니다. 그러나 HTML 코드에는 반복되는 부분이 많아 DRY(Don't Repeat Yourself) 코드가 필요합니다.

으아악 으아악

저는 <f/>代替<f></f>를 사용해 보았지만 성공하지 못했습니다.

이 코드를 줄일 수 있는 방법이 있나요?

참고: 색상은 동일하게 유지되어야 합니다.

Answer 1

javascript를 사용할 수 있는 경우 셀 유형을 문자열 개체로 연결하고 이를 사용하여 동적으로 플래그를 작성할 수 있습니다. 샘플 코드는 다음과 같습니다.

으아악 으아악 으아악

HTML/CSS의 필요성과 @Temani Afif의 의견을 바탕으로 다음은 SVG 솔루션입니다.

으아악 으아악