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 로 지정하는 것이 좋습니다. 이렇게 하면 로고 이미지를 쉽게 식별할 수 있습니다.
'말하는나무 PR. Mahannamu > 맞춤제작 견적서 Customization Quote Request' 카테고리의 다른 글
| 이 코드만으로 14개의 섹션(구역)이 생성된 거지? (0) | 2023.07.23 |
|---|---|
| 오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. (0) | 2023.07.23 |
| 헤더 부분 - 우상단 명령 버튼들 추가 (0) | 2023.07.23 |
| 헤더 부분 - 기본 (0) | 2023.07.23 |
| logo 부분 (2) (0) | 2023.07.22 |
| logo 부분 (0) | 2023.07.22 |
| 이미지(로고) 삽입 (0) | 2023.07.20 |
| 견적서 양식 웹페이지를 만들려고 한다. 어떻게 해야 할까? (0) | 2023.07.16 |