웹 접근성에 대한 본 내용은 eduwith 부스트코스*를 참고로 작성하였습니다. 웹 접근성 진단을 위한 프로그램 및 사이트 (링크 클릭 시 프로그램 다운 가능한 사이트 이동) 1. Colour Contrast Analyser (CCA) 텍스트와 그래픽/배경 이미지의 명도 대비를 체크해주는 프로그램 스포이드 도구를 사용하여 두 색상의 명암비를 쉽게 결정할 수 있는 TPGi의 무료 색상 대비 검사기 도구 WCAG (웹 콘텐츠 접근성 지침) - WCAG 2.0 레벨 AA는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1의 명암비 필요 - WCAG 2.1은 그래픽 및 사용자 인터페이스 구성 요소에 대해 최소 3:1의 명암비 필요 - WCAG 레벨 AAA는 일반 텍스트의 경우 최소 7:1, 큰 텍스..
본 글은 구글에서 제시하는 머티리얼 디자인 가이드 중 반응형 레이아웃 그리드의 대부분의 내용을 옮긴 글이며, 일부 편집과 재해석이 있을 수 있습니다. 지난 글에서는 반응형 웹 디자인/레이아웃을 위한 미디어쿼리와 뷰포트에 대해서 알아봤는데, 이번 글에서는 머티리얼 디자인 가이드로 '반응형 레이아웃 그리드'에 대해 알아보고자 한다. 레이아웃 그리드 구성 요소 : Columns, Gutters, Margins 레이아웃 그리드는 ①컬럼(열), ②거터, ③여백으로 이루어져 있다. ① Columns (컬럼/열) 컬럼은 컨텐츠를 담는 영역이다. (컨텐츠 배치 시 거터를 포함 또는 불포함) ㅡ 컬럼 너비 : 고정 값이 아닌 백분율로 정의하여 컨텐츠가 다양한 화면 크기에 유연하게 적응할 수 있도록 한다. ㅡ 컬럼의 수 ..
반응형 웹 디자인은 별도의 특별한 기술이 아니다. 웹 페이지를 다양한 디바이스의 해상도 및 규격에 맞게 레이아웃을 유연하게 적용(반응)하도록 하기 위해 알아야 할 사항이 있을 뿐이다. 반응형 웹을 제작하기 위해 알아야 할 사항으로는 반응형 이미지 및 타이포그래피 개념과 CSS Media Query(반응형 디자인의 핵심적인 구성요소)라고 할 수 있을 것 같다. 미디어 쿼리 미디어 쿼리는 미디어 유형과 화면 해상도, 뷰포트의 너비 등에 따라 웹이나 앱의 스타일을 수정할 때 사용한다. 미디어 쿼리를 한다는 것은 웹 브라우저에게 질의를 던지는 것이다. 모바일 너비를 640px, 데스크톱 너비를 1024px로 한다는 가정하에 "현재 브라우저 너비는 640px이 맞습니까?" 질의를 던지며 뷰포트가 640px이 맞는..
본 글을 통해 em, rem은 대략 무엇이고 em, rem을 px 단위로는 어떻게 되는지 알 수 있습니다. 본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다. 보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 위해 상대적인 길이 단위가 아닌 절대 길이 단위인 px을 자주 사용한다. 절대 길이 단위는 편리하지만 (목적에 따라) 사이즈가 제각각인 여러 디바이스에서 어떻게 보일지 생각해 볼 필요가 있다. 다양한 디바이스 및 브라우저의 스크린 사이즈에 대응하기 위해 반응형으로 작업한다면 상대적인 길이 단위로 사이즈를 지정해야 할텐데 이때 em, rem 등을 사용한다. (상대 길이 단위로는 em, ex, rem, ch, 1h, vw,..