2. 로고 이미지를 삽입함

img 태그로  "말하는나무 로고"를 넣었더니, header 아이템들이 다시 세로로 배열되어 버리는데?

 

chatGTP

header 아이템들이 세로로 배열되는 것은 "말하는나무 로고" 이미지가 header 내부의 다른 요소들과 함께 세로로 정렬되기 때문입니다. 이를 방지하기 위해서 "말하는나무 로고" 이미지에 대한 스타일을 수정해야 합니다.

아래와 같이 "말하는나무 로고" 이미지에 대한 스타일을 추가하면 이미지가 header 내부에서 수직 정렬되지 않고, 다른 아이템들과 가로로 배열될 수 있습니다.

/* 로고 이미지의 스타일 설정 */
.logo-area img {
  max-width: 120px; /* 로고 이미지의 최대 너비를 120px로 제한합니다. */
  height: auto; /* 이미지의 높이를 자동으로 조정하여 가로 세로 비율을 유지합니다. */
  vertical-align: middle; /* 로고 이미지를 수직 가운데 정렬합니다. */
}

이렇게 하면 "말하는나무 로고" 이미지가 다른 아이템들과 가로로 배열되며, header 아이템들이 다시 세로로 배열되는 현상이 해결될 것입니다.

 

안되는데?

 

알고 보니, <img src="" alt="" ... 이렇게만 쓰고 뒤에 />를 안 썼음. (이미지 삽입 문장을 제대로 완료하지 않아서 생기는 문제였음)

 

다시 실행하니, 잘 됨.