form
fieldset
- form 관련 요소들을 묶을 때 사용
- disabled를 사용할 경우 모든 자손 컨트롤을 비활성화함
legend
- 그룹의 제목을 제공
datalist
- <input>태그의 list속성은 <datalist>요소의 id와 일치해야 함
◽ <input>요소와 <datalist>요소가 연결됨
- 사용자에게 기본적으로 선택할 수 있는 옵션을 제공하고, 옵션값에 원하는 값이 없을 경우 사용자가 다른 값을 입력할 수 있도록 함
<form>
<label for="browser">사용하는 브라우저를 선택하세요:</label>
<input list="browsers" id="browser"/>
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Safari"></option>
<option value="Edge"></option>
<option value="IE"></option>
</datalist>
<input type="submit" value="제출" />
</form>- <label>요소의 for속성과 <input>요소의 id속성
- <datalist>요소의 id속성이 모두 같은 값을 사용하게 되면 요소 간의 혼동을 일으켜 자동 완성이 제대로 작동하지 않게 됨
textarea
- 여러 줄의 텍스트를 입력할 수 있는 영역을 만들 때 사용 (ex. 사용자의 피드백, 댓글, 주소)
text의 속성
- cols : 입력창의 너비, 문자의 평균적인 넓이를 기준
- rows : 기본적으로 보여줄 입력 줄 수를 의미
- maxlength : 사용자가 입력할 수 있는 문자 최대 길이
- minlength : 사용자가 입력해야 할 문자 최소 길이
- placeholder : 컨트롤에 무엇을 입력해야 하는지 알려주는 힌트
button 요소
- 사용자가 클릭할 수 있는 요소
- form 내부 뿐만 아니라 버튼이 필요한 곳이라면 어디든지 배치 가능
button 타입
- button : 기본행동 X / JavaScript와 연결하여 사용 / 양식 제출용이 아니라면 button으로 지정
- submit : 서버로 양식 데이터를 제출
- reset : <input type="reset">과 동일하게 초기값으로 되돌림
- disabled : 누르거나 클릭하는 것을 방지 (ex. 필수 입력정보를 다 입력하지 않았을 땐 disabled, 입력한 후 해제 처리)
<input type="button" value="버튼">
<input type="reset" value="초기화">
<input type="submit" value="전송">
<button type="button">버튼</button>
<button type="reset">초기화</button>
<button type="submit">전송</button>
input VS button
- input의 경우 빈 태그 요소이기 때문에 value 특성에 텍스트 값 밖에 지정 X
- button의 경우 여는태그와 닫는태그 사이에 여러 컨텐츠 삽입, 가상 요소 사용가능
<a> VS <button>
| a | button | |
| 역할 | 하이퍼링크 | 사용자의 동작 실행을 위한 트리거 |
| 기능 | 다른 페이지 / 페이지 내의 특정 영역으로 이동 | 브라우저 기본동작 없음 JavaScript를 이용하여 동작 추가 (submit : form 전송 / reset : form 초기화) |
| 키보드 | 엔터 | 스페이스, 엔터 |
| 주의 | href값없이 JavaScript로 동작하게 하면 X | JavaScript로 동작 |
[실습] 폼 요소 연습하기
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form태그 실습</title>
<style>
input {
display: block;
}
</style>
</head>
<body>
<h1>폼 요소 연습하기</h1>
<form action="">
<label for="id">아이디</label>
<input type="text" id="id" />
<label for="password">비밀번호</label>
<input type="password" id="passwrod" placeholder="특수문자 포함필수" />
<label for="birth">생일</label>
<input type="date" id="birth" />
<label for="profileImg">프로필사진</label>
<input type="file" id="profileImg" />
<select name="options" id="">
<option value="skt">SKT</option>
<option value="kt">KT</option>
<option value="lgu">LGU+</option>
</select>
<label for="tel">전화번호</label>
<input type="tel" id="tel" />
<fieldset>
<legend>성별</legend>
<label for="male">남성</label>
<input type="radio" id="male" />
<label for="female">여성</label>
<input type="radio" id="female">
</fieldset>
<fieldset>
<legend>사용 기술</legend>
<label for="">HTML</label>
<input type="checkbox" id="html" />
<label for="">CSS</label>
<input type="checkbox" id="css" />
<label for="">JavaScript</label>
<input type="checkbox" id="js" />
<label for="">Python</label>
<input type="checkbox" id="python" />
<label for="">Django</label>
<input type="checkbox" id="django" />
</fieldset>
<label for="brower">사용하는 브라우저를 선택하세요</label>
<input type="text id="brower" list="browers" />
<datalist id="browers">
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">EDGE</option>
<option value="ie">IE</option>
</datalist>
<input type="reset" value="초기화" />
<input type="submit" value="제출" />
</form>
</body>
</html>[해보기] <form> 로그인 모달 완성하기
CSS 적용 후
CSS 적용 전
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
<title>[해보기] 로그인 모달 완성하기</title>
</head>
<body>
<div>
<header>
<h2>로그인 또는 회원가입</h2>
<button>
<img src="close.png" alt="" />
<span class="sr-only">닫기 버튼</span>
</button>
<section>
<h3 class="sr-only">로그인</h3>
<p>위니브에서 여러분의 궁금증을 해결하세요! :)</p>
<form action="" method="host">
<input type="text" placeholder="아이디" />
<input type="password" placeholder="비밀번호" />
<input type="checkbox" id="checkedlogin" />
<label for="">로그인 상태 유지</label>
<button type="submit">로그인</button>
</form>
<ul>
<li><a href="#">회원가입</a></li>
<li><a href="#">아이디/비밀번호 찾기</a></li>
</ul>
</section>
<span>또는</span>
<section>
<h3 class="sr-only">소셜계정으로 로그인</h3>
<li>
<a href="#">
<img src="Google__G__Logo_1.png alt="" />
<span>구글 계정으로 로그인</span>
</a>
</li>
<li>
<a href="#">
<img src="facebook.png alt="" />
<span>페이스북 계정으로 로그인</span>
</a>
</li>
<li>
<a href="#">
<img src="naver-logo.png alt="" />
<span>네이버 계정으로 로그인</span>
</a>
</li>
<li>
<a href="#">
<img src="message-circle.png alt="" />
<span>카카오톡 계정으로 로그인</span>
</a>
</li>
</section>
</header>
</div>
</body>
</html>그 외 다양한 태그들
정도를 표현하는 태그
<meter>
- 값의 수준을 의미
- 성능, 진행 상황 / 기타 연속적 데이터를 시각적으로 표현하는 데 유용
- 주로 "정량적 값"을 나타내는 데 사용
- 값이 높고 낮음에 따라 색상이 바뀜
속성
- value (필수) : 현재 측정된 값을 지정
- min (선택) : 값의 최소값을 지정 / 기본값 = 0
- max (선택) : 값의 최대값을 지정 / 기본값 = 1
- low (선택) : '낮음' 범위의 임계값을 지정
- high (선택) : '높음' 범위의 임계값을 지정
- optimum (선택) : '이상적' 범위의 임계값을 지정
- form (선택) : <meter> 요소가 속한 폼의 ID를 지정
<meter id="progress" value="70" min="0" max="100">70%</meter>
<meter id="progress" value="30" min="0" max="100">30%</meter>
<progress>
- 작업의 진행 상황을 나타낼 때 사용
- 파일 업로드, 다운로드, 또는 작업의 완료 비율을 나타내는 데 유용
속성
- value (필수) : 현재 진행 상황을 지정
- max (선택) : 작업의 최대값을 지정 / 기본값 = 1
<label for="file">File Upload Progress:</label>
<progress id="file" value="32" max="100">32%</progress>
meter VS progress
용도
- <meter> : 어떠한 변화도 없는 고정된 값의 상태를 나타낼 때 사용
◽ ex) 미세먼지의 수준, 게임 캐릭터 기본 능력치
- <progress> : 진행 상황 및 변화를 나타낼 때 사용
◽ ex) 파일 업로드 진행 상황, 다운로드 진행 상황
속성
- <meter> : low, high, optimum과 같은 속성을 가질 수 있으며, 특정 범위를 정의
- <progress> : value와 max속성만 가짐
<dialog>
- 대화 상자(dialog box)를 쉽게 구현할 수 있게 도와주는 태그
- 기본적으로는 사용자와 상호작용하는 모달 창을 만드는 데 사용
속성
- open
◽ 대화상자가 열려있는 상태를 의미
◽ open속성을 추가하면 대화 상자가 표시되고, 제거하면 숨겨짐
JS 메소드
- show() : 대화 상자를 비모달 상태로 표시
- showModal() : 대화 상자를 모달 상태로 표시
- close() : 대화 상자를 닫음
<template>
- 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용
- 태그 안에서는 렌더링이 불가능 / JavaScript를 통해 클론하영 사용 가능
<details> / <summary>
- 유저의 클릭으로 정보를 보여주고 숨기는 UI 제공
- <details> : 사용자가 클릭하여 내용을 열고 닫을 수 있는 위젯을 만듦
- <summary> : 해당 콘텐츠의 제목을 정의하며, <details>태그의 첫 번째 하위 요소여야 함
<picture>
- 장치나 환경에 따라 각기 다른 버전의 이미지를 표시가능
- 다양한 크기나 포맷의 이미지를 제공
- 사용자의 장치와 화면 해상도에 따라 가장 적합한 이미지 선택가능
- source 태그 / img 태그와 함께 사용
<output>
- 계산 결과나 사용자 동작의 결과를 나타낼 때 사용
- 주로 폼과 함께 사용되어 사용자 입력에 따른 결과를 실시간으로 보여줌
- 접근성을 고려한 태그
- 스크린 리더와 같은 보조 기술이 쉽게 인식
검색엔진 최적화 (SEO)
- Search Engine Optimization의 줄임말로, 한국어로는 검색엔진 최적화로 칭함
- SEO의 중요성
◽ 트래픽 증가 : SEO를 통해 웹사이트의 가시성이 높아지면 더 많은 사용자가 웹사이트에 방문하게 됨
◽ 신뢰성 구축 : 검색 결과 상위에 노출됨으로써 사용자들에게 신뢰를 줄 수 있음
◽ 비용 효율성 : 유료 광고에 비해 장기적으로 더 비용적으로 효율적인 마케팅 전략이 될 수 있음
URL
설정방법
- 언더바(_) 사용금지 / 단어구분은 하이픈(-)으로 사용
◽ ex) lion-resting-on-the-road.png
- URL주소에 포함되는 단어는 최대한 짧지만 해당 페이지를 유추할 수 있는 단어로 구성 (키워드 포함 권장)
- 페이지의 depth의 적정 정도는 2~4 / 6 이하
title 태그
- 용도
◽ 검색 엔진에 페이지의 주제가 무엇인지 알려줌
◽ HTML 문서의 <head>요소 내에 만들어서 페이지의 고유한 제목을 달아줌
- 제목 설정 시 유의 점
◽ 각 페이지에 사용할 고유한 제목
◽ 짧고 간결한 제목 (약 60자를 넘지 말아야 함)
◽ 특수문자 X / 텍스트만 포함
메타 태그
description
- 용도
◽ 페이지가 담고 있는 내용을 요약하여 서술
◽ 검색 엔진 결과 페이지에서 웹페이지의 미리보기 텍스트로 사용
◽ 웹페이지를 클릭하도록 유도하는 광고문구
- 노출되는 예시 페이지
◽ Facebook / Twitter / Discord와 같은 SNS에서 주로 사용
◽ 광범위하게 사용되기 때문에 거의 표준처럼 작동
- 유의점
◽ 너무 많은 키워드를 반복 사용할 경우, 스팸 의심을 받을 수 있음
◽ 약 250자 이하로 작성하기
The Open Graph Protocol
어떠한 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 "og:XXX"가 있는 태그들을 찾아내어 보여주는 프로토콜
마크업
- <img> 태그에 대체 텍스트 작성
- strong, em 등을 사용하여 키워드 강조
- 의미있는 링크 텍스트 작성
robot.txt 파일 작성
- 도메인 / 하위 도메인에서 지정된 파일 경로에 액세스하는 파일을 차단/허용 가능
- 설정하지 않으면 모든 파일은 암시적으로 크롤링 허용
sitemap.xml 파일 작성
- 웹사이트 내 모든 페이지의 목록을 나열
- 검색엔진에게 사이트 내 모든 페이지 목록을 제공
- 크롤링되고 색인될 수 있게 도움을 줌
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240613 CSS-02 (0) | 2024.06.26 |
|---|---|
| [EST] 240612 CSS-01 (0) | 2024.06.26 |
| [EST] 240610 HTML-04 (0) | 2024.06.25 |
| [EST] 240607 HTML-03 (0) | 2024.06.24 |
| [EST] 240605 HTML-02 (0) | 2024.06.24 |
