Programming/CSS

[CSS] CSS Grid에 대해 알아보자

grid는 레이아웃을 구현하는데 사용한다. flex도 레이아웃을 구현하는데 사용하지만 flex는 1차원 (한 방향) 레이아웃 시스템이고 gird는 2차원 (두 방향) 레이아웃 시스템이므로 보다 정교하고 복합적인 레이아웃 구현을 위해 grid를 사용할 수 있다. grid를 사용하기 전 알아야할 기본 지식 (1) Column & Row column은 열, 세로줄 row는 행, 가로줄 (2) 그리드 용어 그리드 컨테이너 (Grid Container) : 그리드 아이템의 부모 요소. 그리드의 전체영역. 그리드 아이템 (Grid Item) : 컨테이너의 자식 요소들. 그리드에 의해 배치되는 요소들. 그리드 트랙 (Grid track) : 그리드의 행 / 열. 그리드 셀 (Grid cell) : 그리드의 한 칸. ..

[CSS] 속성 값의 크기 단위

CSS에서 크기의 단위는 문서매체의 종류 ( 인쇄물 / 웹 )에 따라서 달라진다. - 인쇄용 : in(인치), cm, mm, pt, pc(파이카) 등 - 웹용 : px, %, em, rem 등 HTML5에서 rem, ch와 vw, vh, vmin, vmax가 추가되었다. 절대 크기 단위 일반적으로 항상 동일한 크기로 간주되는 단위. 단위 이름 다음과 동일 in 인치 1in = 2.54cm cm 센티미터 1cm = 37.75..px mm 밀리미터 1mm = 0.1cm pc 파이카 1pc = 16px px 픽셀 1px = 0.0104...in 상대 크기 단위 상대 크기 단위는 다른 요소의 영향을 받는다. 텍스트나 다른 요소의 크기가 다른 것에 비례하여 조정될 수 있도록 할 수 있다는 이점이 있다. 단위 관련..

[CSS] CSS 색상 표현방법 (RGB, HSL 등)

CSS에는 여러가지 색상 표현방법이 있다. CSS3 이전에는 16진수, 색상명, RGB 값으로 색상을 표현하는 방법이 있었으나, CSS3에서부터 RGBA, HSL, HSLA 색상값이 추가되었다. 16진수 표기법 - # 이후 16진수 색상값, #rrggbb 형식. - 각 값들이 반복되는 경우 #rgb로 한 자리씩 생략 가능. ( #ff0000 > #f00) div { background-color: #0000ff; color: #fff; } 색상명 표기법 - 각 색상들의 명칭으로 표기. - w3schools 색상명 확인 바로가기 HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major l..