시작하기에 앞서
코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고
요점을 적어두고 다시 활용하기 위한 글입니다.
사이트 타당성 검사
https://validator.w3.org/nu/#textarea
Ready to check - Nu Html Checker
This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change
validator.w3.org
WAI - ARIA
현제는 HTML 5로 많이 흡수가 됬으나 과거 HTML4 시절 장애를 가진 일부 유저 (시각장애인 등)
을 위한 네비게이션 리딩 안내등을 위한 기술들이다.
스크린리더에게 읽히지 않게 하기
<span class="slider" aria-hidden="true"> | <span>이와 같이 아이콘을 삽입한 게 아닌 일부 콘텐츠를 나누거나 하는 경우
해당 컨텐츠는 눈에는 보이지만 따로 스크린 리딩을 하지 않는 aria-hidden을 넣어주면 된다.
역으로 스크린 리더에게만 읽히게 하기
<span class="button" aria-label="이동하기"><span>어떤 버튼을 만들 때 딱히 필요는 없지만 시각적으로 보지 못하면 의미를 알 수 없는
예를들어 이동하기 같은 경우에 aria-label을 사용해 스크린 리더에게만 정보를 전달 가능하다.
WAI-ARIA란?
들어가며 회사에서 들었던 웹 접근성을 고려한 콘텐츠 제작 가이드 강의에서 웹 접근성 지침 준수는 모든 웹사이트의 의무사항이라고 들었습니다. 웹 접근성 마크를 취득해야 하는 프로젝트가
story.pxd.co.kr
Normalize CSS
https://cdnjs.com/libraries/normalize
normalize - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Normalize.css as a node packaged module - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We mak
cdnjs.com
크로스 브라우징 (스마트폰 , 패드 , 데스크탑등)의 각 태그들의 정의가 다름에 따라
원하지 않는 뒤틀림을 방지하기 위해 기본 시멘틱 태그들의 CSS속성을 없애준다.
HTML <Head> 내부에 태그를 삽입하면 된다
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Figma 유용한 플러그인
Export styles to CSS variables
피그마 디자인에서 색정보 등 자주 사용하는 정보는 따로 모아서
테마에 보관하는 경우가 많은데 이 때 사용가능한 확장 툴
정보를 편리하게 모아서 보여주기 때문에 바로 css파일로 적용시키기 쉽다.
Header
로고 혹은 최상단의 해더는 <Header>의 시멘틱 태그로 구성한다
제목은 되도록 <H1> 태그로 달아준다. (대제목)
또한 이미지 태그 내부의 alt를 선언할 시 스크린 리더 사용자를 위해 꼭 상세 간결하게 요약해서 적는다.
Section
부제목은 <H2> 태그로 마크업 한다. (중요도에 따라 css 스타일은 없지만 대제목 중제 목 소제목 등 분류를 나눈다)
CSS
- 되도록 크기는 px보단 rem으로 지정한다 (나중에 기본 글자 크기를 바꾸면 일괄변경됨)
- margin-left , margin right : auto; 를 활용하면 중앙정렬이 편리하다.
'IT 학습 > HTML + CSS' 카테고리의 다른 글
| HTML + CSS 마크업 (3) 자주 사용되는 CSS 선택자 12종 (0) | 2022.09.13 |
|---|---|
| HTML + CSS 마크업 (2) ellipsis & 이미지 스프라이트 (0) | 2022.09.01 |