Logo 컴포넌트 만들기

로고 컴포넌트 만들 때 <img> 또는 <svg> 태그 밖에 특정 링크로 이동이 가능한 <anchor> 태그를 감싸주게 된다.

이 때 <anchor> 태그 class="logo”에 display: block; 를 주는 이유는 무엇일까?

<a href="/" class="logo">
	<svg>
	</svg>
</a>

/* 로고 컴포넌트 (img 요소) */
.logo {
  --size: 14.375rem;

  display: block;
  width: var(--size, 14.375rem);
  inline-size: var(--size, 14.375rem);
}

/* 로고 컴포넌트 (svg 요소) */
.logo {
  svg {
    display: block;
    width: 100%;
    inline-size: 100%;
    height: auto;
    block-size: auto;
  }
}

반응형 디지인 이라고 함은, 기본적으로 자식요소가 부모 크기에 따라 늘었다 줄었다 하는 특징이다.

modern-reset에 img태그 속성으로 max-width: 100%가 있다.
즉, 자식요소에 백분율을 가지게 하고 부모가 크기를 갖게 함으로써 부모 높이에 맞춰 늘어났다 줄어들었다 하는 반응형을 만들기 위해 추가된 코드이다.

그리고 max를 지정한 이유는 대부분의 이미지가 비트맵 그래픽 형식으로 원본 크기보다 커지면 깨지는 특성이 있고,<img>태그가 기본적으로 이미지의 원본 크기로 표시되려는 특성 때문에 원본 크기보다 커지지 않도록 세팅하는 것이다.

여기서 부모가 크기를 가지려면 block 속성이어야 한다. 왜냐하면 inline 속성은 가로와 세로 값을 가질 수 없기 때문이다. (image 하단 decender 공백 이슈 포함)

<anchor> 태그는 가로와 세로 값을 지정할 수 없는 인라인 요소이다. (예: <img>, <svg> 모두 inline 요소)

그럼으로 <img>, <svg> 태그를 감싼 <anchor> 태그에는 display: block;을 추가하여 가로, 세로 너비를 지정할 수 있는 블록 속성으로 바꿔줘야 반응형 디자인 패턴을 만들 수 있다.