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

Question

보통 text와 value값을 모두 쓰는 건, input, select-option말고는 생각이 안나는데, 이런 여러개중 하나의 선택이나 입력하는 경우 말고, [탭] 같은걸 만들때, 위처럼 각 탭의 제목을 나타내는 [1번 탭] [2번 탭] [3번 탭]을 단순히 div로 만들었습니다.그리고 해당 탭의 내용을 서버에 요청해서 불러올때, 탭의 no를 보내주면 간단한데,

1번 탭

2번 탭

3번 탭

이런식이라 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로 치환하는 등의 방식을 사용하는데,더 좋은 방법이 있을꺼 같아 질문드려봅니다 ㅎㅎ

HJOW · Accepted Answer

div에다 값의 개념을 넣고 싶은 것이죠?어떤 탭을 선택했느냐에 따라 다른 값을 꺼내서 쓸 수 있게. 태그의 속성(Attribute)

에서 class 가 속성 이름이고 thisisdiv 는 그 속성의 값입니다.하나의 태그는 여러개의 속성을 가질 수 있습니다.대부분 우리가 자주 사용하는 속성들은 이름이 다 정해져 있고 그 동작도 다 정해져 있지만... 사용자 정의 속성 이라는 게 있습니다.

와 같이data- 뒤에 임의로 원하는 이름을 붙여 우리가 마음대로 속성을 집어넣을 수 있고웹 페이지 동작에 아무런 해가 되지 않습니다.https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 탭마다 1, 2, 3 이렇게 값을 할당하고 싶으면

이런식으로 넣어 쓰면 된다는 것이죠.no 대신 원하는 이름으로 지어주시면 되고물론 이것도 속성(attribute) 이기 때문에 하나의 태그에 여러 이름의 속성을 넣을 수 있죠. 저 div 객체 하나를 가져왔을 때 저 data-no의 값을 어떻게 꺼내오느냐는https://developer.mozilla.org/ko/docs/Web/API/Element/getAttribute

자바빵 · Answer

&#64; HJOW와우... 또 한가지 엄청난걸 배워갑니다 ㅎㅎ;;;;기본 속성만 써왔는데, data라는 사용자 정의 속성이 있었군요!!!기존 코드들도 싹 고쳐야겠습니다 감사합니다!!! ㅎㅎ

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

2개의 답변

#element 목록