오랜만에 포스팅하게 되었습니다.
배우면서 하는 입장에서 이제는 누군가를 알려줄 수 있는 입장까지는 온 것 같습니다.
그렇기에 앞으로 포스팅에 힘써 블로그를 활성화 할 예정입니다!!
웹 퍼블리셔로써 또는 웹 개발자로써 많은 지식을 공유하고 저 또한 배워가는 시간을 가지도록 하겠습니다.
서론이 많이 길어졌네요.
본론으로 들어가 SELECT tag에 대해 알아보기로 할텐데요.
본론으로 들어가기에 앞서 select tag에 대해 알아야겠죠?
어찌 사용하는지 어디에 사용되는지 등등
우선은 select tag는 알게 모르게 여러곳에 쓰이고 있습니다.
지역을 선택할 때 (ex) 서울특별시, 경기도, 강원도, 충청북도 등등
핸드폰 번호를 선택할 때 (ex) 010, 011, 016 등등
이렇게 여러곳에 사용되고 있으며 이제 부터는 사용 방법을 알아보도록 하겠습니다.
전 블로그 글을 읽어보시면 기본 html template을 이용하여
시작해보도록하겠습니다.
사용 프로그램은 Brackets을 이용했으며 여러분의 기호에 따라 Atom 같이 다른 프로그램을 사용하셔도 무방합니다.
우선 기본적인 Template을 만들어주세요.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> select 사용방법 </title> </head> <body> </body> </html> |
이렇게 템플릿을 만드셨다면 다음 단계로 진행해 보겠습니다.
select tag는 이 하나만으로 사용이 불가능하다는 거 유념해 두시고
진행하도록하겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> select 사용방법 </title> </head> <body> <select></select> </body> </html> |
<select></select>
이런식으로 select tag를 작성하셨다면
이런식으로 작은 select tag가 활성이 되었을 겁니다.
하지만 제가 앞서 말한대로 select tag는 혼자 사용이 불가능합니다.
그렇기에 자식들이 필요한데
option 이라는 tag가 필요로 하게됩니다.
사용법을 알아보자면
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> select 사용방법 </title> </head> <body> <select> <option>test1</option> </select> </body> </html> |
이렇게 select tag 안에 option tag가 들어가게 됩니다.
이 결과값을 보게되면
이런식으로 option tag에 입력한 test1 이라는 자식값이 들어가게 됩니다.
이런식으로 여러가지 option 값을 넣을 수 있으며
사용에 따라 응용도 가능하게 되겠죠?
응용된 결과값을 한번 볼까요??
이런식으로 응용을 할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> select 사용방법 </title> <style> select { width: 200px; } </style> </head> <body> <h2>거주하시는 지역과 구, 동을 선택해주세요.</h2> <select> <option>서울특별시</option> <option>경기도</option> <option>강원도</option> </select> <select> <option>강남구</option> <option>강동구</option> <option>강북구</option> </select> <select> <option>삼성동</option> <option>역삼동</option> <option>신사동</option> </select> </body> </html> |
하지만 처음부터 이렇게 선택되어 있는게 싫으신 분들도 계실 겁니다.
첫 노출이 싫으신 경우에는 서울특별시 또는 강남구 또는 삼성동 앞에 option tag를 하나 더
만드신 후에 그곳에 지역을 선택해 주세요. 구를 선택해 주세요. 또는 동을 선택해주세요.
라고 입력하여 주시면 되겠습니다.
이상으로 select tag, option tag에 대한 강좌를
끝내며 html 강좌는 아니지만
제가 일을 시작하고 투자에 좀 관심이 생겼는데
공유하는게 맞을꺼 같아서
혹시 모를 관심있는 분들을 위해
주식관련 정보를 링크걸어드리겠습니다!
'HTML5 > HTML Start' 카테고리의 다른 글
| 6. 기본적인 페이지 만들기 (footer) (0) | 2017.04.04 |
|---|---|
| 5. 기본적인 페이지 만들기 (section) (0) | 2017.03.31 |
| 4. 기본적인 페이지 만들기 (header) (0) | 2017.03.31 |
| 3. CSS 적용 및 CSS 파일 활용법 (0) | 2017.03.31 |
| 2. tag 사용 실습 및 응용 (0) | 2017.03.30 |
