[웹 개발 기초] 6화: 카드 이미지 넣기와 비율 유지하기 (object-fit)
프로젝트 카드와 프로필에 이미지를 연결하고, object-fit: cover로 비율이 흐트러지지 않게 맞추어 어떤 화면에서도 보기 좋은 레이아웃을 만드는 방법을 차근차근 소개한 글입니다.
IT/개발
함께 공부하며 성장하는 개발자들의 기록 공간입니다. 올바른 정답을 바탕으로, 그 답에 도달하기까지의 고민과 과정을 함께 나눕니다. 혼자 공부해도 혼자가 아닌 학습 경험을 지향하며, 작은 배움이 꾸준한 성장으로 이어지길 바랍니다.
[웹 개발 기초] 5화: CSS Grid로 반응형 카드 레이아웃 만들기
CSS Grid로 반응형 카드 레이아웃을 만듭니다. repeat(auto-fit, minmax())로 화면에 맞춰 열을 자동 조절하고, 카드 스타일링으로 깔끔한 프로젝트 목록을 구성합니다.
[웹 개발 기초] 4화: 그라디언트와 히어로 섹션으로 첫인상 사로잡기
웹사이트의 얼굴인 히어로 섹션을 만들어 봅니다. 눈길을 사로잡는 그라디언트 배경 설정부터 중앙 정렬, 그리고 매력적인 버튼 스타일링까지 초보자의 눈높이에서 차근차근 설명해 드립니다.
[웹 개발 기초] 3화: Flexbox로 네비게이션 바 정렬하기 (레이아웃의 핵심)
웹 개발 기초 3화에서는 레이아웃의 혁명인 Flexbox를 사용하여 네비게이션 바를 정렬하는 방법을 함께 배웁니다. display: flex로 로고와 메뉴를 양 끝에 배치하고, 수직 중앙 정렬과 간격 조절 등 실무에서 꼭 필요한 기법들을 친절하게 안내해 드립니다.
[웹 개발 기초] 2화: CSS로 디자인의 기초 다지기 (폰트 & 변수)
SS 파일 연결부터 브라우저 스타일 초기화, 구글 폰트 적용, CSS 변수로 색상 관리, 부드러운 스크롤까지 — 웹사이트에 첫 스타일을 입히는 핵심 기초를 다집니다.
[웹 개발 기초] 1화: 코딩 준비와 HTML로 웹사이트 뼈대 세우기
VS Code와 Live Server로 개발 환경을 갖추고, HTML 기본 구조와 시맨틱 태그(nav, header, section, footer)를 활용해 포트폴리오 사이트의 뼈대를 직접 코딩해보는 입문 가이드.
[2026 동계 올림픽] 컬링 ‘5G’팀과 함께하는 초보자 컬링 완벽 가이드
2026 밀라노·코르티나담페초 동계 올림픽에 출전 중인 여자 컬링 ‘5G’ 팀을 소개합니다. 하우스 점수 계산과 스위핑 원리 등 컬링 규칙을 확인하고, 우리 선수들의 정교한 전략과 마인드 컨트롤을 함께 응원해 주세요!
AWS Lambda #3: 코드 수정은 이제 그만! ‘환경 변수’로 스마트하게 관리하기
리사이징 크기나 폴더명을 바꿀 때마다 코드를 고치시나요? 환경 변수를 활용하면 AWS 콘솔에서 설정값만 바꿔도 즉시 반영됩니다. 보안과 편의성을 모두 잡는 환경 변수 활용법을 알아봅니다.
AWS Lambda #2: 5분 만에 만드는 S3 이미지 리사이징 자동화
S3 버킷 생성부터 Lambda 연동, Sharp 라이브러리 활용까지 전 과정을 ‘따라하기’ 식으로 구성했습니다. 복잡한 이론 대신 실제 클릭 순서와 핵심 코드를 담아 누구나 서버리스 이미지 처리 시스템을 구축할 수 있습니다.
AWS Lambda #1: 서버리스 개념부터 첫 함수 생성과 비용 관리까지
서버 관리 부담을 줄이고 비용을 혁신적으로 아끼는 AWS Lambda 입문서입니다. 서버리스의 핵심 개념, 가성비 높은 프리티어 혜택, 그리고 5분 만에 직접 함수를 만들고 테스트하는 실습 과정까지 개발자의 시선에서 상세히 담았습니다.