Mr.코딩
2023. 7. 22. 16:48
1. 일단 header 섹션을 생성한 다음 그 안에 말하는나무 로고를 넣음.
<body>
<header>
<section id="logo">
<img src="malhannamu.png" alt="말하는나무 로고" />
</section>
</header>
</body>
Q. 로고 이미지는 header 섹션 안에 있는 게 맞나? (의미론적으로?)
Bard
네, 아래 코드의 로고 이미지는 header 섹션 안에 있는 것이 맞습니다. HTML5에서 header 태그는 웹 페이지의 머리글을 나타내는 태그입니다. 따라서, 로고 이미지는 웹 페이지의 머리글에 속하는 것으로 볼 수 있습니다.
2. 생성된 헤더 섹션이 잘 보이게 회색 테두리를 넣고, 헤더 이미지가 헤더 섹션에 딱 맞도록 사이즈를 설정함.
<style>
/* 잘보이게 헤더에 테두리를 넣음.브라우저 뷰포트 사이즈의 5% 크기로 하되 vw 단위를 써서 비율이 유지되게끔 만듦*/
header {
border: 1px solid gray;
width: 5vw;
height: 5vw;
}
/*header 사이즈 안에 이미지가 딱 맞게 갇히도록 함*/
header img {
max-width: 100%;
max-height: 100%;
}
</style>
Q. id 식별자명을 내 마음대로 'logo'라고 썼는데, 별 상관 없지?
네, 아래 코드에서 id 식별자명을 내 마음대로 logo라고 썼는데, 별 상관 없습니다. id 식별자명은 HTML 요소를 식별하는 데 사용되는 고유한 이름입니다. 따라서, 의미가 있는 이름을 사용하면 좋지만, 별다른 규칙은 없습니다.
다만, id 식별자명은 다음과 같은 규칙을 지켜야 합니다.
- 영숫자와 밑줄('_')로만 이루어져야 합니다.
- 공백을 포함해서는 안 됩니다.
- 시작 문자는 영숫자여야 합니다.
- 길이는 32자를 넘지 않아야 합니다.
id 식별자명을 지정할 때는 의미 있는 이름을 사용하는 것이 좋습니다. 예를 들어, 로고 이미지의 id 식별자명은 logo 또는logo-image 로 지정하는 것이 좋습니다. 이렇게 하면 로고 이미지를 쉽게 식별할 수 있습니다.