1편. AI 에이전트란 무엇인가요? — 챗봇이랑 뭐가 다른 거예요?
AI 에이전트가 일반 챗봇과 어떻게 다른지, 어떤 4가지 요소로 구성되는지 알아봐요. ReAct 패턴과 함께 에이전트의 작동 원리를 쉽게 설명해드려요.
admin_jo
[웹 개발 기초] 10화: 자바스크립트로 스크롤 인터랙션 구현하기 (완결)
자바스크립트로 웹사이트에 생동감을 더해 보세요. 스크롤 이벤트로 네비게이션 바에 Glassmorphism 효과를 적용하고, 모바일을 위한 햄버거 메뉴까지 구현하며 10화 시리즈를 완성합니다.
[웹 개발 기초] 9화: 미디어 쿼리로 모바일 반응형 웹 만들기
스마트폰으로 웹을 보는 사람이 더 많아진 지금, 반응형 웹은 선택이 아닌 필수입니다. CSS 미디어 쿼리(@media)를 활용해 About 섹션 레이아웃, 프로젝트 카드 배치, 폰트 크기와 여백까지 모바일 화면에 최적화하는 방법을 살펴봅니다.
[웹 개발 기초] 8화: CSS 애니메이션으로 생동감 불어넣기 (@keyframes)
이번 글은 CSS @keyframes와 애니메이션으로 히어로 배경에 자연스러운 움직임을 더하고, z-index로 레이어를 정리해 가독성과 완성도를 함께 높이는 방법을 설명합니다.
[웹 개발 기초] 7화: 디테일을 살리는 Hover 효과와 Transition
CSS Hover와 Transition 기초를 통해 버튼, 카드, 메뉴 링크를 자연스럽게 움직이게 만드는 방법을 배우고, 웹 UI/UX 완성도를 높이는 실전 팁을 정리한 글입니다.
[웹 개발 기초] 6화: 카드 이미지 넣기와 비율 유지하기 (object-fit)
프로젝트 카드와 프로필에 이미지를 연결하고, object-fit: cover로 비율이 흐트러지지 않게 맞추어 어떤 화면에서도 보기 좋은 레이아웃을 만드는 방법을 차근차근 소개한 글입니다.
[웹 개발 기초] 5화: CSS Grid로 반응형 카드 레이아웃 만들기
CSS Grid로 반응형 카드 레이아웃을 만듭니다. repeat(auto-fit, minmax())로 화면에 맞춰 열을 자동 조절하고, 카드 스타일링으로 깔끔한 프로젝트 목록을 구성합니다.
[웹 개발 기초] 4화: 그라디언트와 히어로 섹션으로 첫인상 사로잡기
웹사이트의 얼굴인 히어로 섹션을 만들어 봅니다. 눈길을 사로잡는 그라디언트 배경 설정부터 중앙 정렬, 그리고 매력적인 버튼 스타일링까지 초보자의 눈높이에서 차근차근 설명해 드립니다.
[웹 개발 기초] 3화: Flexbox로 네비게이션 바 정렬하기 (레이아웃의 핵심)
웹 개발 기초 3화에서는 레이아웃의 혁명인 Flexbox를 사용하여 네비게이션 바를 정렬하는 방법을 함께 배웁니다. display: flex로 로고와 메뉴를 양 끝에 배치하고, 수직 중앙 정렬과 간격 조절 등 실무에서 꼭 필요한 기법들을 친절하게 안내해 드립니다.
[웹 개발 기초] 2화: CSS로 디자인의 기초 다지기 (폰트 & 변수)
SS 파일 연결부터 브라우저 스타일 초기화, 구글 폰트 적용, CSS 변수로 색상 관리, 부드러운 스크롤까지 — 웹사이트에 첫 스타일을 입히는 핵심 기초를 다집니다.