본문 바로가기

CSS7

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.
📌 CSS3 배경, 전환 & 변환, 애니메이션 정리 이번 포스팅에서는 CSS3 배경(Background), 전환(Transition) & 변환(Transform), 애니메이션(Animation)에 대해 자세히 알아보고, 코드를 활용하여 실습해 보겠습니다. 1️⃣ CSS3 배경(Background)CSS3에서는 기존보다 더 세밀한 배경 설정이 가능해졌습니다.배경 이미지의 크기, 위치, 반복 여부 등을 조정할 수 있으며, 여러 개의 배경 이미지를 사용할 수도 있습니다.🔹 주요 속성background-size: 배경 이미지의 크기 조절 (cover, contain, 100% 100% 등)background-origin: 배경 이미지의 시작 위치 (padding-box, border-box, content-box)background-clip: 배경 이미지가 적.. 2025. 3. 14.
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 속성 완벽 가이드 이번 포스트에서는 CSS3의 속성 중 박스 모델, 테두리 속성, 박스 속성에 대해 자세히 알아보겠습니다.CSS3 속성박스 모델(Box Model)테두리(Border) 속성박스(Box) 속성레이아웃(Layout) 속성표(Table) 속성1. 박스 모델 (Box Model)박스 모델은 CSS에서 요소의 크기와 여백을 정의하는 데 사용됩니다. 박스 모델은 다음 속성으로 구성됩니다.width와 height: 요소의 너비와 높이를 정의합니다.padding: 요소의 내부 여백을 정의합니다.border: 요소의 테두리를 정의합니다.margin: 요소의 외부 여백을 정의합니다.박스 모델은 모든 HTML 요소가 사각형 박스로 표현된다는 개념입니다. 박스 모델은 네 가지 주요 구성 요소로 이루어져 있습니다: 콘텐츠, 패딩.. 2025. 3. 12.
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.

티스토리툴바