1) 태그 정의 요약 빈칸 채우기
1. 제목(heading) 태그는 문서 내에서 제목을 표현할 때 사용하는 태그입니다. 보통 <h> 로 줄여서 쓰며
레벨에 따라서 숫자가 붙습니다.
2. 단락(paragraph) 태그는 본문에 해당되는 내용을 감쌀 때 사용합니다. 줄여서 <p>로 씁니다.
본문 내에서 개행을 하려면 <br> 태그를 사용해야 합니다. 개행 태그br은 영어단어 linebreak에서
차용되었습니다.
3. 글자를 굵게 표현할 때는 <b> 태그, 글자를 이탤릭체로 표현할 땐 <i> 태그, 글자에 밑줄을 쳐주고
싶을 땐 <u> 태그를 사용하고, 글자에 중간선을 표시하고 싶을 때는 <s> 태그를 사용합니다.
각 태그는 순서대로 영단어 bold, italic, underline, strike 에서 이름을 차용하였습니다.
4. 앵커(anchor) 태그를 사용하면 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을
이동할 수 있습니다. 줄여서 <a> 로 씁니다. 주요 속성엔 target이 있는데, 이 속성을
이용하면 링크된 리소스를 어디에 표시할지 지정할 수 있습니다.
5. <div> 태그와 <span> 태그는 의미가 없는 컨테이너 요소를 만들 때 사용합니다. 실제 개발할 때
사용 빈도가 매우 높은 태그들입니다.
6. 순서가 없는 리스트를 표현할 땐 ul(unordered list) 태그를, 순서가 있는 리스트를 표현할 땐
ol(ordered list) 태그를 사용합니다. 또 다른 리스트 관련 태그론 dl(definition/description list)
태그가 있는데, 이 태그는 용어(<dt> 태그로 표현)와 설명(<dd> 태그로 표현)을 하나의 세트로 묶어
항목으로 만들고 하나 이상의 항목으로 리스트를 구성할 때 사용합니다.
2) 태그 설명 빈칸 채우기
1. <img> 는 문서에 이미지를 삽입할 때 사용하는 태그로, 닫는 태그가 없는 빈 태그입니다.
필수 속성으론 이미지 경로를 나타내는 src 가 있습니다.
2. 이미지 태그를 사용할 땐 이미지를 대체하는 글을 alt 속성에 추가해줘야 웹 접근성 측면에서 좋습니다.
3. 개발 할 땐 다른 경로에 있는 파일을 참조하여 작업을 해야 하는 경우가 많습니다. 이럴 때 현재 작업 중인
파일을 기준으로 참조하고자 하는 파일의 상대 경로를 나타내는 상대경로 개념을 사용해 해당 파일을 참조할
수 있고, 실제 파일이 위치한 곳을 기준으로 해당 파일의 위치를 나타내는 절대경로 개념을 사용해 파일을
참조할 수 있습니다. 상대경로에서 ./ 는 실제 그 파일이 위치한 폴더를 나타내고, ../ 는 상위 폴더를 나타냅니다.
4. 표를 그릴 땐 <table> 태그를 사용합니다. 표 태그는 하나 이상의 <tr> 태그(행을 나타내는 태그)로
이루어져 있습니다. 셀을 나타내는 태그론 제목 셀을 나타내는 <th> 태그, 셀을 나타내는 <td> 태그가 있습니다.
5. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다.
3) index.html 파일에 태그 작성
미국 국립 보건원에 따른 콜레스테롤 검사의 정당방위는 다음과 같다.
아래 이미지와 유사한 표 직접 만들기
테이블 관련 태그만 사용
(스타일 꾸미는 방법 아직 배우지 않았음)
최종 결과물 : 아래 이미지와 유사
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>콜레스테롤 검사의 정상범위</title>
<!--테이블 스타일 설정-->
<style media="screen">
th, td {border: 1px solid; width: 50; height: 30px}
.top { caption-side: top;}
</style>
<!--.top : caption 위치 설정 (맨 위로 설정)
<-> .(변수 설정) {caption-side: bottom;} : caption 위치 맨 밑으로 설정-->
</head>
<body>
<!--<table> : 표 태그-->
<table width ="600" height="30"> <!--table 넓이, 높이 설정-->
<caption class="top">콜레스테롤 검사의 정상범위</caption> <!--테이블 제목-->
<thead> <!--header content들을 하나의 그룹으로 묶을 때 사용
#테이블의 각 영역(header, body, footer) 명시 위해 <tbody>, <tfoot> 요소와 함께 사용됨-->
<tr> <!--행 태그-->
<!--<th> : 제목 셀 태그-->
<th rowspan="2" width ="115">검사항목</th> <!--행 병합-->
<th colspan="4">양호 <--------------> 높음</th> <!--colspan : 열 병합-->
</tr>
</thead>
<tbody> <!--표 내용-->
<tr>
<td rowspan="2">콜레스테롤</td> <!--<td> : 셀 태그-->
<td colspan="2">정상</td>
<td>경계</td>
<td>높음</td>
</tr>
<tr>
<td colspan="2"><200</td>
<td>200~239</td>
<td>>=240</td>
</tr>
<tr>
<td rowspan="2">중성지방</td>
<td colspan="2">정상</td>
<td>경계</td>
<td>높음</td>
</tr>
<tr>
<td colspan="2"><150</td>
<td>150~199</td>
<td>200~499</td>
</tr>
<tr>
<td rowspan="2">LDL콜레스테롤</td>
<td width="100">양호</td>
<td width="115">높은정상</td>
<td>경계</td>
<td>높음</td>
</tr>
<tr>
<td><100</td>
<td>100~129</td>
<td>130~159</td>
<td>160~189</td>
</tr>
<tr>
<td rowspan="2">HDL콜레스테롤</td>
<td colspan="2">높음</td>
<td>-</td>
<td>낮음</td>
</tr>
<tr>
<td colspan="2"><60</td>
<td>-</td>
<td><40</td>
</tr>
</tbody>
</table>
</body>
</html>
4) 네이버 로그인 페이지 중 어떤 form 요소 사용해 만들었는지 서술
폼 요소가 사용되는 대표적인 페이지는 로그인 페이지입니다. 로그인 페이지엔 아이디, 비밀번호, 로그인 상태 유지, 로그인 버튼 등이 들어가죠. 네이버 로그인 페이지에선 어떤 form 요소를 사용해 로그인 페이지를 만들었는지 예시를 참고해 서술해보도록 합시다.
(ex)
1. 아이디 입력란
input 태그를 사용해 아이디를 입력받습니다.
아이디는 일반적으로 일반 텍스트인 경우가 많기 때문에 type 속성은 text입니다.
placeholder 속성을 사용해 인풋 박스가 아이디를 입력하는 공간이란걸 표시해주고 있습니다.
<form id="frmNIDLogin" name="frmNIDLogin" target="_top" autocomplete="off" action="https://nid.naver.com/nidlogin.login" method="POST">
...
<!--1. 아이디 입력란-->
<div class="input_row" id="id_line">
<div class="icon_cell" id="id_cell">
<span class="icon_id">
<span class="blind">아이디</span>
</span>
</div>
<input type="text" id="id" name="id" placeholder="아이디" title="아이디" class="input_text" maxlength="41" value="">
<span role="button" class="btn_delete" id="id_clear" style="display: none;">
<span class="icon_delete">
<span class="blind">삭제</span>
</span>
</span>
</div>
<!--2. 비밀번호 입력란-->
<div class="input_row" id="pw_line">
<div class="icon_cell" id="pw_cell">
<span class="icon_pw">
<span class="blind">비밀번호</span>
</span>
</div>
<input type="password" id="pw" name="pw" placeholder="비밀번호" title="비밀번호" class="input_text" maxlength="16">
<span role="button" class="btn_delete" id="pw_clear" style="display: none;">
<span class="icon_delete">
<span class="blind">삭제</span>
</span>
</span>
</div>
</div>
<!--3. 로그인 상태 유지 체크란-->
<div class="login_keep_wrap" id="login_keep_wrap">
<div class="keep_check">
<input type="checkbox" id="keep" name="nvlong" class="input_keep" value="off">
<label for="keep" class="keep_text">로그인 상태 유지</label>
</div>
<!--4. IP보안 체크란-->
<div class="ip_check">
<a href="/login/ext/help_ip3.html" target="_blank" id="ipguide" title="IP보안"><span class="ip_text">IP보안</span></a>
<span class="switch">
<input type="checkbox" id="switch" class="switch_checkbox" value="off">
<label for="switch" class="switch_btn">
<span class="blind" id="switch_blind">on</span>
</label>
</span>
</div>
</div>
...
1. 아이디 입력란
input 태그 이용해 아이디 입력 받음.
아이디 입력 시 문자, 숫자 등의 텍스트 형식이기 때문에 type="text".
placehorder 속성을 사용해 "아이디" 미리보기로 해당 입력란이 아이디 입력란임을 알 수 있게 해주었음.
name 이용해 form의 컨트롤 요소 값(value)를 서버로 전송하게끔 하였음.
maxlength 사용해 text 최대 41길이까지 입력할 수 있게끔 설정.
value 사용해 초기값 명시.
span 내 role=button 설정해주어 버튼 컨트롤로 사용된다는 것을 스크린 리더에 인식.
<input> : 아이디 입력받음
type="text" : 유저는 영문과 숫자 등의 text 형식으로 id 입력해야 함
id : 고유 식별 목적 경우 사용
name : form 컨트롤 요소 값(value)을 서버로 전송하기 위함
class : css 쿼리문 밑 재사용 목적으로 사용
placehorder : input 박스 안에 text 적을 수 있다는 뜻, 초기 미리보기 글자 설정
title : 아이디 입력하는 칸을 지칭하는 제목 개념
maxlength : 글자 입력 길이 41까지
value : <input> 요소의 초기값(value) 명시
<span> : inline level
role=button: span, (+p, div)에서도 버튼 컨트롤로 사용된다는 것을 스크린리더에 인식시킬 수 있음
-> role : 특정 요소에 역할정의, 사용자에게 정보제공, 부여한 역할 동적변경 불가
: 이미지에 버튼 클릭 이벤트 주기, 좀 더 세세하고 다양한 설정 위함
: role 사용해서 해당 요소들의 역할 명시
: role 역할 볼 수 있는 사이트 (https://www.w3.org/TR/wai-aria/#roles_categorization)
-> WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) : W3C에서 정의한 기술
: 웹 접근성(시각장애인들 웹 페이지 원활 이용 위한 가이드라인)을 위해 지원되는 여러 가지 특성들
: 일반 사용자가 보기에 정상 화면은 HTML 요소에 따라 스크린 리더 등 보조기기에서 제대로 읽히지 않을 수 있음
: WAI-ARIA는 이를 개선하기 위해 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보 추가 가능
class : 1) icon_delete : 삭제 아이콘
2) blind : 화면에서 보이지 않게 하는 방법 (스크린 리더로는 인식 가능하도록)
2. 비밀번호 입력란
input 태그 이용해 비밀번호 입력받음.
비밀번호 입력 시 문자, 숫자 등의 텍스트 형식이기 때문에 type="text".
placehorder 속성을 사용해 "비밀번호" 미리보기로 해당 입력란이 PW 입력란임을 알 수 있게 해주었음.
name 이용해 form의 컨트롤 요소 값(value)를 서버로 전송하게끔 하였음.
maxlength 사용해 text 최대 16길이까지 입력할 수 있게끔 설정.
<input> : 비밀번호 입력받음
type="text" : 유저는 영문과 숫자 등의 text 형식으로 pw 입력해야 함
id : 고유 식별 목적 경우 사용
name : form 컨트롤 요소 값(value)을 서버로 전송하기 위함
class : css 쿼리문 밑 재사용 목적으로 사용
placehorder : input 박스 안에 text 적을 수 있다는 뜻, 초기 미리보기 글자 설정
title : 비밀번호 입력하는 칸을 지칭하는 제목 개념
maxlength : 글자 입력 길이 16까지
class : 1) icon_delete : 삭제 아이콘
2) blind : 화면에서 보이지 않게 하는 방법 (스크린 리더로는 인식 가능하도록)
3. 로그인 상태 유지 버튼
선택 가능한 checkbox type으로 설정.
name 이용해 form의 컨트롤 요소 값(value)를 서버로 전송하게끔 하였음.
value="off"를 보아, 로그인 상태 유지를 기본으로 꺼두고 선택시에만 상태 유지하도록 설정.
label 태그와 for 속성(for = "keep")을 사용하여 위 input 태그 안 id="keep"와 연결 되게 하였음.
type="checkbox" : checkbox 형식 (선택할 수 있게)
name : form 컨트롤 요소 값(value)을 서버로 전송하기 위함
<label> : 폼 컨트롤과 연결 시켜주기 위함
label - for 속성 : keep, 위 checkbox의 input 태그 안 id="keep" 체크 요소와 연결 되게 하였음
value="off" : 로그인 상태 유지를 기본으로 off시켜 선택시에만 상태 유지하도록 설정
4. IP보안 버튼
anchor <a> 태그 사용하여 링크 생성을 하였다. (IP보안 설명문 링크).
href 속성을 사용하여 "IP보안" 클릭 시 IP보안 설명문으로 이동하게끔 링크 설정.
target="_blank" 사용하여 새 윈도우 창 열어서 웹페이지 열기. 기존 창 그대로 남겨짐.
value="off"를 보아, IP보안을 기본으로 꺼두고 선택시에만 상태 유지하도록 설정.
label 태그와 for 속성(for = "switch")을 사용하여 위 input 태그 안 id="switch"와 연결 되게 하였음.
<a> : 링크 생성 태그, 클릭하면 해당 링크로 이동한다. href(링크 목적지 URL)기재 속성 사용.
href : "IP보안" 클릭 시 IP보안 설명문으로 이동하게끔 링크 설정.
target="_blank" : 새 윈도우 창 열어서 웹페이지 열기. 기존 창 그대로 남겨짐.
value="off"를 보아, IP보안을 기본으로 꺼두고 선택시에만 상태 유지하도록 설정.
label 태그와 for 속성(for = "switch")을 사용하여 위 input 태그 안 id="switch"와 연결 되게 하였음.
5. 로그인 버튼
button 요소 사용하여 사용자가 클릭 가능한 버튼 생성, 빈태그가 아니며, <input type="button">과 같은 기능을
하지만 스타일적 측면에서 더 자유롭고 기능적인 면에서 조금 더 좋다.
type="submit"를 이용하여 제출 버튼 생성, 기본값은 제출이지만 '로그인'으로 값 변경하였음. ('로그인'으로 나타남)
유저가 로그인 버튼 클릭 시 입력한 ID/PW 값을 상단 form action에 기재된 사이트로 전달.
상단 form method="post"값으로, 유저가 입력한 값이 주소창에 나타나지 않게끔 처리.
<button> : 사용자가 클릭 가능한 버튼 생성. 빈태그 x, input type="button"과 같은 기능을 하지만
스타일적 측면에서 더 자유롭고 기능적인 면에서 조금 더 좋음.
type="submit" : 제출 버튼, 기본값은 제출이지만 로그인으로 값 변경하였음.
유저가 로그인 버튼 클릭 시 입력한 ID/PW 값을 상단 form action에 기재된 사이트로 전달.
상단 form method="post"값으로, 유저가 입력한 값이 주소창에 나타나지 않게끔 처리.
미션 3에서 우리팀(서니 3팀)이 우수 미션으로 소개되었다 !
다음엔 다른 미션에서도 우수 미션으로 소개될 만큼 열심히 해야겠다.
자세히 설명하고 그 외 관련있는 속성/개념을 찾아보거나,
이리저리 고민하는 흔적들이 있거나,
아직 배우지 않은 것도 미션을 위해 선행학습 후 이리저리 시도해보는 열정이 있는 사람들이 굉장히 많았다.
생각보다 이 사람들.. 너무 열심히 하는데 비전공자가 아닌 것 같다 ...
'[Language] > VIEW' 카테고리의 다른 글
| CSS 이해하기 (0) | 2022.05.22 |
|---|---|
| 콘텐츠모델, 시멘틱마크업,블록 & 인라인 (0) | 2022.05.17 |
| HTML 태그 (0) | 2022.05.15 |
| [부스트코스] html 이해하기 / 1주차 미션 (0) | 2022.05.09 |
| HTML 이해하기 (0) | 2022.05.09 |
