HTML & CSS

👩🏼‍💻 HTML이란? HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 작성하는 마크업 언어입니다. 웹 브라우저가 읽어 사람이 보는 웹 페이지로 렌더링해 줍니다. 텍스트, 이미지, 링크, 버튼 등 웹 요소의 위치와 역할을

👩🏼‍💻 HTML 기본 태그 제목 태그 (` ~ `) 문서의 제목 및 소제목에 사용 숫자가 작을수록 글자 크기가 큼 (``이 가장 큼) 문단과 줄바꿈 ``: 문단 (기본 여백 포함) ``: 줄바꿈 ``: 수평선 (스타일 지정 가능) 특수문자 | 기호 |

👩🏼‍💻 HTML 목록 태그의 종류 `` (Ordered List) - 순서가 있는 목록 숫자나 알파벳 등으로 자동 번호 매김 list-style-type 속성으로 A, i, I 등 지정 가능 start 속성으로 시작 번호 설정 가능 `` (Unordered

👩🏼‍💻 `` 기본 구조 action: 데이터를 전송할 URL method: 전송 방식 (get, post) enctype: 인코딩 타입 (예: multipart/form-data) ✅ 주요 입력 필드 (``) 기본 유형 | 타입 | 설명 | |------|------| | text | 일반 텍스트 | | password | 비밀번호 | | c...

👩🏼‍💻 연결 방식부터 단위, 상속, 우선순위, 선택자, 가상 클래스/요소, 사용자 지정 속성, 카운터까지!

👩🏼‍💻 공백 처리, 문자 간격, 텍스트 오버플로우, 대소문자 변환, 웹폰트, 목록 스타일링

👩🏼‍💻 <image> 요소 / background / gradient / 이미지 배치 및 반복

👩🏼‍💻 요소 크기, 박스 모델, display 속성, 여백, 투명도, 보더, 박스 그림자 등

👩🏼‍💻 CSS에서 레이아웃을 다루는 핵심 속성인 float, position, visibility, z-index, clip, columns에 대해 개념 + 예제 코드 + 특징 + 주의사항을 함께 정리!

👩🏼‍💻 Flexbox는 CSS의 레이아웃 구성 방식 중 하나로, 아이템을 가로 또는 세로 방향으로 정렬하고 배치하는 데 최적화되어 있다.

👩🏼‍💻 CSS Grid는 행(Row)과 열(Column)이라는 2차원 구조로 아이템을 배치할 수 있는 CSS의 강력한 레이아웃 시스템이다.

👩🏼‍💻 CSS transition, transform, hover 효과, 수직 정렬 등 인터랙션과 레이아웃 제어에 관한 개념 예제 기반으로 정리!

👩🏼‍💻 Responsive Web, Media Query, Grid Layout, Multi CSS 파일 등을 기반 반응형 웹 디자인 개념 정리

👩🏼‍💻 Bootstrap 5는 반응형 웹 디자인을 위한 CSS 기반 프레임워크로, 컨테이너 시스템, 그리드 레이아웃, 다양한 UI 컴포넌트 및 유틸리티 클래스를 제공한다.