티스토리 사용자라면 사이드바에 이웃주소나 사이트등을 깔끔하게 정렬하기 위해서 셀렉트 메뉴를 한번쯤 사용해보셨을 겁니다. 저도 예전에 웅이아뿌님의 블로그를 따라하면서 메타사이트 정리할때 셀렉트 메뉴를 사용했습니다.

티스토리, 이웃관리를 깔끔하게 !! : http://nextgoal.tistory.com/469
 
 하지만 항목이 너무 많아지면서 ---- 내용 ---- 으로 나누기에는 셀렉트 메뉴가 조금 지저분하다는 느낌이 들어서 셀렉트 메뉴의 항목들을 그룹화로 변경해줬습니다. 그래서 항목을 그룹으로 설정해주는데 필요한 내용과 추가적인 속성들을 포스팅 해봤습니다. 

예전 포스팅의 추가적인 내용이어서 댓글창은 닫아놓았습니다. 


변경전( 기본 SELECT 요소 ) vs 변경후 ( 항목의 그룹화 )
 
 하단에 있는 텍스트 파일을 다운 받으시고 자세한 옵션은 하단의 내용을 참고하시면 됩니다.  


변경전( 기본 select요소 )

변경후( 항목의 그룹화 )

파일 (준비중) 파일 (준비중)


기본 select 요소
 
<p> 텍스트 또는 이미지 <br>
<select>
<option > 내용 </option>
<option > 내용 </option>
</select>
</p>

■ select 속성 

name="이름"

셀렉트 메뉴의 이름을 지정한다.

size="행수"

셀렉트 메뉴의 표시줄수를 지정하고 목록을 박스로 표시한다.
예) <select size="5">처럼 select에 size="5"를 추가한경우 아래처럼 5줄로 보여지게됩니다.

변경전




변경후


mutilple="multiple" 

 복수선택을 가능하게 해주는 속성으로 이 속성을 사용하지 않으면 하나의 항목만 선택할수 있습니다. 블로그에서 이웃관리나 사이트 소개를 할때는 복수선택을 할일이 없기때문에 다른 구체적인 예시가 생각이 나지 않아서 예시보다는 참고하시라는 의미에서 <웹표준교과서> 내용을 그대로 인용했습니다.

 셀렉트메뉴의 항목을 복수선택 가능하게 한다. 이 속성이 지정되 않으면 셀렉트메뉴는 한개의 항목만 선택 할수 있다. HTML에서는 multiple과 속성명만 지정하지만 XHTML에서는 multiple="multiple"과 속성값을 생략하지 않고 기술한다.

■ option 요소 


selected="selected" 

- selected가 지정된 항목이 기본항목으로 표시된다. 
-  HTML에서는 selected, XHTML에서는 selected="selected"
예) 3번째 항목인 블로그수익정보에 selected 넣어주면 기본항목으로 표시가 됩니다.  
 

변경전

변경후


value="값"

- 링크주소등 송신되는 값을 지정해준다. 



항목의 그룹화 ( optgroup 요소)
 
<p> 텍스트 또는 이미지 <br>
<select>

<optgroup label="그룹이름">
<option > 내용 </option>
<option > 내용 </option>
</optgroup>
</select>

</p>

■ optgroup 요소

셀렉트 메뉴의 항목이 많아질때 그룹으로 정리하면 가독성이 좋아집니다.

label="그룹이름" (필수 속성)

변경전( 기본 select요소 )

변경후( 항목의 그룹화 )

파일 (준비중) 파일 (준비중)


후기
 
 잘못된 부분이 있으면 언제든 방명록에 댓글로 남겨주시면 바로 수정하도록 하겠습니다. 





댓글을 달아 주세요