[웹 개발 기초] 4화: 그라디언트와 히어로 섹션으로 첫인상 사로잡기
웹사이트의 얼굴인 히어로 섹션을 만들어 봅니다. 눈길을 사로잡는 그라디언트 배경 설정부터 중앙 정렬, 그리고 매력적인 버튼 스타일링까지 초보자의 눈높이에서 차근차근 설명해 드립니다.
IT/개발
함께 공부하며 성장하는 개발자들의 기록 공간입니다. 올바른 정답을 바탕으로, 그 답에 도달하기까지의 고민과 과정을 함께 나눕니다. 혼자 공부해도 혼자가 아닌 학습 경험을 지향하며, 작은 배움이 꾸준한 성장으로 이어지길 바랍니다.
[웹 개발 기초] 3화: Flexbox로 네비게이션 바 정렬하기 (레이아웃의 핵심)
웹 개발 기초 3화에서는 레이아웃의 혁명인 Flexbox를 사용하여 네비게이션 바를 정렬하는 방법을 함께 배웁니다. display: flex로 로고와 메뉴를 양 끝에 배치하고, 수직 중앙 정렬과 간격 조절 등 실무에서 꼭 필요한 기법들을 친절하게 안내해 드립니다.
[웹 개발 기초] 2화: CSS로 디자인의 기초 다지기 (폰트 & 변수)
SS 파일 연결부터 브라우저 스타일 초기화, 구글 폰트 적용, CSS 변수로 색상 관리, 부드러운 스크롤까지 — 웹사이트에 첫 스타일을 입히는 핵심 기초를 다집니다.
[웹 개발 기초] 1화: 코딩 준비와 HTML로 웹사이트 뼈대 세우기
VS Code와 Live Server로 개발 환경을 갖추고, HTML 기본 구조와 시맨틱 태그(nav, header, section, footer)를 활용해 포트폴리오 사이트의 뼈대를 직접 코딩해보는 입문 가이드.
AWS Lambda #3: 코드 수정은 이제 그만! ‘환경 변수’로 스마트하게 관리하기
리사이징 크기나 폴더명을 바꿀 때마다 코드를 고치시나요? 환경 변수를 활용하면 AWS 콘솔에서 설정값만 바꿔도 즉시 반영됩니다. 보안과 편의성을 모두 잡는 환경 변수 활용법을 알아봅니다.
AWS Lambda #2: 5분 만에 만드는 S3 이미지 리사이징 자동화
S3 버킷 생성부터 Lambda 연동, Sharp 라이브러리 활용까지 전 과정을 ‘따라하기’ 식으로 구성했습니다. 복잡한 이론 대신 실제 클릭 순서와 핵심 코드를 담아 누구나 서버리스 이미지 처리 시스템을 구축할 수 있습니다.
AWS Lambda #1: 서버리스 개념부터 첫 함수 생성과 비용 관리까지
서버 관리 부담을 줄이고 비용을 혁신적으로 아끼는 AWS Lambda 입문서입니다. 서버리스의 핵심 개념, 가성비 높은 프리티어 혜택, 그리고 5분 만에 직접 함수를 만들고 테스트하는 실습 과정까지 개발자의 시선에서 상세히 담았습니다.
[Next.js 시리즈 #5] 피날레: Vercel로 세상에 내 웹사이트 공개하기
Next.js 시리즈 대망의 마지막 편! Vercel과 GitHub을 이용해 내 프로젝트를 3분 만에 전 세계로 배포해 봅니다. 처음 사용자들을 위한 GitHub 설치(Install) 권한 승인 과정부터 보안을 위한 환경 변수 설정까지 상세히 담았습니다.
[Next.js 시리즈 #4-1] About 페이지 만들기
Next.js 시리즈 보너스 편! 나만의 정체성을 담은 ‘소개(About)’ 페이지를 만들어 봅니다. 깔끔한 Tailwind CSS 레이아웃을 활용해 보유 기술과 가치관을 효과적으로 전달하는 방법을 입문 개발자의 시선에서 세련되게 정리했습니다.
[Next.js 시리즈 #4] 실전 Data Fetching: ‘프로젝트’ 페이지 데이터로 채워보기
Next.js 시리즈 4부! 기존 레이아웃의 ‘프로젝트’ 메뉴를 실제 데이터로 채워봅니다. fetch API와 Interface를 활용해 외부 데이터를 안전하게 불러오는 실전 Data Fetching 과정을 초급 개발자의 눈높이에서 담았습니다. 이어지는 보너스 편 ‘소개 페이지 만들기’도 놓치지 마세요!”