Frontend
총 14개의 글
-
HTML/CSS 시리즈 전체 목차 | 웹 프론트엔드 기초부터 실전까지
HTML/CSS 시리즈 전체 목차: 웹 개발 기초부터 Flexbox, Grid, 반응형, 애니메이션까지 8개 주제로 프론트엔드 마스터하기. 시맨틱 HTML, CSS 선택자, 박스 모델, Position, 레이아웃, 실전 프로젝트까지 완벽 가이드.
-
Tailwind CSS 완벽 가이드: 유틸리티 우선 CSS 프레임워크
Tailwind CSS를 활용한 효율적인 스타일링 완벽 가이드. Bootstrap 대비 장점, 설치부터 커스터마이징, 다크모드, 반응형 디자인, 성능 최적화, 컴포넌트 재사용 패턴까지 실전 예제로 학습합니다.
-
CSS 선택자 총정리 | 속성·가상 클래스·:has() 선택자 완벽 이해
CSS 선택자에 대해 정리한 개발 블로그 글입니다. 기본·속성·가상 클래스·가상 요소·결합자부터 특이도, :is/:where, :has, :nth-*, 폼/상태 선택자, 성능, 호환성까지 체계적으로 정리합니다.
-
React & Next.js 입문 가이드
React 19·Next.js 15 흐름에서 컴포넌트·Hooks·상태·App Router·Server Components까지 한 번에 잡는 입문 정리. 실전 예제와 코드로 개념부터 활용까지 정리합니다. React·Next.js·Frontend 중심으로 설명합니다.
-
CSS Grid | 그리드 레이아웃 완벽 가이드
CSS Grid: 그리드 레이아웃 완벽 가이드. Grid 기본 개념·Grid Template Columns/Rows로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. CSS·Grid·레이아웃 중심으로 설명합니다.
-
CSS 애니메이션 | Transition, Animation, Transform
CSS 애니메이션: Transition, Animation, Transform. Transition (전환)·Transform (변형)로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다.
-
CSS position 심화 | 포함 블록, 쌓임 맥락, 레이아웃 영향
CSS position 심화에 대해 정리한 개발 블로그 글입니다. position은 “어디에 붙일지”만이 아니라, 요소가 일반 문서 흐름(normal flow)에 남을지 이탈할지를 결정합니다. 이탈한 박스는 부모의 블록 레벨 세로 배치에서 빠지며, 형제와의 마진 병합 관계도 달라집니다.… 개념과 예제 코드를 단계적으로 다루며, 실무·학습에 참고할 수 있도록 구성했습니다. 관련 키워드: CSS, position, 레이아웃, z-index, 쌓임맥락.
-
CSS 기초 | 선택자, 속성, 색상, 폰트
CSS 기초에 대해 정리한 개발 블로그 글입니다. CSS는 HTML이 만든 요소에 색·크기·배치 규칙을 입힙니다. 박스 모델과 Flexbox는 같은 “상자” 관점에서 읽으면 연결됩니다. --- 이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던… 개념과 예제 코드를 단계적으로 다루며, 실무·학습에 참고할 수 있도록 구성했습니다. 관련 키워드: CSS, 스타일, 선택자, 디자인, 캐스케이드.
-
CSS 애니메이션 | Transition, Animation, Transform
CSS 애니메이션: Transition, Animation, Transform. Transition (전환)·Transform (변형)로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다.
-
HTML/CSS 시작하기 | 웹 개발 첫걸음
HTML/CSS 시작하기에 대해 정리한 개발 블로그 글입니다. HTML(HyperText Markup Language)은 문서의 뼈대와 의미를 표시하고, CSS(Cascading Style Sheets)는 보이는 모양을 규칙으로 덧씌웁니다. 특징: - ✅ HTML: 제목, 문단,… 개념과 예제 코드를 단계적으로 다루며, 실무·학습에 참고할 수 있도록 구성했습니다. 관련 키워드: HTML, CSS, 웹개발, 프론트엔드, 입문.
-
반응형 웹 디자인 | 미디어 쿼리와 모바일 최적화
반응형 웹 디자인: 미디어 쿼리와 모바일 최적화. Viewport 설정·미디어 쿼리로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. CSS·반응형·미디어쿼리 중심으로 설명합니다.
-
CSS 박스 모델 | Margin, Padding, Border 완벽 정리
박스 모델·사용값·퍼센트 기준·BFC·마진 병합·box-sizing까지. 레이아웃 엔진이 너비·마진을 확정하는 순서와 병합이 끊기는 조건을 고급 관점에서 정리합니다. CSS 박스 모델은 모든 HTML 요소를 상자로 보는 관점입니다. 내용물(Content)은 상자 안 물건, padding은 완충재, border는 상자 테두리, margin은 상자 바깥의 간격이라고 이해하시면 레이아웃이 잡힙니다.
-
CSS Flexbox | 플렉스박스 레이아웃 완벽 가이드
CSS Flexbox: 플렉스박스 레이아웃 완벽 가이드. Flexbox 기본 개념·Flex Direction (방향)로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. CSS·Flexbox·레이아웃 중심으로 설명합니다.
-
HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트
HTML 기본 태그에 대해 정리한 개발 블로그 글입니다. HTML 태그는 브라우저와 검색 엔진이 읽을 구조와 의미를 표시합니다. 이후 박스 모델에서 다루듯, 대부분의 요소는 화면에서 상자로 그려집니다. --- 이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수… 개념과 예제 코드를 단계적으로 다루며, 실무·학습에 참고할 수 있도록 구성했습니다. 관련 키워드: HTML, 태그, 웹개발, 마크업, DOM.