수다닷컴

  • 해외여행
    • 괌
    • 태국
    • 유럽
    • 일본
    • 필리핀
    • 미국
    • 중국
    • 기타여행
    • 싱가폴
  • 건강
    • 다이어트
    • 당뇨
    • 헬스
    • 건강음식
    • 건강기타
  • 컴퓨터
    • 프로그램 개발일반
    • C언어
    • 비주얼베이직
  • 결혼생활
    • 출산/육아
    • 결혼준비
    • 엄마이야기방
  • 일상생활
    • 면접
    • 취업
    • 진로선택
  • 교육
    • 교육일반
    • 아이교육
    • 토익
    • 해외연수
    • 영어
  • 취미생활
    • 음악
    • 자전거
    • 수영
    • 바이크
    • 축구
  • 기타
    • 강아지
    • 제주도여행
    • 국내여행
    • 기타일상
    • 애플
    • 휴대폰관련
  • 프로그램 개발일반
  • C언어
  • 비주얼베이직

웹표준 초보..질문드려요ㅠㅠ

노을빛

2023.04.01

너무 기초적인 질문인걸 알지만 어떤차이인지 정확한 답을 찾을곳이없어 질문드려요ㅠㅠ

표준코딩된사이트 및 포트폴리오사이트 소스를보던중
네비게이션메뉴 코딩시 li 에 class를 써서 css에서 이미지를 삽입한코드가있고

ex)
ul class=gbn_sub1
li class=intro1a href=intro.html인사말/a/li
li class=intro2a href=#인사말/a/li
/ul

(css에서 백그라운드로코딩)

li에 class를 사용하지않고 html문서에 이미지를 삽입한코드가있던데요....

ex)
ul class=gnb_sub1 id=gnb_sub1
lia href=intro.htmlimg src=images/gnb_sub01_off.gif alt=인사말//a/li
lia href=intro.htmlimg src=images/gnb_sub02_off.gif alt=인사말//a/li
/ul

(css에서는 마진 또는 넓이값만주었음)

두가지 코딩기법모두 마우스오버시 서브메뉴가나타납니다.

하지만 두 네비게이션메뉴의 차이점은 1번은 서브메뉴만있지만 2번은 서브메뉴 전체펼침메뉴가있습니다. 펼침메뉴때문에 li 에서 이미지를 삽입하는건가요?ㅠㅠ

두가지 코딩기법중 웹표준 웹접근정에 더 준수하는 코딩기법은 어느것인가요?
두가지 다 준수하는 코딩기법인가요?ㅜㅜ
책으로 공부할때 문서에 클래스가 많이추가됐을경우엔 그문서는 구조화가 제대로 안됐다는 글귀를 봐서 어느것이 더준수한지 헷갈립니다ㅜㅜ...

너무 초보적인 질문이지만 답변부탁드립니다ㅜㅜ...

추가...
+ 이미지 삽입시 넓이값은 필수 입력사항인가요?.. alt 처럼 width 값도 필수로 입력해야하는지..
필수입력값일경우 html에 코딩해야하나요..? 2번째 기법처럼 CSS에서 작성해도 상관없는지..

신청하기





COMMENT

댓글을 입력해주세요. 비속어와 욕설은 삼가해주세요.

  • 딥블랙

    답변감사드립니다!
    아 그런 심플한 장단점이...ㅋ.. 둘다 표준에 어긋나는 방법은 아니라는거죠..?

  • 너만을

    UI에서 이미지로 마크업하지 않고 css로 작성하면 html 페이지 로딩이 조금 빠르다는 장점이있겠죠 그리고 마크업이 깔끔해집니다. 다만 css가 늘어나는 단점?^^

  • 마루한

    아.. 접근성이라는 관점이 애매모호하고 헷갈리는 부분이 많았는데 추가답변으로인해서 한결이해하기 쉬워졌네요.. 아직 초짜라갈길은멀지만ㅜㅜ 팁을 연구해봐야겠어요ㅋ 답변감사드립니다!!!

  • 이하얀

    접근성이라는관점을 이해하려면 css를 빼고 스크린리더에서 접근이 가능한지를 생각해보시면 좋습니다
    CSS로bg를 작업했을때 css가 꺼지면 해당 컨텐츠를 볼수있느냐 생각해보시면 쉽게 이해되실것 같습니다 크롤러나 스크린리더 등은 그림에 새겨진 글씨를 읽을수 없다는걸 생각해보시고 추가로 드린 답변에 적어놓은 팁을 연구해보세요

  • 진솔

    CSS로 컨텐츠를 넣을땐 이렇게도 합니다
    divspan항목/span/div
    div 에 bg작업하시고 text-indent 를-1000정도주시면 css를 표시못하는 상황이나 스크린리더에서도 해당 컨텐츠를 표시할수가 있습니다

  • 자랑

    답변감사드립니다!
    컨텐츠를 포함하는 이미지여도 div에 class선언하여 css로 bg작업한다해도 접근성에 어긋나진않죠..?
    구조화 관련 클래스개수는 저도 좀 애매한 부분이라고 생각합니다..ㅜㅜ

  • 각티슈

    핸펀으로 보고 답글드리는거라 요점 파악이 잘안됐을수도 있지만 한말씀 드리겠습니다

    배경으로 지정해서 이미지가 표시되는것이나 img로 표시되는것이나 보이는건 똑같죠 그러나 그이미지가 컨텐츠를 포함하고 있다면 img로 표시하고 그렇지않고 단순 그래픽이라면 css로 bg작업하는것이 맞을것 같습니다
    또한 width속성은 필수라고 알고있습니다 css이아닌 img속성값으로 표시하구요

    구조화와 관련하여 클래스가 많으면 구조화 실패 인것인가와 관련해서는 얼만큼이

번호 제 목 글쓴이 날짜
2701151 사이트작업시 inputbox 가 readonly 형태표시 어떻게 하시나요? (1) 찬내 2025-07-11
2701123 간단한 select 질문입니다 (3) 천사의눈물 2025-07-11
2701061 비베질문.. 똘끼 2025-07-10
2701034 메일폼 내 script 삽입가능한 방법 없을까요.. (2) 마음새 2025-07-10
2701008 분명히 버튼을 만들었는데 액션이 안걸립니다. (3) 재찬 2025-07-10
2700923 전체중앙정렬&독타입&쿼크모드 ㅜㅠ (8) 푸른들 2025-07-09
2700893 질문드리겠습니다. 도도한 2025-07-09
2700793 무비클립에 마우스 오버시 랜덤으로 효과음 나기는 어떻게 ;; (1) 바닐라 2025-07-08
2700741 웹전송? (2) 연와인 2025-07-07
2700686 카테고리 호버시 세부카테고리 보이게하는 것, css로만 가능할까요?? (3) 다힘 2025-07-07
2700658 메타태그 질문드립니다..ㅠㅠ;;; 모해 2025-07-07
2700632 외부에서 이미지 파일을 불러와야 합니다. 도와주세요. (4) 에일린 2025-07-06
2700579 (air + as3) smtp 이용해서 첨부파일 포함해서 메일 보내기 물보라 2025-07-06
2700524 클릭시 밑에 메뉴 나오게 (4) 새솔 2025-07-05
2700505 activex를 비쥬얼6.0으로 만들었는데요 비스타 배포시에 안되서 질문드립니다 (3) 참이 2025-07-05
2700452 c언어에서... 자료형 구분.... (3) 시내 2025-07-05
2700422 버전에 관해 질문 라온제나 2025-07-04
2700393 mysql이 갑자기!!!!!!!!!!!!!!!에러가;; (2) 소미 2025-07-04
2700359 3.0 ) SimpleButton 상태 강제 변경 (3) 희선 2025-07-04
2700304 ie8 전용핵 문의 (3) 여자 2025-07-03
<<  이전  1 2 3 4 5 6 7 8 9 10  다음  >>

수다닷컴 | 여러분과 함께하는 수다토크 커뮤니티 수다닷컴에 오신것을 환영합니다.
사업자등록번호 : 117-07-92748 상호 : 진달래여행사 대표자 : 명현재 서울시 강서구 방화동 890번지 푸르지오 107동 306호
copyright 2011 게시글 삭제 및 기타 문의 : clairacademy@naver.com