img 태그의 id를 이용해 표나 그리드에 사진을 넣을 수 있나요?
조회수 368회
제가 많은 사진을 for문과 document.write를 통해 i로 id를 지정한 img를 쭉 출력을 했습니다. 그래서 이런 식으로 이미지 파일이 있습니다.
이 사진들을 표 혹은 css 그리드에 배치를 하려고 합니다. 배치 위치는 딱딱 맞는 것이 아니라 빈 칸도 있을 수 있고 id="1"이 꼭 1번칸에 들어가는 것도 아니고, 이 배치는 종종 갱신도 해야해서 손수 배치하려고 합니다.
표는 보니까 직접 tr td에 img 태그를 넣는 것 같아서 아니라 생각하고 그리드가 맞는 거 같은데 그리드 라인 기반을 하는 게 나을까요 아니면 더 좋은 방법이 있을까요?
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
- "몇행 몇열에 무슨 내용이 있는지"가 정해져 있고 중요하다면 표를 써야 합니다. (그래야 검색엔진, 시각장애인 등에게 유의미한[semantic] 문서가 됩니다.)
- 그렇지 않고 단지 좌우로나란히 정렬을 시킬 필요가 있는 거라면 그리드 같은 CSS로 임의 배치 처리하시면 됩니다.
- 어느 쪽이든 결국 CSS는 필요할 겁니다. td에 img 넣으면서도 좌우상하 여백 없이 딱딱 맞게 붙이는 건 가능합니다.
근데 정확히 뭘 만들고 계신 건가요?
- 게임 도전과제 등을 직접 체크하도록 만들고 있습니다. 그런데 그래프처럼 난이도와 피지컬<>뇌지컬에 따라 위치가 각기 달라서 그걸 표현하려고 하고 있습니다. 이미지는 약 200장 정도라 for문으로 뽑았는데 이미지의 위치는 그렇게 할 수가 없어서 직접 배치를 하려고 합니다. 알 수 없는 사용자 2022.7.27 15:11
- 흠~ 자유도가 있는 UI인 모양이군요 만약 그렇다면 표니 그리드니 하는 것에 구애받을 것 없이 각 이미지들을 left 200 top 300 하는 식으로 절대좌표상배치 하셔도 좋을것 같네요 엽토군 2022.7.27 15:40
- 절대좌표는 좀 기피하고 있었는데 어쩔 수가 없나 보네요 ㅎ.. 알 수 없는 사용자 2022.7.27 15:51
- 어쩔수없다기보다는.. 이 경우는 오히려 그게 타당한 처리일 수도 있습니다. 일종의 scatter plot을 구현하려고 하시는 것 같은데 그런 거라면 표/그리드가 오히려 더 어색한 접근법일 수 있습니다. 엽토군 2022.7.27 15:56
- 아 제가 그 기피한 이유가 1번이 지금은 2,2 위치지만 변동으로 옮겨질 수도 있어서 그거때문에 제가 미리 넘버를 지정하고 싶어서 그랬습니다. 그럼 미리 절대 위치의 좌표를 보고 변수를 지정하면 될까요? 알 수 없는 사용자 2022.7.27 16:20
- 그 질문 자체는 제가 답을 잘 못 드리겠네요.. 근데 대략 이런걸 만들고 계신 게 맞죠? https://codepen.io/yuptogun/pen/NWYawGL?editors=0100 엽토군 2022.7.27 17:13
- 비슷한 것 같습니다 알 수 없는 사용자 2022.7.27 17:31
- 아니면 grid는 만들어두고 그리드의 이름(예: _0101)을 지정한 다음에 id니까 #1 { _0101 } 이런 식으로는 할 수 없나요? 알 수 없는 사용자 2022.7.27 17:51
댓글 입력