웹표준/접근성도 맞춰야하는 프로젝트중입니다 ^^;;
아래 표를 짜야하는데.... 급수별로 걸쳐져 있는것도 있고 그 아래로 테이블선 지나가고..
머리는 굴리며 이렇게 저렇게 시도하는데..계속 실패네요.. ㅠ.ㅠ
어떻게 하면 좋을까요?? 고수님들의 조언 부탁드립니다 ...
ps.매일 퇴근은 한밤중에...(오늘 추운데...ㅠ.ㅠ)
슬옹 2026.04.10 댓글 10
웹표준/접근성도 맞춰야하는 프로젝트중입니다 ^^;;
아래 표를 짜야하는데.... 급수별로 걸쳐져 있는것도 있고 그 아래로 테이블선 지나가고..
머리는 굴리며 이렇게 저렇게 시도하는데..계속 실패네요.. ㅠ.ㅠ
어떻게 하면 좋을까요?? 고수님들의 조언 부탁드립니다 ...
ps.매일 퇴근은 한밤중에...(오늘 추운데...ㅠ.ㅠ)
그댸와나 2026.04.10
통이미지에 대체텍스트로 하는 건 어떻까요?
복잡하게 디자인된 표, 조직도 등 이런 것들은 통이미지로 가고
그에 대한 설명만 잘 넣어줘도 상관 없을 것 같은데요.. 웹 접근성 연구소 사이트 가서 한번 찾아보세요
라임나무 2026.04.10
마감을 앞두고 막 쳐내고 있는 상황이라....ㅠ.ㅠ
요청을 몇번했으나....거절당함 ㅠ.ㅠ
여백까지 자르는 방법을 고려중이에요 ;;;;;
모든 2026.04.10
표 서너개로 분리하면 이해도 쉽고 표현도 쉬울꺼 같은데 참 안타깝네요. 이해도 잘 안가요;
표준이다, 접근성이다 이런 프로젝트는 많지만 클라이언트나 기획쪽도 생각을 좀 바꿔야 할 것입니다.
저라면 위의 표의 정확한 의미를 알아내서 기획, 디자인에 수정을 요청하겠습니다.
행복녀 2026.04.10
그렇게 하면 해결이 될것 같았는데..그래도 줄이 안맞네요 -_-;;
아 ㅠ.ㅠ
타우러스 2026.04.10
집어넣을수 없어서 고민보다는...그림대로 이쁘게 줄을 맞추는게 문제였어요^^;;
테이블로 다 자르고 (겹치는건 두칸으로 자르고..) id와 headers 값으로 접근성을 맞췄는데요
이미지가...보이는데로...아래위로 줄이 잘 안맞아서...
양 옆에 긴건...vertical-align:middle로 맞춘후...
맨 위는 vertical-align:top 으로 맞추고 위에 마진주고..
아래는 vertical-align:bottom 으로 맞추고 아래 마진 조
남천 2026.04.10
테이블로 다 짜르고 th scope 적당히 이용하면 고민할 필요 없는거 같은데
세움 2026.04.10
세로 글씨 눈에 잘 들어 오지도 않네요 @_@;;
나려 2026.04.10
별다른 방법은 없네요 ㅠ.ㅠ
이쪽 저쪽 병합해서 붙이고는 있는데...
각각 align 다 줘도....이미지가 저렇게 깔끔하게 맞지 않습니다 ㅠ.ㅠ
각각 box에 padding 값을 다 줘야한다는...
ㅋ 눈물만 나네요 -_-;;;
새나 2026.04.10
1급부터 6급까지 동일한 내용인것 같은데, 그냥 이미지 덕지덕지 붙이면 되실겁니다.
저런 테이블이 여러번 나와야 하고 매번 내용이 달라진다면 디자인을 수정하는게 효율적일거예요.
라미 2026.04.10
고수도 아니고... 퍼블리셔도 아니지만 댓글 달아봅니다.
일단 테이블로 작성.
1급,2급,3급,4급,5급,6급, 입문 에 있는 회색선은 table에 BG로 처리.
가치전파 - 비전실천, 공직윤리, 등등등..... 세로로 된건 rowspan 으로 처리.
가로로 된건 colspan 으로 처리.
3,4,5,6 급 등 한 급수에 두개의 항목이 겹치는건 급수 헤더를 rowspan 으로 처리.
그리고 두개 겹치는 td 는 headers 에 상단 th의 아