[CSS ] 11. Flexbox 예제 모음이 글은 Flexbox 동작 예제를 모아놓은 글이다.예제는 CodePen 결과 화면을 iframe으로 불러와티스토리 스킨 CSS와 겹치지 않도록 구성했다.예제 목록 기본 row 정렬 column 방향 justify-content center space-between align-items center gap wrap order flex-grow 가로+세로 가운데 정렬예제 실행 화면정리 Flexbox는 한 방향 정렬과 간격 조절에 유리하다. justify-content는 주축(가로 방향) 정렬을 담당한다. align-items는 교차축(세로 방향) 정렬을 담당한다. flex-wrap, ord..
[CSS ] 10. 레이아웃 예제 모음이 글은 CSS 레이아웃 예제를 한 곳에 모아 정리한 글이다.예제는 CodePen을 iframe으로 불러와 티스토리 스킨 스타일과 겹치지 않게 구성하였다.0. 사용 방법 아래 예제 영역은 CodePen 결과 화면이다. 예제는 한 화면에 1~5번까지 이어서 나온다. 예제가 잘리면 iframe의 height 값을 늘리면 된다.1. block / inline-block 예제 inline-block이 한 줄에 나란히 배치되는 것을 확인한다.2. 가운데 정렬 예제 margin: 0 auto를 이용한 가로 가운데 정렬을 확인한다.3. position 예제 relative + absolute 조합으로 위치 지정이 되는 것을 확인한다.4. Flexbox 레이아웃 예제 ..
[CSS ] 09. CSS 기본 예제 모음이 글은 CSS의 기본 속성을 예제로 정리한 글이다.예제는 CodePen 결과 화면을 iframe으로 불러와티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.예제 목록 색상 / 글자 크기 박스 모델 (margin / padding / border) 가운데 정렬 (margin: 0 auto) display (inline-block) hover예제 실행 화면정리 CSS 속성은 결과 화면을 직접 보면서 이해하는 방식이 좋다. 예제는 iframe으로 분리하여 화면이 깨지지 않게 구성했다. 예제 화면이 잘리면 iframe의 height 값을 늘리면 된다.
[CSS ] 08. CSS 정리 노트 & 헷갈리는 개념1. CSS 전체 흐름 정리 CSS는 HTML 요소의 시각적 표현을 담당한다 선택자를 통해 스타일 적용 대상을 지정한다 레이아웃은 display, position, flex, grid로 구성한다 화면 크기에 따라 Media Query로 스타일을 분기한다2. block과 inline 차이 구분 block inline 줄 차지 한 줄 전체 내용만큼 width / height 가능 불가능 margin / padding 모두 적용 좌우만 적..
[CSS ] 07. 반응형 웹 기초 (Media Query)1. 반응형 웹이란?반응형 웹은 화면 크기나 환경에 따라 웹 페이지의 레이아웃과 스타일이 자연스럽게 변경되도록 만드는 방식이다.하나의 HTML 문서로 다양한 화면 크기에 대응한다.2. 반응형 웹이 필요한 이유화면 크기가 서로 다른 기기 존재가로·세로 해상도 차이한 화면에서 보기 편한 구조 필요3. Media Query란?Media Query는 화면 조건에 따라 CSS를 다르게 적용할 수 있는 문법이다.4. Media Query 기본 문법@media (조건) { 선택자 { 속성: 값; }}예시:@media (max-width: 768px) { body { background-color: lightgray; ..
[CSS ] 06. Grid 레이아웃1. Grid 레이아웃이란?Grid는 행(Row)과 열(Column)을 기준으로 요소를 배치하는 레이아웃 방식이다.Flexbox가 한 방향 정렬에 초점을 둔다면, Grid는 화면을 격자로 나누어 배치하는 데 사용된다.2. Grid 기본 구조부모 요소에 grid를 적용하여 레이아웃을 구성한다..container { display: grid;}grid 컨테이너 : display: grid가 적용된 부모 요소grid 아이템 : 컨테이너 내부의 자식 요소3. grid-template-columns열(Column)의 개수와 크기를 정의한다..container { grid-template-columns: 100px 100px 100px;}비율 단위(fr)를 사용할 수도..
[CSS ] 05. Flexbox 레이아웃1. Flexbox란?Flexbox는 요소들을 한 방향(가로 또는 세로)으로정렬하고 배치하기 위한 레이아웃 방식이다.부모 요소에 flex 속성을 적용하여자식 요소들의 정렬과 간격을 제어한다.2. Flexbox 기본 구조Flexbox는 컨테이너와 아이템으로 구성된다..container { display: flex;} flex 컨테이너 : display: flex가 적용된 부모 요소 flex 아이템 : 컨테이너 내부의 자식 요소3. 주축(Main Axis)과 교차축(Cross Axis)Flexbox는 두 개의 축을 기준으로 동작한다. 주축(Main Axis) : 요소가 배치되는 기본 방향 교차축(Cross Axis) : 주축과 수직인 방향4..
[CSS ] 04. 레이아웃 기본 (display / position)1. 레이아웃이란?레이아웃은 화면에서 요소들이 어떻게 배치되는지를 의미한다.CSS는 display와 position 속성을 통해 요소의 배치를 제어한다.2. display 속성이란?display 속성은 요소가 화면에 어떻게 표시될지를 결정한다.3. block 요소block 요소는 한 줄을 모두 차지하며,항상 새로운 줄에서 시작한다.div { display: block;} width, height 지정 가능 margin, padding 정상 적용대표적인 block 요소: div p h1 ~ h64. inline 요소inline 요소는 내용만큼의 공간만 차지한다.span { display: inline..