jonbeo 님의 블로그

Flexbox로 정렬을 하다 보면,가로 정렬은 잘 되는데 왜 세로 정렬은 자꾸 안 맞지?라고 생각한 적 한 번쯤 있으시죠?그럴 땐 주축이 아닌 교차축 정렬, 즉 align-items와 align-self를 확인해봐야 해요.이 두 속성이 Flexbox에서 세로 방향 정렬을 담당합니다.이번 포스팅에서는 이 두 속성의 차이와 활용법을 쉽게 정리해볼게요! ✅ align-items란?align-items는 모든 Flex 아이템들의 세로 정렬(교차축 정렬) 방식을 한 번에 지정해주는 속성이에요..container { display: flex; align-items: center;} 📦 align-items의 속성값값설명stretch기본값. 아이템 높이를 컨테이너에 맞춰 늘림flex-start위쪽 정렬 (교차..

Flexbox를 쓰다 보면 "가운데 정렬은 어떻게 하지?", "아이템을 양쪽에 나눠서 정렬하고 싶어!" 이런 상황 자주 생기죠.그럴 때 꼭 써야 하는 속성이 바로 **justify-content**입니다.이 속성은 아이템을 주축(main axis) 방향으로 어떻게 정렬할지 결정하는 속성이에요.이번 포스팅에서는 justify-content의 다양한 값과 시각적인 차이를 비교하면서어떤 상황에서 어떤 정렬이 적합한지도 함께 정리해볼게요!✅ 기본 문법.container { display: flex; justify-content: center;} justify-content는 아이템들이 놓일 방향의 중심 정렬 방식을 설정합니다.주축이 가로(row)일 수도 있고, 세로(column)일 수도 있어요! 📦 사용 ..

Flexbox를 쓸 때 가장 먼저 설정해야 하는 속성이 있습니다.바로 flex-direction입니다.이 속성은 아이템들이 나열되는 기본 방향을 정해주는 역할을 합니다.그런데 이 방향 하나만 바꿨을 뿐인데, 전체 레이아웃이 완전히 달라져 보이는 경험, 해보신 적 있으시죠?이번 포스팅에서는 flex-direction의 기본 개념부터각 속성값이 실제로 어떻게 작동하는지 차근차근 살펴보겠습니다! ✅ 기본 문법.container { display: flex; flex-direction: row; /* 기본값 */} flex-direction은 Flexbox의 주축(main axis) 방향을 설정해주는 속성입니다.주축이 어디냐에 따라 justify-content, align-items 같은 정렬 방식도 달라져..

이전 Flexbox 관련 포스팅에서는 Flexbox와 CSS Grid의 차이를 비교해보며언제 어떤 레이아웃을 쓰는 게 좋은지 알아봤습니다.이번엔 Flexbox 속성 하나하나에 대해 심화 학습을 시작해보려고 합니다.“flex로 정렬은 하긴 하는데, 정확히 무슨 속성이 뭘 하는 거였더라?”이런 고민이 있었다면 이번 flex 시리즈가 큰 도움이 될 거예요 :)✅ display: flex, 다시 정리해보기Flexbox의 핵심은 다음 두 가지로 나뉩니다:Flex 컨테이너: display: flex가 적용된 부모 요소Flex 아이템: 컨테이너 안에 있는 자식 요소들 A B C 🧩 Flex 컨테이너에서 쓸 수 있는 주요 속성들속성기능 요약flex-direction주축 방향을 설정 (가로 또는 세로)justi..

CSS를 쓰다 보면 이런 생각이 들죠.“어? 이 색상 여러 군데에서 계속 반복되는데, 수정하려면 다 찾아서 바꿔야 하나?” 그럴 때 쓰는 게 바로 **CSS 변수(Custom Properties)**입니다.한 번만 선언해두면 어디서든 재사용할 수 있고, 유지보수도 엄청 쉬워져요!✅ 기본 문법:root { --main-color: #FF4200; --font-large: 24px;}h1 { color: var(--main-color); font-size: var(--font-large);} --변수이름으로 선언하고, var(--변수이름)으로 사용할 수 있어요.✅ :root는 어떤 역할?:root는 모든 요소에 적용되는 CSS의 가장 바깥 범위예요.여기서 선언하면 어디서든 접근 가능하다는 뜻이죠!✅ ..

웹사이트를 만들어서 열어보면, 내가 설정하지 않았는데도 폰트 크기가 다르거나 마진이 들어간 경우를 본 적 있으시죠?이건 브라우저마다 **기본으로 적용하는 스타일(유저 에이전트 스타일 시트)**이 다르기 때문이에요.이 차이를 없애기 위해 사용하는 게 바로 reset.css입니다.✅ reset.css란?reset.css는 브라우저 기본 스타일을 없애고,모든 요소를 똑같은 기준에서 시작하게 만들어주는 CSS 파일이에요. 예를 들어, 대부분의 브라우저는 태그에 기본적으로 큰 폰트와 마진을 적용합니다.이걸 그대로 두면 브라우저마다 디자인이 달라 보이게 되죠.✅ 기본 reset 예시/* 가장 단순한 reset.css */* { margin: 0; padding: 0; box-sizing: border-box..

웹사이트를 만들다 보면 CSS가 점점 길어지고 복잡해지는 경우가 많아요.이럴 땐 스타일 파일을 기능별로 나눠서 관리하면 훨씬 편해요.이번 글에서는 CSS 파일을 분리해서 @import로 불러오는 방법을 설명할게요.어디서 어떻게 불러오는 게 좋은지, 어떤 점에 주의해야 하는지도 함께 살펴보자구요!✅ 왜 CSS 파일을 나눠서 관리해야 할까?처음엔 하나의 style.css 파일로 시작하지만,헤더푸터버튼폼 스타일등이 점점 많아지다 보면 수십, 수백 줄이 되죠.이때 CSS를 역할별로 나누고,메인 파일에서 @import로 불러오면유지보수가 쉬워지고협업도 편해지고필요할 땐 개별 파일만 수정하면 됩니다!🛠 기본 문법: @import "파일경로";CSS에서 다른 파일을 불러올 때는 @import를 사용해요.@impor..

React를 공부하다 보면 fetch로 JSON 데이터를 가져온다, props로 JSON 넘긴다 이런 말들을 자주 보게 됩니다.처음엔 “그 JSON이라는 게 도대체 뭐지?” 하고 막막하셨을 거예요.이번 포스팅에서는 JSON이 뭔지, 왜 React에서 자주 쓰이는지, 그리고 실제로 어떻게 사용하는지 예제를 통해 하나씩 살펴보겠습니다.✅ JSON이란?**JSON(JavaScript Object Notation)**은 데이터를 주고받을 때 사용하는 가벼운 텍스트 형식입니다.간단하게 말하면, 정보를 담기 위한 약속된 문장 구조예요.{ "name": "홍길동", "age": 28, "isStudent": false} 위처럼 중괄호 {} 안에 "key": value 쌍으로 이루어진 데이터 구조를 JSON이라고..

포토샵으로 작업하다 보면 글자 크기 단위가 pt로 되어 있어서“어? 난 px로 보고 싶은데 왜 이게 포인트지?” 하는 순간이 있죠.특히 웹디자인이나 모바일 UI 작업할 땐 픽셀(px) 단위가 더 익숙하고 정확하니까,단위를 pt에서 px로 바꿔주는 게 훨씬 편해요!✅ pt가 뭐고 px는 뭔가요?pt는 포인트 단위예요. 인쇄 기반 디자인에서 자주 쓰이는 단위죠.px는 픽셀 단위예요. 웹에서는 이게 기본 단위예요.💡 인쇄(포토샵 기본 설정) = pt💡 화면(Web) 작업 = px 🛠 단위를 px로 바꾸는 방법📍 1단계. 환경설정 열기윈도우: 편집(Edit) → 환경설정(Preferences) → 단위 및 눈금자(Units & Rulers)맥: Photoshop → Preferences → Units &..

웹 레이아웃을 만들다 보면 display: flex와 display: grid,둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?둘 다 정말 강력한 CSS 레이아웃 도구지만,방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요항목FlexboxGrid정렬 방식1차원(한 줄 또는 한 열)2차원(행과 열 동시에)사용 목적콘텐츠 흐름대로 정렬정확한 영역 배치배치 기준아이템 순서 중심위치 중심 (그리드 영역 지정)대표 용도메뉴바, 버튼 정렬, 카드 나열 등전체 페이지 레이아웃, 포털형 구성 등 🧭 Flexbox가 잘 어울리는 상황은?Flexbox는 콘텐츠..