CSS Layout : Flex와 Grid CSS layout에는 Flex와 Grid가 있다. CSS Flex와 Grid는 Container와 Item이라는 두 가지 개념으로 구분돼 있는데, Container는 Items를 감싸는 부모요소이고 그 안에 Item을 자유롭게 배치할 수 있다. Flex와 Grid의 차이는 중심축에 따른 레이아웃 시스템을 어떻게 제공하느냐에 있다. Flex는 row 또는 column으로 설정한 중심축에 따라 1차원적으로 아이템들을 배치할 수 있고 반면에 grid는 (row와 column) 2차원적으로 아이템들을 배치할 수 있다. 둘 다 훌륭하지만 비교적 좀 더 복잡한 레이아웃을 구현하기 위해 CSS Grid를 사용할 수 있다. 더보기 flexbox - container에 적용되..
2022 구글 I/O 개발자 컨퍼런스에서 CSS(Cascading Style Sheets)의 새로운 기능을 발표했다. 새로운 CSS 기능 중에서도 주목할만한 Cascade layers, Viewport units, Container queries, acctent-color, acctent-contrast, color-mix, :has(), @nest, @scope 에 대해 알아보자. Cascade layers (브라우저 지원 : Chrome 99, Firefox 97, Edge 99, Safari 15.4) 구체적인 셀렉터나 선언된 순서 (아이디 또는 !important) 등으로 스타일을 덮어씌우면 유지보수가 어려워지는데, 이러한 문제를 해결하기 위해 나온 기능이다. Cascade layers 규칙을 적..
px (pixel) 화면을 구성하는 기본 단위로, 스크린에 표현할 수 있는 가장 작은 점 하나라고 할 수 있다. 절대적 표시 단위라서 지정한 수치의 이상일 경우 깨져 보일 수 있다. dpi (dots per inch) 1인치에 들어가는 점들의 개수를 의미하며, 이를 dpi단위로 표현한다. 1인치 안에 72px가 들어가있다면 72dpi이다. 보통 웹이미지를 72dpi로, 인쇄물을 300dpi로 작업하는데 여기에서 '해상도(resolution)'라는 단어를 쓰게된다. 수치가 높을 수록 고해상도이므로 72dpi는 저해상도, 300dpi는 고해상도이다. dp (Density-independent Pixels) 밀도 독립적 픽셀이란 안드로이드 OS에서 정의한 논리적 픽셀이다. 기기의 밀도에 상관없이 물리적으로 거..
아이콘과 같은 벡터 이미지 사용을 위해서 SVG 파일로 저장하는 방법과, HTML에 사용하기 위해 코드로 변환하는 방법을 공유하고자 한다. SVG를 이해하기 위해 이미지 파일 형식에 대해서 간략히 알아보자. 벡터 VS 비트맵 벡터와 비트맵 모두 디지털 이미지를 저장하는 데 쓰이는 이미지 파일 포맷이다. 웹용 비트맵(Bitmap) 이미지 포맷은 픽셀(이미지를 구성하는 최소 단위) 격자를 사용하여 이미지를 나타낸다. 결과로 생성된 파일은 크기가 커져서 단일 해상도(흔히 저해상도)로 제한되기 쉽다. 따라서 다양한 색상을 가진 이미지를 만들 수 있지만 그만큼 용량이 커진다. 커진 이미지를 적용하더라도 화면 확대 시 이미지가 깨져 보일 수 있다. 반면에 벡터(Vector)는 이미지를 모양, 패스, 텍스트, 필터 ..
CSS position 속성은 요소를 배치하는 방법을 지정한다. position의 속성값으로는 static, absolute, fixed, sticky가 있고, 각 속성의 배치 유형을 알고 사용하면 된다. Sticky의 경우 Position의 계산값(상속 과정에서 부모가 자식에게 물려주는 값)이 sticky인 요소이다. 평소에는 relative인 요소처럼 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록(위치의 기준점이 되는 부모 요소)이 자신의 플로우 루트(또는 스크롤 컨테이너)에서 지정한 특정 임계값을 넘으면 마치 fixed처럼 화면에 고정한다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다. 사용 예시 : See the Pen Sticky CSS by hyoeun (@hyonixk) ..
지난 글에서 스크롤 메커니즘이 있어도 배경 이미지를 고정시킬 수 있는 background-size와 attachment의 속성을 살펴봤다. background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정 background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내.. hyoni-k.tistory.com 이번 글에서는 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고자 할 때 필요한 CSS 속성인 object-fit, object-position에 대해 알아보고자 한다. object-fit : 이..
텍스트를 강조하기 위해서 다음과 같은 방법이 있을것이다. 1. 텍스트의 두께를 상대적으로 무겁게 하여 강조 font-weight: bold; 2. 텍스트의 색상으로 강조 color: red; 3. 텍스트의 배경에 색상을 주어 강조 background-color: #fdd000; 4. 텍스트에 언더라인을 주어 강조 text-decoration: underline; text-decoration: underline dotted blue; (underline 속성에 대한 학습은 여기(MDN)를 참고) 텍스트에 단순히 text-decoration: underline으로 선을 넣으면 되지만, 구조적으로 적용이 안되는 상황에는 가상클래스와 같은 방법으로 선을 넣어야 할 것이다. 이처럼 불가피한 상황이거나 또는 밑줄에..
웹 접근성에 대한 본 내용은 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, 큰 텍스..
CSS Preprocessor(전처리기) CSS 전처리기는 CSS가 동작하기 전에 사용하는 기능을 하며, 전처리기의 종류로는 SASS, LESS, Stylus 등이 있다. (참고로 SASS와 LESS와 같은 컴파일 언어를 개발하기 위해 사용하는 - CSS 도구 개발을 위한 프레임워크 - PostCSS도 있다.) CSS 전처리기는 CSS 문법과 유사하지만 표준 CSS보다 많은 기능을 사용하기 때문에 보다 편리하게 작성할 수 있다. 하지만 웹에서 직접 동작하지 않기 때문에, 작성한 전처리기는 웹에서 동작 가능한 표준 CSS로 컴파일해야 한다. 즉, 전처리기로 작성하고 CSS로 컴파일해서 동작시킨다. (컴파일의 경우 전처리기의 종류마다 방법이 다소 다름) SASS와 SCSS의 차이점? SCSS는 CSS구문과 ..
본 글은 구글에서 제시하는 머티리얼 디자인 가이드 중 반응형 레이아웃 그리드의 대부분의 내용을 옮긴 글이며, 일부 편집과 재해석이 있을 수 있습니다. 지난 글에서는 반응형 웹 디자인/레이아웃을 위한 미디어쿼리와 뷰포트에 대해서 알아봤는데, 이번 글에서는 머티리얼 디자인 가이드로 '반응형 레이아웃 그리드'에 대해 알아보고자 한다. 레이아웃 그리드 구성 요소 : Columns, Gutters, Margins 레이아웃 그리드는 ①컬럼(열), ②거터, ③여백으로 이루어져 있다. ① Columns (컬럼/열) 컬럼은 컨텐츠를 담는 영역이다. (컨텐츠 배치 시 거터를 포함 또는 불포함) ㅡ 컬럼 너비 : 고정 값이 아닌 백분율로 정의하여 컨텐츠가 다양한 화면 크기에 유연하게 적응할 수 있도록 한다. ㅡ 컬럼의 수 ..