류지 프로젝트

1. positionposition은 CSS에서 요소의 위치를 제어하는 속성으로, 요소가 문서 내에서 어디에, 어떻게 배치될지를 결정하는 데 사용됩니다. 기본값인 static은 일반적인 문서 흐름에 따라 배치되고, relative는 자신의 원래 위치를 기준으로 이동할 수 있으며, absolute는 가장 가까운 위치 지정 부모 요소를 기준으로 배치됩니다. fixed는 브라우저 화면을 기준으로 고정되어 스크롤해도 위치가 변하지 않고, sticky는 일반 흐름을 따르다가 특정 위치에서 고정되는 하이브리드 속성입니다. top, right, bottom, left 같은 좌표 속성과 함께 사용되어, 요소를 정밀하게 배치하거나 겹치게 만들 수 있는 중요한 레이아웃 도구입니다.  2. position의 종류1. rel..

1. 박스 모델박스 모델(Box Model)은 HTML 요소가 웹 페이지에 표시될 때의 기본적인 크기와 여백 구조를 설명하는 개념으로, 웹 레이아웃을 구성할 때 매우 중요합니다. 하나의 요소는 콘텐츠 영역(content)을 중심으로, 그 바깥에 패딩(padding) → 테두리(border) → 마진(margin) 순으로 감싸져 있으며, 이들이 모두 합쳐져 요소의 실제 화면 상 크기를 결정합니다. 예를 들어, width: 100px인 요소에 padding: 10px, border: 1px solid, margin: 20px을 설정하면, 요소는 총 100px보다 더 넓은 공간을 차지하게 됩니다. 이 계산 방식을 제어하기 위해 box-sizing 속성을 사용하며, border-box를 설정하면 width 안에..

1. 폼 태그form 태그는 HTML에서 사용자에게 입력을 받고, 그 데이터를 서버로 전송하기 위한 양식을 만드는 데 사용하는 태그입니다. 이 태그는 , , , 등 다양한 폼 요소들을 포함하며, 사용자가 작성한 데이터를 action 속성에 지정된 URL로 method 속성(GET 또는 POST)을 통해 전송합니다. form은 로그인, 회원가입, 검색창, 설문지 등 다양한 웹 기능에서 핵심 역할을 하며, 자바스크립트와 연동해 동적인 유효성 검사나 실시간 반응형 인터랙션도 구현할 수 있습니다. 웹에서 사용자와 상호작용하는 가장 중요한 도구 중 하나입니다.  2. 주요 폼 요소1. 태그 – 다양한 type 속성 2. 기타 폼 관련 태그  회원가입 ..

1. 시멘틱 태그시멘틱 태그(Semantic Tag)는 HTML5에서 도입된 태그로, 웹 페이지의 구조와 의미를 명확하게 표현하는 태그를 말합니다. 예를 들어, My Website 시멘틱 태그를 활용한 구조 예제 홈 소개 서비스 문의 첫 번째 기사 이것은 첫 번째 article입니다. 독립적인 콘텐츠를 나타냅니다. 두 번째 기사 이것은 두 번째 article입니다. 블로그 포스트나 뉴스에 적합합니다. ..