[Chapter 4-3] HTML5 공부 7일차!(2021-07-05)

HTML 공부를 시작한 지 일주일이 되는 날이다. 방학이라 그런지 공부에 집중하기가 어려워지는 것 같다.

오늘은 chapter 4의 뒷부분과 연습문제를 풀려고 한다.

 

어김없이 오늘도 새로운 태그들이 등장한다.

<label class="reg" for ="class">학과</label>
        <select size="5" id="class" multiple>
            <optgroup label ="공학대학">
                <option value="archi">건축공학과</option>
                <option value="mechanic">기계공학과</option>
                <option value="indust">산업공학과</option>
                <option value="elec">전기전자 공학과</option>
                <option value="computer" selected>컴퓨터공학과</option>
                <option value="chemical">화학공학과</option>
            </optgroup>
            <optgroup label ="인문대학">
                <option value="history">역사학과</option>
                <option value="lang">어문학부</option>
                <option value="philo">철학</option>
            </optgroup>
        </select>

• <select> = 드롭다운 목록의 시작과 끝을 표시 (size 화면에 표시될 항목 개수 , multiple 드롭다운 메뉴에 있는 ctrl+ 여러 항목을 선택할 수 있다)
• <option> = 원하는 항목들을 추가 (value를 이용해 서버로 넘겨주기 위한 값을 지정 selected 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정)
• <optgroup> = 드롭다운 목록들을 분류하는 태그 (label 분류하는 목록들의 제목)
• <datalist> = 텍스트 필드와 함께 사용하기 때문에 <input> 태그를 함께 사용한다. 

<textarea name="intro" cols="60" rows= "5">
오늘은 여러가지 태그들을 배우게 되었다
</textarea>

• <textarea> = 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말한다. 주로 회원가입 양식에서 사용자 약관을 표시할 때 사용한다 (name 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정 , cols 텍스트 영역의 가로나비를 문자 단위로 지정 , rows 텍스트 영역의 세로 길이를 줄 단위로 지정)

기타 태그들

• <button> = 기본 타입은 submit이고 reset , button으로 사용한다.

 <form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
       <input type="number" name="num1" value="0">
       +<input type="number" name="num2" value="0">
       =<output name="result" for="num"></output>
</form>

• <output> = output으로 묶인 부분은 일반 텍스트가 아니라 계산 결과 값이라는 점을 웹 브라우저가 인식한다.
• <progress> = 작업 진행 상태를 표시 (value 작업 진행 상태를 부동 소수점까지 표현 , max 작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현하고 0보다 커야 한다)
• <meter> = progress 태그를 사용했을 때와 결과 화면이 거의 같기 때문에 혼동되지만 meter는 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용(min 범위의 최솟값 미지정시 0 , max 범위의 최댓값 미지정시 1 , value 범위 내에서 차지하는 값 , low "이 정도면 낮다"라고 할 정도의 값을 지정 , high "이 정도면 높다"라고 할 정도의 값을 지정 , optimum "이 정도면 적당하다"라고 할 정도의 범위를 지정하고 optimum값이 high값보다 크면 value값이 클수록 좋고 optimum값이 low값보다 작다면 value값이 작을수록 좋다)

Chapter 4를 모두 끝마치게 되었다. 태그들이 너무 많아서 머릿속에 혼동이 된다.ㅎ;;

지금까지 남긴 글에서도 하던 말이지만 연습을 계속하면 익숙해질 것이다.

다음은 Chapter 4 연습문제를 풀어서 올릴 예정이다. 쉬운 문제도 있고 어려운 문제도 있겠지만 힘내야겠다!!