개발자 노트 - 강경훈 story

HTML CSS/HTML · 2024. 4. 8. fullscreen 넓게보기

여러 데이터 나열해 보여주기

여러 데이터 나열해 보여주기

1. 여러 데이터 나열해 보여주기

<select>, <option>

여러 옵션 중에서 선택 – 드롭다운 목록
공간을 최소한으로 사용하면서 여러 옵션 표시 가능
<select> 태그의 속성

<option> 태그의 속성

<body>
    <h1>여름방학 특강 신청</h1>
    <form>
        <fieldset style="width: 300px;">
            <legend>수강 신청인</legend>
            <ul>
                <li>
                    학번
                    <input type="text" autofocus>
                </li>
                <li>
                    이름
                    <input type="text">
                </li>
                <li>
                    학과
                    <!-- select size : 콤보박스에서 표시되는 행수 -->
                    <!-- multiple : 여러개 선택 가능 -->
                    <select size="3" multiple>
                        <option value="archi">건축공학과</option>
                        <option value="machanic">기계공학과</option>
                        <option value="indust">산업공학과</option>
                        <option value="elec">전기전자공학과</option>
                        <option value="computer" selected>컴퓨터공학과</option>
                        <option value="chemical">화학공학과</option>
                    </select>
                </li>
            </ul>
        </fieldset>
    </form>
</body>

<select>, <optgroup>, <option>

<optgroup> 태그
- 여러 항목을 그룹을 묶을 때 사용
- label 속성을 사용해 그룹 제목을 붙임

<body>
    <h1>여름방학 특강 신청</h1>
    <form>
        <fieldset style="width: 300px;">
            <legend>수강 신청인</legend>
            <ul>
                <li>
                    학번
                    <input type="text" autofocus>
                </li>
                <li>
                    이름
                    <input type="text">
                </li>
                <li>
                    학과
                    <select>
                        <optgroup label="공과대학">
                            <option value="archi">건축공학과</option>
                            <option value="machanic">기계공학과</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>
                </li>
            </ul>
        </fieldset>
    </form>
</body>

<datalist>, <option>

데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨
데이터 목록에 id를 이용해 이름을 붙이고, <input> 태그의 list 속성에 데이터 목록 id를 지정함.
<option> 태그의 속성

<body>
    <h1>여름방학 특강 신청</h1>
    <form>
        <fieldset style="width: 300px;">
            <legend>수강 신청인</legend>
            <ul>
                <li>
                    학번
                    <input type="text" autofocus>
                </li>
                <li>
                    이름
                    <input type="text">
                </li>
                <li>
                    학과
                    <select>
                        <optgroup label="공과대학">
                            <option value="archi">건축공학과</option>
                            <option value="machanic">기계공학과</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>
                </li>
            </ul>
        </fieldset>
        <fieldset style="width: 300px;">
            <legend>수강 과목을 선택하세요</legend>
            <ul>
                <li>
                    관심분야
                    <!-- list, id 추가해야 콤보가 출력되고, 선택하면 value 값이 출력됨 -->
                    <input type="text" list="choices">
                    <datalist id="choices">
                        <option value="grammer" label="문법"></option>
                        <option value="voca" label="어휘"></option>
                        <option value="speaking" label="회화"></option>
                        <option value="listening" label="리스닝"></option>
                        <option value="news" label="뉴스청취"></option>
                    </datalist>
                </li>
            </ul>
        </fieldset>
    </form>
</body>

<textarea>

텍스트 영역 – 여러 줄의 텍스트 입력
게시판의 게시물 입력 창, 회원 가입 양식의 약관 등
<textarea> 태그의 속성

<body>
    <form >
        <fieldset>
            <legend>로그인</legend>
            아이디
            <input type="text" size="10" autofocus>
            비밀번호
            <input type="password" size="10" >
            <input type="submit" value="로그인" >
        </fieldset>
        <fieldset>
            <legend>가입하기</legend>
            <ul>
                <li>
                    아이디<em>*</em>
                    <input type="text" required>
                </li>
                <li>
                    비밀번호<em>*</em>
                    <input type="password" required>
                </li>
                <li>
                    비밀번호확인<em>*</em>
                    <input type="password" required>
                </li>
                <li>
                    이름<em>*</em>
                    <input type="text" required>
                </li>
                <li>
                    메일주소<em>*</em>
                    <input type="text" required>
                </li>
                <li>
                    전화번호
                    <input type="text">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>이지스퍼블리싱</legend>
            <!-- cols="60" : 기본너비보다 크다 -->
            <!-- rows="5" : 세로크기 -->
            <textarea name="intro" cols="60" rows="5">
                열심히 사는 사람들의 손을 잡아주는 곳 - 이지스 퍼블리싱

                우리는 책을 내기 전에 다시 한번 물어봅니다
                우리는 책을 내기 전에 다시 한번 물어봅니다

                우리는 책을 내기 전에 다시 한번 물어봅니다
                우리는 책을 내기 전에 다시 한번 물어봅니다
            </textarea>
        </fieldset>
        <fieldset>
            <input type="submit" value="가입하기">
            <input type="reset" value="다시쓰기">
        </fieldset>
    </form>
</body>

<button>

다양한 형태의 버튼 삽입
CSS를 이용해 원하는 형태로 꾸밀 수 있음

2. 기타 다양한 폼 요소들

<output>

계산 결과를 브라우저에 표시
브라우저 화면에 다르게 표시되는 것은 아니지만 <output> 태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과값이라는 점을 웹 브라우저가 정확히 인식할 수 있습니다.

<body>
    <!-- parseInt : 정수로 변화 -->
    <form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
         <input type="number" name="num1" value="0">
        +<input type="number" name="num2" value="0">
        <!-- =<input name="result"> -->
        <!-- 박스 없이 결과값만 표시 -->
        =<output name="result">
    </form>
</body>

<progress>

작업 진행 상태를 브라우저에 표시
값에는 특별한 단위가 없고 단위를 표시하지도 않음

<body>
    <ul>
        <li>
            10초 남음
            <!-- 전체 60초 중 50초 진행 -->
            <progress max="60" value="50"></progress>
        </li>
        <li>
            진행률 30%
            <!-- 전체 100 중 30만큼 진행 -->
            <progress max="100" value="30"></progress>
        </li>
    </ul>
</body>

<meter>

전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용 예) 하드 디스크 사용량, 유권자 투표율 등
사용할 수 있는 속성

<body>
    <ul>
        <li>
            점유율 0.8
            <!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다. -->
            <meter value="0.8"></meter>
        </li>
        <li>
            사용량 64%
            <!-- 전체 크기 100 중에서 64만큼 차지합니다 -->
            <meter min="0" max="100" value="64"></meter>
        </li>
        <li>
            트래픽 초과
            <!-- 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9000이 더 큽니다 -->
            <meter min="1024" max="10240" low="2048" high="8192" value="9000"></meter>
        </li>
    </ul>
</body>

목차로 돌아가기

'HTML CSS > HTML' 카테고리의 다른 글

HTML 목차 (0)	2024.04.09
HTML 실습 문제 모음 (0)	2024.04.09
<input>태그의 다양한 속성 (0)	2024.04.08
이미지와 하이퍼링크 (1)	2024.04.08
표를 만드는 태그 (0)	2024.04.08

HTML CSS/HTML 관련 글

더 보기

티스토리툴바