select 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • select 태그
    learn
    Practice
    learn
    07 입력 양식 태그
    select 태그

    이제까지 아이디와 비밀번호를 입력하는 양식을 만들어보았습니다. 다음 단계는 미리 준비된 여러 개의 선택지를 골라 선택할 수 있는 선택 박스(Select box)를 배치해보겠습니다. 선택 박스를 배치하기 위해서는 <select> 태그를 사용하며, <select>태그는 <option> 태그로 이루어져 있는 각 선택지를 하나로 감싸는 역할을 수행합니다.

    <select> 태그는 name이라는 속성을, <option> 태그는 value라는 속성을 필히 가져야합니다. 여기서 name 속성은 <input> 태그의 name속성과 동일한 역할을 수행합니다. <input> 태그에서는 한 태그 안에 있는 namevalue가 짝이었지만, <select> 태그에서는 <select> 태그의 name<option> 태그의 value가 서로 짝을 이룹니다.

    아래 코드를 오른쪽 실습창에 천천히 작성하며 각각의 태그가 무슨 역할을 수행하는지 다시 되뇌여봅시다. 코드 작성을 완료했다면 실행하여 입력 양식을 확인합니다.

    Practice
    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.
    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)