First Project Ediya Clone

시맨틱 마크업과 SEO, 웹접근성, 크로스브라우징을 고려한 첫번째 반응형 이디야 프로젝트

🏠 DEMO

Skils

HTML5

• header main section footer 사용

CSS3

• Class 네이밍: BEM
• 미디어쿼리: 560px기준

Vanila JS / Jquery

• tab key 제어
• class명 추가, 삭제

Cross Browsing

• IE: 10
• Chrome, Firefox, Safari, Edge : modern browser

• <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  호환성 관련 meta태그로서 IE유저가 edge가 있을 경우 최신브라우저인 edge로 호환되게 연결해주는 태그

Web Accessibility

• Screen Reader ChromeVox, Voice Over, MVDA 테스트
• Skip Navigation
• image 대체 텍스트
• 키보드 제어

SEO

<meta
  name="description"
  content="이디야의 다양한 정보와 유용한 콘텐츠를 만나보세요."
/>

웹페이지 내의 상세정보를 설명하는 meta태그로서 구글봇에 검색되기 용이하다.

learned

• aria-haspopup
• aria-pressed
• meta property - open graph
• cross browsing safari error
• role="dialog"

members

• 박민지 : qkralswl307@gmail.com
• 김가현 : hhjj105@gmail.com
• 유지용 : jxr208@gmail.com

project development period

200406 ~ 200410