⏰ 2024.11.26 (D+34)
1. Transform이란?
- HTML 요소의 위치, 크기, 회전, 기울기, 확대/축소 등을 조작할 수 있는 기능
- 이를 통해 요소를 화면에서 다양한 방식으로 변형시킬 수 있다
2. Transform의 기본 구성 요소
(1) Translate (이동)
- 요소를 X축, Y축, 또는 Z축 방향으로 이동
transform: translateX(50px); /* 오른쪽으로 50px 이동 */
transform: translate(50px, 100px); /* X축 50px, Y축 100px 이동 */(2) Rotate (회전)
- 요소를 중심축을 기준으로 시계방향 또는 반시계방향으로 회전
transform: rotate(45deg); /* 45도 회전 */
transform: rotate(-90deg); /* -90도 반시계방향 회전 */*/(3) Scale (확대/축소)
- 요소의 크기를 X축, Y축, 또는 전체적으로 확대/축소
transform: scale(2); /* 가로, 세로 2배 확대 */
transform: scale(1.5, 0.5); /* 가로 1.5배 확대, 세로 0.5배 축소 */(4) Skew (기울기)
- 요소를 X축 또는 Y축 방향으로 기울임
transform: skewX(30deg); /* X축 기준으로 30도 기울임 */
transform: skew(30deg, 10deg); /* X축 30도, Y축 10도 기울임 */(5) Matrix (복합 변형)
- 이동, 회전, 확대/축소, 기울기를 하나의 함수로 결합
- 복잡한 변형 효과를 구현할 때 사용
transform: matrix(1, 0, 0, 1, 50, 50);3. Transform 속성의 특징
1) 변형은 독립적이다
- transform 속성으로 변경된 요소는 주변의 다른 요소에 영향을 주지 않는다
- 요소의 레이아웃은 유지된다
2) 중첩 가능
- 여러 개의 변형 함수를 공백으로 구분하여 조합 가능
transform: translateX(50px) rotate(30deg) scale(1.2);3) 3D 변형 지원
- CSS Transform은 2D뿐만 아니라 3D 변형도 가능
transform: rotateX(45deg) translateZ(100px);4. Transform과 Transition의 차이
- Transform: 요소의 위치나 크기를 "바로" 변형시키는 속성
예) transform: rotate(45deg); (즉시 45도 회전) - Transition: 변형이 부드럽게 변화하도록 시간을 추가
transition: transform 2s ease-in-out;
transform: rotate(45deg);5. Transform의 활용 예시
1) 요소 이동
transform: translate(100px, 200px); /* 오른쪽 100px, 아래로 200px 이동 */2) 회전과 크기 조정
transform: rotate(45deg) scale(1.5); /* 45도 회전하고 1.5배 확대 */3) 버튼 효과
button:hover {
transform: scale(1.1); /* 마우스를 올리면 버튼이 커짐 */
}6. Transform 예제 요약
- Transform13_1.html에서는 요소의 크기, 색상, 모양을 변화
- Transform13_2.html에서는 여러 박스가 서로 다른 효과로 부드럽게 변형되도록 설정
- Transform13_3.html에서는 transform 함수를 이용해 요소를 직접 변형시킨 상태 만들기
7. 키프레임 (Keyframes)이란?
- 키프레임은 CSS 애니메이션에서 특정 시점에 요소의 스타일을 정의하여 애니메이션을 설정하는 데 사용
- 애니메이션은 요소의 상태를 시간 비율로 변화시키며, @keyframes 규칙을 사용하여 작성
8. 키프레임의 구성
- @keyframes 규칙
- 애니메이션의 이름과 함께 사용
- 애니메이션 시간의 특정 비율(0%, 50%, 100% 등)에 따라 스타일을 지정
@keyframes animationName {
0% {
/* 초기 스타일 */
}
50% {
/* 중간 스타일 */
}
100% {
/* 최종 스타일 */
}
}9. 키프레임 애니메이션 설정
- 키프레임 애니메이션을 실행하려면 해당 스타일을 적용할 요소에 애니메이션 속성을 지정
- 주요 애니메이션 속성
- 속성 단축
- 모든 애니메이션 속성을 단축하여 사용 가능
animation: animationName duration delay timingFunction iterationCount direction playState;10. 예제
- 기본 애니메이션
: 애니메이션 이름이 example인 키프레임을 사용하여 요소를 점차적으로 크기 변화시키는 애니메이션
@keyframes example {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
div {
animation: example 3s infinite;
}- 여러 시점 정의
: 애니메이션에 중간 단계를 추가하여 더욱 세부적으로 스타일을 설정
@keyframes colorChange {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: green;
}
}
div {
animation: colorChange 4s infinite ease-in-out;
}11. 응용 예제
- 마우스 오버 효과
: 애니메이션을 마우스 오버 상태에서 실행하거나 정지
div {
animation: move 3s infinite;
}
div:hover {
animation-play-state: paused;
}- 로딩 애니메이션
: 키프레임과 nth-child를 사용해 딜레이를 주는 예제
@keyframes bounce {
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
.item {
animation: bounce 1s infinite;
}
.item:nth-child(2) {
animation-delay: 0.2s;
}12. 키프레임 (Keyframes) 장점 & 단점
장점 ➕
- 키프레임을 활용하면 요소의 상태 변화를 세부적으로 제어 가능
- 다양한 속성과 조합하면 창의적인 애니메이션을 쉽게 구현 가능
- JavaScript 없이 순수 CSS로 애니메이션 구현 가능
단점 ➖
- 복잡한 애니메이션은 작성과 유지보수가 어려움
- 브라우저 지원 상황에 따라 애니메이션 품질 상향
13. @import 규칙
📢 정의 ]
- 외부 CSS 파일을 HTML 문서에 연결하거나 CSS 내부에서 다른 CSS 파일을 불러오는 데 사용
💡사용법 ]
@import url("path_to_css_file.css");- 파일 경로를 정확히 지정해야 하며, 상대 경로나 절대 경로를 사용 가능
📖 예시 ]
@import url("styles/import.css");- 위 코드는 styles 폴더 내의 import.css 파일 가져오기
14. @media 규칙
📢 정의 ]
- 특정 조건(예: 화면 크기, 장치 유형)에 따라 다른 스타일을 적용할 수 있게 해주는 기능
💡기본 구문 ]
@media media-type (condition) {
/* 조건이 만족될 때 적용될 스타일 */
}⚙️ media-type ]
- screen: 모니터, 스마트폰 등 화면 기반 장치
- print: 프린터 장치
- all: 모든 장치
🔧 조건 ]
- 최소 너비 / 최대 너비
- min-width: 최소 화면 크기 기준
- max-width: 최대 화면 크기 기준 - 기타
- 색상, 해상도, 방향 등 다양한 조건을 지정 가능
📖 예시 ]
@media screen {
.content {
color: white;
}
}
@media print {
.content {
color: black;
background-color: white;
}
}- screen 조건: 화면에서 글자가 흰색으로 표시
- print 조건: 프린트 시 글자가 검정색, 배경이 흰색으로 표시
15. Import와 Media 규칙을 사용한 CSS 적용
1) CSS 코드
<style>
/* 외부 CSS 파일 가져오기 */
@import url(styles/import.css);
/* 기본 스타일 */
.content {
color: yellow;
background-color: black;
}
/* 화면용 스타일 */
@media screen {
.content {
color: white;
}
}
/* 프린터용 스타일 */
@media print {
.content {
color: black;
background-color: white;
}
}
</style>2) HTML 코드
<div class="content">
<p>
이런 가운데 전세 수요는 폭발하고 있다. 한국감정원의 지난 5일 기준 서울의 전세 수급지수는 121.4로 2016년 1월 이후 가장 높은 수준을 보였다...
</p>
</div>3) 결과
(1) 화면에서의 스타일링 (screen)
텍스트 색상: 흰색
배경 색상: 검정색
(2) 프린트에서의 스타일링 (print)
텍스트 색상: 검정색
배경 색상: 흰색
(3) 외부 CSS 파일
: 추가적인 스타일이 import.css 파일에서 불러와져 적용
15. Import와 Media 규칙을 사용한 CSS 적용 장점 & 단점
장점 ➕
- @import를 사용하면 스타일을 재사용하고 관리하기 편리
- @media는 반응형 디자인이나 프린트 스타일링을 쉽게 구현 가능
단점 ➖
- @import는 로딩 속도 저하
- 복잡한 @media 조건은 관리의 어려움이 발생
16. 반응형 웹 디자인을 위한 예시
📂 ResponseWeb16.html
- 화면 크기에 따라 다른 스타일을 적용하는 @media 쿼리를 사용
1) 주요 구성 요소 설명
(1) @media 쿼리 사용
- 화면 크기에 따라 스타일이 변경
- 화면 너비가 640px 이하일 때, 화면이 100% 너비로 설정되고, #content p 요소의 글자색이 빨간색으로 변경
- 화면 너비가 1000px 이상일 때, #allWrap의 너비는 80%로 설정되며, #content p의 글자색은 파란색으로 변경
- 화면 너비가 641px에서 999px 사이일 때는 #allWrap이 100% 너비로 설정되고, 글자색은 초록색으로 변경
(2) 기본 스타일링
- { margin: 0; padding: 0; font-family: Verdana; }
: 모든 요소에 기본 여백과 패딩을 제거하고, 글꼴을 Verdana로 설정 - #allWrap과 다른 요소들은 margin: 0 auto;를 사용해 가운데 정렬
(3) 자바스크립트 이벤트 처리
- window.onresize 이벤트는 브라우저 크기가 변경될 때 발생
- p 요소의 스타일을 window.getComputedStyle()을 통해 확인하고, 콘솔에 화면 너비와 폰트 크기를 출력
window.onresize = function() {
var p = document.querySelector('p');
var style = window.getComputedStyle(p);
console.log('해상도: %s, 폰트 크기:%s', window.innerWidth, style.fontSize);
};2) CSS 미디어 쿼리 설명
- @media screen and (max-width:640px)
: 화면 너비가 640px 이하일 때 적용되며 콘텐츠가 빨간색으로 변경 - @media screen and (min-width:1000px)
: 화면 너비가 1000px 이상일 때 적용되며 콘텐츠가 파란색으로 변경 - @media screen and (min-width:641px) and (max-width:999px)
: 화면 너비가 641px에서 999px 사이일 때 적용되며 콘텐츠가 초록색으로 변경
3) 각 HTML 요소 설명
- #header
: 페이지 상단에 위치하며, "HEADER"라는 텍스트를 중앙에 표시 - #content
: 콘텐츠 영역으로, 텍스트를 포함되며 이 부분의 스타일이 화면 크기에 따라 변경 - #footer
: 페이지 하단에 위치하며, "FOOTER"라는 텍스트를 중앙에 표시
4) 효과적인 반응형 웹 디자인
- 미디어 쿼리를 통해 다양한 화면 크기에서 웹 페이지의 디자인을 조정 가능
- 작은 화면에서는 콘텐츠가 가독성 있게 표시되고, 큰 화면에서는 넓은 레이아웃을 제공
