본문 바로가기

css33

📌 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.
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.

티스토리툴바