최원종의 개발 블로그

Flexbox 심화: 아이템 크기 제어이전 강의까지 배운 것: display:flex, justify-content, align-items, flex-wrap 이번 핵심: **flex 아이템의 크기를 제어하는 3가지 속성**속성역할값 예시flex-grow남는 공간을 얼마나 차지?0(안먹음), 1(전부)flex-shrink공간 부족 시 얼마나 줄어듦?0(안줄어듦), 1(줄어듦)flex-basis기본 크기는?296px, autoflex (단축)위 3개를 한번에flex: 0 0 296px flex 단축 속성 해석법flex: 0 0 296px;/* 0 → grow: 남는 공간 안먹음 0 → shrink: 줄어들지 않음 296px → basis: 항상 296px 유지 결과: 고정폭 사이드바에 딱! */..

반응형 웹 개념스마트폰, 태블릿, PC 모두에서 잘 보이는 웹을 말함같은 HTML인데 화면 크기에 따라 CSS가 달라지는 것 @media 쿼리 기본 문법@media (조건) { /* 조건이 맞을 때 적용할 CSS */} 자주 쓰는 브레이크포인트기기조건모바일max-width: 768px태블릿max-width: 1024px데스크탑기본 (조건 없이) 모바일 퍼스트 vs 데스크탑 퍼스트방식키워드설명데스크탑 퍼스트max-width큰 화면 먼저, 작은 화면 예외 처리모바일 퍼스트min-width작은 화면 먼저, 큰 화면 확장 viewport 설정HTML head에 이 meta 태그가 없으면 모바일에서 데스크탑 크기로 축소됨10강 배달의 민족 어플 만들기HTML코드 ..

Transition 개념CSS 속성이 변할 때 **부드럽게 전환**되게 하는 것- 없으면: 빨간색 → 파란색 (뚝! 바로 변함)- 있으면: 빨간색 → → → 파란색 (서서히 변함).box { background: red; transition: background 0.5s ease; /* 0.5초에 걸쳐 부드럽게 */}.box:hover { background: blue; /* 마우스 올리면 서서히 파란색으로 */}transition 문법transition: 속성 시간 방식;transition: transform 0.3s ease;transition: all 0.4s ease; /* 모든 속성에 적용 */ 방식동작ease천천히 → 빠르게 → 천천히 (기본)linear일정한 속도..

Position 개념기본적으로 HTML 요소는 위에서 아래로 순서대로 쌓인다(문서 흐름).position을 사용하면 이 흐름을 벗어나서 원하는 위치에 배치할 수 있다 position 속성값값동작사용 예시static기본값, 문서 흐름대로(기본)relative원래 위치 기준으로 이동 + 자식의 기준점카드 (뱃지의 부모)absolute가장 가까운 relative 부모 기준으로 배치뱃지, 할인율 표시fixed화면(뷰포트) 기준, 스크롤해도 고정상단 고정 메뉴 핵심 규칙absolute를 쓸 때 부모에 relative를 꼭 붙여야 함안 그러면 뱃지가 화면 전체를 기준으로 날아감.card { position: relative; } /* 기준점 역할 */.badge { position: absolute; top..

패턴 1: 완전 가운데 정렬사용처: 로그인 폼, 로딩 화면, 에러 페이지.container { display: flex; justify-content: center; /* 가로 가운데 */ align-items: center; /* 세로 가운데 */ height: 100vh; /* 화면 전체 높이 */}패턴 2: 내비게이션 바사용처: 모든 웹사이트 상단 메뉴nav { display: flex; justify-content: space-between; /* 로고 왼쪽, 메뉴 오른쪽 */ align-items: center; padding: 0 20px; /* ★ padding 대신 height 고정 → 정중앙 정렬 보장 ..

Flexbox 개념 Java에서 Swing의 FlowLayout, GridLayout처럼 요소를 가로/세로로 자동 배치해주는 CSS 레이아웃 시스템 핵심: 부모에 display: flex → 자식들이 자동 정렬.부모 { display: flex; /* 자식들이 가로로 나열됨 */ justify-content: 속성 값; /* 주축 방향 정렬 */ align-items: 속성 값; /* 교차축 방향 정렬 */} justify-content (주축 정렬)값동작flex-start왼쪽 정렬 (기본값)center가운데 정렬flex-end오른쪽 정렬space-between양끝 배치 + 균등 분배space-around모든 요소 주위에 동일 여백 6강 개념개념넷플릭..

설계 순서가 중요한 이유나를 소개하는 프로필 카드 만들기, CSS를 아무 순서로 쓰면 코드가 엉망이됨.Java에서 클래스 설계 없이 코딩하면 스파게티 코드가 되듯,CSS도 **정해진 순서**로 작성해야 깔끔함.CSS 5단계 설계 순서단계하는 것코드 예시1단계리셋 / 전역 스타일• { margin:0; padding:0; box-sizing:border-box; }2단계레이아웃 (큰 틀)display:flex; flex-wrap:wrap;3단계컴포넌트 스타일border-radius; box-shadow; padding;4단계세부 조정hover 효과; transition;5단계반응형 처리@media (max-width: 768px) { ... }1단계: 리셋 / 전역 스타일브라우저마다 기본 margin, p..

4강에서 사용하는 개념개념설명프로필 카드에서CSS 연결 태그로 외부 CSS 파일 연결style.css 파일 분리class 선택자.클래스명 으로 특정 요소만 선택.card, .badge 구분박스모델padding(내부여백), margin(외부여백), border(테두리)카드 레이아웃border-radius모서리 둥글게프로필 사진, 뱃지색상HEX 코드 (#4F46E5)브랜드 컬러 적용완성 목표 시안실습코드 HTML 코드 최코딩 Frontend Developer 42 프로젝트 128 커밋 ..

1. display 타입: block vs inline HTML 태그는 태어날 때부터 두 가지 성격 중 하나를 가짐구분block (블록)inline (인라인)Java 비유println() - 한 줄 독차지 후 줄바꿈print() - 옆으로 이어짐동작항상 새 줄에서 시작, 가로 전체 차지옆으로 이어짐, 내용 크기만큼만대표 태그div, h1~h6, p, section, headerspan, a, strong, imgwidth/height적용됨적용 안됨 코드 첫 번째 박스 두 번째 박스 첫 번째 두 번째 더보기결과화면inline-block: 둘의 장점display 값 줄바꿈 width/height 사용 예시block새 줄 시작적용됨div, 카드, 섹션inline옆으..

HTMLJava에서 System.out.println()으로 콘솔에 출력하듯, HTML은 브라우저에 출력하는 언어 태그(tag)태그(tag)란 내용 형태로 브라우저에게 역할을 알려주는 것- 제목 → "이건 제목이야!"- 문장 → "이건 문단이야!"- → "이건 이미지야!"Java의 클래스/메서드처럼, 각 태그마다 고유한 역할이 있습니다.태그 종류태그역할HTML5 문서 선언, 여기가 보이면 성공! 해석- → 브라우저에게 "이건 HTML5 문서야!" 선언- → 한국어 페이지- Instagram Kim_coding 12게시물 | 328 팔로워|156팔로워 웹 개발 공부 중 더보기결과화면STEP 3: 소개글 + 링크 추가 코드 In..