html5 HTML & CSS 실습: 웹사이트 헤더와 이미지 슬라이더 만들기 프로젝트 개요이 프로젝트는 HTML, CSS를 활용한 레스토랑 웹사이트 제작 실습입니다. "Feane"이라는 레스토랑 테마의 반응형 홈페이지를 구현했습니다.주요 기술 스택HTML5CSS3Font Awesome 아이콘 라이브러리 핵심 구현 기능1. 헤더 네비게이션로고 "Feane" 포함메뉴 항목: Home, Menu, About, Book Table아이콘 및 버튼 추가 (장바구니, 검색, 온라인 주문)2. 슬라이드 배너3개의 슬라이드로 구성라디오 버튼을 이용한 슬라이드 전환각 슬라이드별 다른 텍스트 및 프로모션 메시지 HTML 구조:.head: 최상단 헤더 영역. 로고(h2), 메뉴 목록(ul.menu-bar), 아이콘(i), 버튼(button) 포함..main: 메인 콘텐츠 영역. 슬라이더 배경 이미지(.. 2025. 3. 27. 텍스트 오버레이, 이미지 오버레이 1. 텍스트 오버레이란?텍스트 오버레이는 이미지 위에 텍스트를 겹쳐서 보여주는 디자인 기법입니다. 이를 통해 이미지와 텍스트를 조화롭게배치하여 정보 전달력을 높일 수 있습니다.예시 코드 여기에 제목을 넣으세요 설명을 추가하세요. CSS 스타일.overlay-container { position: relative; width: 100%; max-width: 600px;}.overlay-image { width: 100%; height: auto;}.overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); c.. 2025. 3. 19. CSS 위치 속성 (Position) 완벽 정리 CSS position 속성은 요소의 위치 지정 방법을 결정합니다. 레이아웃 제어의 핵심 개념으로, 다양한 값을 통해 요소의 배치 방식을 조절할 수 있습니다.1. position 값의 종류값설명static기본값. 문서 흐름에 따라 배치relative상대적 위치 지정 (원래 위치에서 offset 적용)absolute절대적 위치 지정 (가장 가까운 positioned 부모 기준)fixed뷰포트 기준 고정 위치 (스크롤 시에도 이동하지 않음)sticky스크롤 시 sticky 영역 생성 (특정 임계점까지 스크롤 시 고정)2. 각 position 값의 특징1) static (기본값)특징: 문서의 자연스러운 흐름을 따름offset 적용 불가: top, right, bottom, left 무시.static-box {.. 2025. 3. 13. CSS3 기본 사용법: 웹 디자인을 위한 필수 가이드 1. CSS3 개요CSS3는 웹 페이지의 스타일을 정의하는 데 사용되는 최신 스타일 시트 언어입니다. CSS3는 이전 버전인 CSS2와 비교하여 많은 새로운 기능과 모듈을 추가하여 더욱 다양한 웹 디자인을 가능하게 합니다. CSS3는 모듈화되어 있어 필요한 부분만 선택적으로 사용할 수 있습니다. 2. CSS 기본 사용법CSS 규칙은 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다.h1 { color: blue; font-size: 24px;} CSS 파일은 .css 확장자를 가지며, HTML 파일과 별도로 작성됩니다. 예를 들어, styles.css 파일을 작성해 보겠습니다./* styles.css */body { background-color: #f0f0f.. 2025. 3. 11. HTML5 기본 태그 소개 HTML5는 웹 개발에 있어 필수적인 기술 중 하나입니다. 특히 HTML5에서 사용하는 다양한 태그들은 웹 페이지의 구조와 내용을 정의하는 데 중요한 역할을 합니다. 이번 포스트에서는 HTML5의 기본 태그에 대해 구체적으로 살펴보겠습니다.HTML5 태그의 개요HTML5는 이전 버전들과 비교해 더 많은 태그와 기능을 지원합니다. 이를 통해 개발자는 더욱 풍부하고 다양한 웹 콘텐츠를 제공할 수 있습니다. 이러한 태그들은 웹 페이지의 의미와 구조를 정의하는 데 중요한 역할을 하며, 각 태그는 특정한 목적과 기능을 가지고 있습니다. 태그의 분류HTML 태그는 여러 가지 방식으로 분류할 수 있습니다. 주로 다음과 같은 카테고리로 나뉩니다:구조적 태그 : , , 등블록 레벨 태그 : , , ~ 등인라인 태그 :.. 2025. 3. 5. 이전 1 다음
