HTML 공부자료

img 태그 - 속성

src	원본파일 경로	절대경로 또는 상대경로
alt	대체 텍스트	스크린 리더, 원본파일 무효시
title	툴팁	alt의 대체제나 반복이 되어서는 안됨
width	너비	픽셀 단위의 정수
height	높이	픽셀 단위의 정수

관련 문서

form 태그

• 사용자 정보를 입력하는 공간의 큰 틀을 만들기 위해 사용

• form 을 사용해서 그룹 안의 입력된 값들을 한 번에 전송하여 로직 처리 가능
  
  
  

form 태그 속성

• action = 폼을 전송할 서버 쪽 스크립트 파일을 지정 (data를 보낼 경로 지정)

• name = form을 식별하기 위한 이름을 지정

• accept-charset = 폼 전송에 사용할 문자 인코딩을 지정

• target = action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

• method = 폼을 서버에 전송할 http 메소드를 정함 ( GET or POST )

form 사용 예시

  <form action="/new" method="post">
            <div class="form-group">
                <label for="name">제목</label>
                <input type="text" id="name">
            </div>
            <button type="submit"> 등록 </button>
        </form>

input 의 유형

• input의 type에는 text, password, radio 등 다양한 속성이 있음
  
  관련 MDN Docs

meter 태그

• 어떤 특정한 수준에 대한 현 상태를 표현할 때 주로 meter 태그를 사용 (ex. 디스크 잔여 공간 표시)

• optimum 값이 기준이 되어, meter 의 value 가 해당 optimum 값과 근사치일수록 최적의 상태로 인식 (색 변화)

• meter 는 특정 상태를 표시하기 위한 용도로 사용하며, 진행상태를 나타낼 때는 progress 태그를 사용
  
  관련 MDN 문서

progress 태그

• meter 태그와 비슷하게 상태를 표시하기 위해 사용하는 태그, 하지만 progress 는 진행정도를 나타내기 위해 주로 사용

• 기본적으로 min, max 속성값을 부여할 수 있고, value값은 이 min, max를 기준으로 상태바의 정도가 표시 됨
  
  관련 MDN 문서

label 태그

• form 태그내의 요소에 이름표(label)를 붙이기 위해 사용하는 태그

• 스크린 리더는 시각 장애가 있는 개인을 위해 웹 페이지의 내용을 소리내어 읽어 주는 보조 기술로, 리더기는 label 태그를 인식하여 활용 가능, 즉 사용자 경험 측면에서 label 태그를 사용하여 더 유용한 경험을 제공 가능

• label 태그를 사용하면 선택 범위를 확장할 수 있음
  ex. 기존의 input은 해당 input 태그를 선택해야만 focus 되지만, label에 감싸져 있을 경우 해당 label을 클릭해도 input에 foucs 됨

label 사용법

• 암시적 작성방법

<label>
	form 요소의 이름
	<input/>
</label>

• 명시적 작성방법

<label for=“id1”>폼 요소 이름</label>
<input id=“id1”>

-오래된 통신 기기는 암시적이 지원되지 않아 일반적으로는 명시적으로 작성
-radio, checkbox 같은 타입형식의 경우 암시적으로 작성하는 편