자바빵
521
2021-05-12 17:57:31
2
125

웹에서 text와 value값이 모두 필요한 경우 어떤 element를 사용하면 될까요?


보통 text와 value값을 모두 쓰는 건, input, select-option말고는 생각이 안나는데,

이런 여러개중 하나의 선택이나 입력하는 경우 말고,


[탭] 같은걸 만들때, 

위처럼 각 탭의 제목을 나타내는 [1번 탭] [2번 탭] [3번 탭]을 단순히 div로 만들었습니다.

그리고 해당 탭의 내용을 서버에 요청해서 불러올때, 탭의 no를 보내주면 간단한데,


<div>1번 탭</div>
<div>2번 탭</div>
<div>3번 탭</div>

이런식이라 element내에 value로 no를 저장하면 딱인데, div는 value값이 없더라구요...ㅠ


궁여지책으로

1)id에 tap_1, tap_2, tap_3 이렇게 넣어서 _를 split해서 1번째를 가져와서 쓰거나

2) 탭의 parent나 children에 hiddne한 div를 넣어서 no값을 활용하거나

3) div의 text값을 가져와서 no로 치환하는 등의 방식을 사용하는데,

더 좋은 방법이 있을꺼 같아 질문드려봅니다 ㅎㅎ

0
  • 답변 2

  • HJOW
    3k
    2021-05-12 18:02:51 작성 2021-05-12 18:04:13 수정됨

    div에다 값의 개념을 넣고 싶은 것이죠?

    어떤 탭을 선택했느냐에 따라 다른 값을 꺼내서 쓸 수 있게.


    태그의 속성(Attribute)

    <div class='thisisdiv'></div> 에서 class 가 속성 이름이고 thisisdiv 는 그 속성의 값입니다.

    하나의 태그는 여러개의 속성을 가질 수 있습니다.

    대부분 우리가 자주 사용하는 속성들은 이름이 다 정해져 있고 그 동작도 다 정해져 있지만...




    사용자 정의 속성 이라는 게 있습니다.

    <div data-value='1'></div> 와 같이

    data- 뒤에 임의로 원하는 이름을 붙여 우리가 마음대로 속성을 집어넣을 수 있고

    웹 페이지 동작에 아무런 해가 되지 않습니다.

    https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes


    탭마다 1, 2, 3 이렇게 값을 할당하고 싶으면

    <div data-no='1'></div>

    <div data-no='2'></div>

    <div data-no='3'></div>

    이런식으로 넣어 쓰면 된다는 것이죠.

    no 대신 원하는 이름으로 지어주시면 되고

    물론 이것도 속성(attribute) 이기 때문에 하나의 태그에 여러 이름의 속성을 넣을 수 있죠.


    저 div 객체 하나를 가져왔을 때 저 data-no의 값을 어떻게 꺼내오느냐는

    https://developer.mozilla.org/ko/docs/Web/API/Element/getAttribute




  • 자바빵
    521
    2021-05-12 18:06:41

    @ HJOW

    와우... 또 한가지 엄청난걸 배워갑니다 ㅎㅎ;;;;

    기본 속성만 써왔는데, data라는 사용자 정의 속성이 있었군요!!!

    기존 코드들도 싹 고쳐야겠습니다 감사합니다!!! ㅎㅎ

  • 로그인을 하시면 답변을 등록할 수 있습니다.