류지 프로젝트

1. animationanimation은 CSS에서 요소에 움직임(애니메이션 효과)을 부여할 수 있는 속성으로, 시간에 따라 스타일이 자연스럽게 변하도록 만듭니다. @keyframes 규칙을 사용하여 시작부터 끝까지의 상태를 정의하고, animation-name, animation-duration, animation-timing-function 등의 속성을 조합하여 반복 여부, 속도, 지연 시간 등을 설정할 수 있습니다. 예를 들어, 박스를 점점 커지게 하거나, 색을 서서히 바꾸거나, 계속 회전하게 만드는 등 다양한 시각적 효과를 줄 수 있습니다. CSS만으로도 부드럽고 다채로운 인터랙션을 만들 수 있기 때문에 웹 디자인에서 자주 사용됩니다. @keyframes@keyframes는 CSS에서 애니메이션의..

프론트엔드/HTML, CSS 2025. 4. 6. 19:40

1. transformtransform은 HTML 요소에 회전, 크기 조절, 이동, 기울이기 등의 2D 또는 3D 변형 효과를 적용할 수 있는 CSS 속성입니다. 이 속성을 사용하면 요소를 원래 위치나 모양에서 벗어나 다양한 시각적 효과를 줄 수 있으며, 대표적으로 translate()(이동), rotate()(회전), scale()(확대/축소), skew()(기울이기) 함수 등이 있습니다. 예를 들어 transform: rotate(45deg);를 사용하면 요소를 45도 회전시킬 수 있습니다. 애니메이션이나 인터랙션 효과를 만들 때 자주 활용됩니다. 1. translate(x, y) – 이동하기요소를 x축과 y축 방향으로 이동시킵니다.단위는 px, % 등 사용할 수 있습니다.원래 위치에서 얼마나 이동할..

프론트엔드/HTML, CSS 2025. 4. 6. 18:18

1. 미디어쿼리미디어쿼리는 웹 페이지가 다양한 장치(예: 데스크톱, 태블릿, 스마트폰 등)의 화면 크기나 해상도에 맞게 스타일을 다르게 적용할 수 있도록 도와주는 CSS 기능입니다. @media 규칙을 사용하여 특정 조건(화면 너비, 높이, 방향 등)에 따라 CSS를 분기하여 반응형 웹 디자인을 구현할 수 있으며, 이를 통해 사용자에게 보다 최적화된 화면 구성을 제공합니다.@media (조건) { /* 이 조건에 맞을 때만 적용될 CSS */} 주요 미디어쿼리 조건  화면 크기에 따라 배경색이 달라집니다 브라우저 크기를 조절해보세요! 2. 미디어쿼리 활용아래 파일을 이미지를 다운습니다. 아래 코드를 ./css/media.css에 저장합니다.#container { width: 100%;}head..

프론트엔드/HTML, CSS 2025. 4. 6. 17:41

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

프론트엔드/HTML, CSS 2025. 4. 3. 22:29

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

프론트엔드/HTML, CSS 2025. 4. 3. 21:56

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

프론트엔드/HTML, CSS 2025. 4. 3. 21:10

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

프론트엔드/HTML, CSS 2025. 4. 3. 00:01

1. div 태그는 HTML에서 웹 페이지의 구조를 나누거나 묶을 때 사용하는 대표적인 블록 요소입니다. 의미를 가지지 않는 비어 있는 컨테이너로, 주로 CSS를 활용하여 레이아웃을 구성하거나 스타일을 적용하기 위한 용도로 사용됩니다. div는 한 줄 전체를 차지하며, 내부에 텍스트, 이미지, 버튼 등 다양한 요소를 포함할 수 있고, width, height, margin, padding, background-color 등의 CSS 속성과 함께 사용할 때 그 역할이 더욱 분명해집니다. div 예제 이것은 div입니다. 또 다른 div입니다.  2. span 태그는 HTML에서 텍스트나 인라인 요소를 감싸서 특정 부분에 스타일을 적용하거나 구분할 때 사용하는 인라인 요소입니다. 의미를 가지지 않는 태..

프론트엔드/HTML, CSS 2025. 4. 2. 23:43