sliver__

이번에 웹 디자인에서 가장 중요한 요소인 타이포그래피(Typography) 에 대한 개념부터 실전 적용 가이드라인까지를 다루고 있습니다.1. 타이포그래피의 정의타이포그래피는 “문자를 읽기 쉽고 아름답게 배열하는 예술이자 기술”로, 글자의 가독성과 시각적 매력을 모두 고려합니다.2. 세리프(Serif) vs 산세리프(Sans‑serif)세리프 서체: 문자 획 끝에 작은 장식(세리프)이 붙어 있어 전통적이고 신뢰감을 주며, 긴 본문에 적합합니다.산세리프 서체: 장식이 없고 깔끔·단순한 형태로 현대적 분위기를 연출하며, 인터페이스 초보자에게 선택이 쉽습니다.3. 추천 서체산세리프: Inter, Open Sans, Roboto, Montserrat, Work Sans, Lato세리프: Merriweather, ..

디자이너가 아니어도 괜찮습니다. 개발자도 훌륭한 웹디자인을 배울 수 있습니다.웹디자인과 웹개발의 차이웹사이트를 만들기 위해선 디자인과 개발 두 가지 역할이 필요합니다.웹디자인(Web Design): 사이트의 시각적 구성, 분위기, 사용자 경험을 설계웹개발(Web Development): 디자인을 HTML, CSS, JavaScript 등으로 구현해 브라우저에서 동작하게 함과거에는 디자이너가 Sketch, Figma, Photoshop 등으로만 작업하고, 개발자가 그 디자인을 코드로 옮겼습니다. 하지만 요즘은 디자이너도 코딩을 하고, 개발자도 디자인을 합니다.이 강의의 목적은 개발자가 ‘디자인 감각’을 함께 갖추도록 돕는 것입니다.웹디자인이 중요한 이유1. 첫인상은 디자인에서 시작된다잘 디자인된 사이트는 ..

이번 포스팅에서는 CSS Grid에서 트랙(track) 과 아이템(item) 을 정렬하는 방법을 배워봅니다.Flexbox와 유사하지만, Grid만의 고유 속성으로 컨테이너 안의 트랙(열·행) 과 셀(cell) 내부의 아이템 두 영역 모두를 다루는 방법을 알아보겠습니다.1. 트랙 정렬: 컨테이너 안에서 열·행 배치하기Grid 컨테이너가 자신이 가진 트랙(열·행)을 모두 채우지 못할 만큼 커졌을 때, 남는 공간을 어떻게 분배할지 결정하는 속성입니다.1-1. 수평 방향 (justify-content) .container { display: grid; justify-content: center; /* 가로 중앙 정렬 */ /* space-between, start, end 등도 가능 */}cent..

이번 포스팅에서는 자동 배치에서 벗어나, CSS Grid의 grid-column 과 grid-row 속성을 사용해 원하는 셀(cell)에 직접 아이템을 배치하고, 여러 셀을 가로지르기(span) 하는 방법을 알아봅니다.1. 브라우저 DevTools로 그리드 라인(Line) 확인하기브라우저 개발자 도구에서 Grid 레이아웃 표시 버튼을 클릭행(row)·열(column)마다 번호 매겨진 그리드 라인과, 라인 사이 셀(cell), 그리고 간격(gutter) 이 시각화됨각 아이템이 위치할 셀의 시작(start)·끝(end) 라인 번호를 확인2. 단일 셀에 아이템 배치하기 /* 예: 8번 아이템(.l-8)을 2열 1행 셀에 배치 */.l-8 { grid-column: 2 / 3; /* 2번 열 라인에서 시작 ..

1. Fr 단위를 이용한 유연한 트랙 크기픽셀(px) 대신 fr(fraction) 단위를 쓰면 남는 공간을 손쉽게 분배예:→ 전체 가로 공간을 1:1:2 비율로 나눔.container { display: grid; grid-template-columns: 1fr 1fr 2fr;}동일 크기 열 만들기:이렇게 하면 브라우저 너비 변화에 따라 자동으로 열 너비가 조정됨.container { grid-template-columns: 1fr 1fr 1fr 1fr; /* 4개 열이 동일 비율 */}2. repeat() 함수로 코드 간결화반복되는 fr 값을 더 짧게 작성 가능예:.container { /* 1fr을 4번 반복 */ grid-template-columns: repeat(4, 1fr);}열 개수..

CSS Grid는 이차원(2D) 레이아웃을 위해 설계된 CSS 모듈로, 컨테이너를 행(row)과 열(column) 로 나누고 그 안에 아이템을 자유롭게 배치할 수 있게 해 줍니다.Flexbox가 1차원 레이아웃에 특화된 반면, Grid는 복잡한 그리드 구조를 더 적은 코드로 구현할 수 있어 UI 설계의 혁신을 가져왔습니다.핵심 용어Grid Container: display: grid 또는 inline-grid를 선언한 부모 요소Grid Items: 컨테이너의 직속 자식 요소들Grid Lines: 행과 열을 나누는 가상의 선, 1부터 열 개수+1, 행 개수+1까지 번호 매김Grid Cells: 교차하는 그리드 라인 사이의 사각 영역(셀)Grid Tracks: 하나의 행(row track) 또는 열(colu..