3장
1분 퀴즈
1. ①, ④
해설_ hn 태그는 h1 태그부터 h6 태그까지 모두 사용하지 않아도 되지만, 반드시 h1 태그부터 단계적으로 사용해야 합니다.
2. 블록, 인라인, 인라인
3. ul, ol, dl, ul, li, ol, li, dl, dt, dd
해설_ 비순서형 목록은 ul 태그, 순서형 목록은 ol 태그, 정의형 목록은 dl 태그로 생성합니다. 그리고 목록 내용을 생성할 때 ul 태그와 ol 태그는 li 태그로, dl 태그는 dt 태그와 dd 태그를 사용합니다.
4. "https://www.naver.com", "_blank", src, alt
해설_ a 태그의 href 속성에는 링크 대상 경로를 작성하므로 "https://www.naver.com"이라고 적습니다. 그리고 target 속성값으로 _blank를 적으면 링크가 새 창에서 열리게 됩니다. img 태그에는 src 속성으로 이미지 경로를 입력하고, alt 속성으로 이미지 설명을 넣습니다.
5. ②
해설_ input 태그는 한 줄짜리 입력 요소를 생성할 뿐만 아니라 type 속성값에 button, checkbox, radio 등을 넣으면 버튼이나 체크박스, 라디오버튼 요소도 만들 수 있습니다.
6. ②
해설_ table 태그는 표의 틀만 생성합니다. 행은 tr 태그로, 열은 th 태그와 td 태그로 생성합니다. thead, tfoot, tbody 태그는 행을 그룹지을 때 사용합니다.
7. ②, ③
해설_ div 태그와 span 태그는 HTML의 대표적인 논 시맨틱 태그입니다. p 태그도 단순하게 텍스트를 작성할 때 사용하는 논 시맨틱 태그입니다.
셀프체크
1. 해설에 부분별 코드가 나와 있으므로 전체 코드를 따로 표기하지 않았습니다. 전체 코드는 예제 파일 03/selfcheck/postit/end/index.html에서 확인할 수 있습니다.
① 포스트잇 요소를 그룹 짓기 위해 div 태그를 사용합니다.
<div></div>
② 제목이나 주제 성격의 텍스트는 hn 태그를 사용합니다.
<div>
<h1>To. 남편</h1>
</div>
③ 문단을 구성하는 텍스트에는 p 태그를 사용하고, 문단에서 줄 바꿈이 필요하면 br 태그를 사용합니다.
<div>
<h1>To. 남편</h1>
<p>
여보~ 오늘 급하게 먼저 출근해야 해서<br>
인사도 못 하고 먼저 나가요~
</p>
<p>
아침 굶지 말고 냉장고에 있는 반찬<br>
전자레인지에 데워서 챙겨 먹고 나가요~!
</p>
<p>
그럼 오늘 하루도 힘내고 이따 저녁에 봐요~<br>
화이팅~!
</p>
</div>
2. 해설에 부분별 코드가 나와 있으므로 전체 코드를 따로 표기하지 않았습니다. 전체 코드는 예제 파일 03/selfcheck/login/end/index.html에서 확인할 수 있습니다.
① 폼 관련 요소는 form 태그 안에 작성합니다.
<form action="#">...</form>
② fieldset 태그로 관련 있는 폼 요소를 그룹화하고, legend 태그로 그룹명을 지정할 수 있습니다.
<fieldset>
<legend>소셜 로그인</legend>
(중략)
</fieldset>
<fieldset>
<legend>일반 로그인</legend>
(중략)
</fieldset>
③ 소셜 로그인은 버튼 요소입니다. 따라서 button 태그로 작성하되 type 속성값을 button으로 지정합니다.
<button type="button">
<img src="google.png" alt="구글 로고">
Log in with Google
</button>
④ 일반 로그인은 이메일과 비밀번호를 사용자가 직접 입력해야 해서 type 속성값이 text와 password인 입력 요소를 input 태그로 작성합니다. 이때 웹 접근성을 고려해 label 태그도 같이 사용합니다.
<label for="username">
<input type="text" id="username" name="username" placeholder="Username">
</label>
<label for="password">
<input type="password" id="password" name="password" placeholder="Password">
</label>
<button type="submit">
Login
</button>
⑤ ‘or’는 단순 텍스트이므로 p 태그로 작성하고, ‘Forgot your password?’는 비밀번호 찾기 페이지로 이동해야 하므로 a 태그로 링크를 생성합니다.
<p>or</p>
(중략)
<a href="#">Forgot your password?</a>
3. 해설에 부분별 코드가 나와 있으므로 전체 코드를 따로 표기하지 않았습니다. 전체 코드는 예제 파일 03/selfcheck/wiki/end/index.html에서 확인할 수 있습니다.
① 목차의 요소 전체를 그룹 짓기 위해 div 태그를 사용합니다.
<div>
</div>
② 목차는 순서형 목록이어서 ol 태그로 목록을 생성하고, li 태그로 목록 내용을 구성합니다.
<div>
<ol>
<li>
</li>
</ol>
</div>
③ 목록 내용을 클릭하면 목차에 해당하는 문서로 연결되어야 하므로 a 태그를 사용해 링크를 작성합니다.
<li>
<a href="#">역사</a>
</li>
④ 목차 안에 목차, 즉 중첩되는 목록은 li 태그 안에 다시 작성합니다.
<li>
<a href="#">역사</a>
<ol>
<li>
<a href="#">개발</a>
</li>
</ol>
</li>
⑤ 나머지 코드도 같은 방식으로 작성합니다.