반응형
✅Transform
HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있음
움직이기, 회전, 크기변경, 기울기변경 등의 동작 제공
CSS 좌표 체계
x, y, z 좌표를 갖음
기준점 : 브라우저의 왼쪽 상단
transform을 위해 제공되는 메소드
translate()
x축 또는 y축 이동
#trans {
transform: translate(100px, 50px);
}
rotate()
시계방향 또는 반시계방향으로 회전
#rotate {
transform: rotate(30deg);
}
scale()
x축 또는 Y축으로 확대/축소
scale(x축 배율, y축 배율)
#scale_inc {
transform: scale(1.5, 2);
}
skew()
- skew() : x축과 y축 방향으로 기울임
- skewX() : x축 기준으로 기울임
- skewY() : y축 기준으로 기울임
#skew_x {
transform: skewX(20deg);
}
matrix()
- matrix() 메소드는 모든 transform 메소드를 한 줄에 설정할 수 있도록 해줌
- x축 배율, y축 기울임y, x축 기울임, y축 배율, x축 이동, y축 이동 순
[문법]
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
#matrix {
transform: matrix(2, 0.3, 0.2, 1.3, 150, 100);
}
✅Trasition (전환)
정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있음
Transition을 위해 제공되는 속성
transition
마우스 hover 했을때, 1초동안 요소의 너비가 3배로 늘어나는 예제
div.keyboard {
width: 100px;
transition: width 1s;
}
div.keyboard:hover { width: 300px; }
transition-delay
마우스 hover 했을때, 전환 효과가 지연시간 설정 예제
#resize {
height: 100px;
width: 150px;
transition: width 1s, height 2s;
transition-delay: 1s;
}
#resize:hover { width: 300px; height: 300px; }
transition-timing-function
전환(transition) 효과의 시간당 속도를 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 Transition</title>
<style>
div {
background-color: orange;
height: 50px;
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
-webkit-transition: width 1s;
transition: width 1s;
}
#div_01 {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
#div_02 {
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#div_03 {
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
#div_04 {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#div_05 {
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>전환(transition)의 속도 변화</h1>
<div id="div_01">linear</div>
<div id="div_02">ease</div>
<div id="div_03">ease-in</div>
<div id="div_04">ease-out</div>
<div id="div_05">ease-in-out</div>
<p>각 키보드 위로 마우스를 올려놔 보세요!!</p>
</body>
</html>
✅HTML <meta>
한글을 표현하는 방식(인코딩)
- 2byte or 3byte : 한글, 한자, 일어, 아랍어 등
- 완성형(2byte) : EUC-KR, MS949
- 조합형(3byte) : UTF-8, 초성+중성+종성, 완성형보다 더 많은 한글표현이 가능
HTML 문서에서 사용하는 문자셋을 인코딩(필수)
<meta charset="UTF-8">
모든 장치에서 HTML 문서를 잘 보이게 하기 위해 뷰포트 설정(필수)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML 문서에 대한 다양한 정보들(선택)
<meta name="author" content="John Doe">
검색엔진의 키워드를 정의(선택)
<meta name="keywords" content="HTML, CSS, JavaScript">
30초마다 주기적으로 현재 HTML 문서를 새로고침(선택) => ex) 예약시스템
<meta http-equiv="refresh" content="30">✅반응형 웹 디자인(Responsive Web Design, RWD)
- 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말함
- 디바이스 별로 각각 레이아웃(grid)이 달라지는 웹
Flex는 한 방향 레이아웃 시스템이고 (1차원), Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)
grid
✅미디어 쿼리
- 화면크기 마다 각각 다르게 CSS를 적용하는 것
- 화면 사이즈를 인식해 서로 다른 CSS를 적용시켜줌
- 보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해줌
- 화면 크기가 변할때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있음
- if문과 비슷하게 작동함
@media (max-width: 800px) {
.small-tomato {
background-color: tomato;
}
}
[생활코딩-미디어 쿼리 소개] https://youtu.be/aA4xunvDWU8
[생활코딩-미디어 쿼리 써먹기] https://youtu.be/qe3nSIg2k3Y
✅Bootstrap
웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크
하나의 CSS로 휴대폰, 태블릿, 데스크탑 등 다양한 기기에서 작동
부트스트랩(bootstrap) 장점
- 많은 시간 절약
- 반응형 웹 가능
- 일관된 디자인
- 사용하기 쉬움
- 브라우저와의 호환성
- 오픈소스
부트스트랩 사용환경
CDN 방식
<!-- bootstrap 에서 제공하는 CSS 사용을 위한 주소 불러오기 -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
">
<!-- bootstrap 에서 사용하기 위한 jQuery 불러오기 -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></sc
ript>
<!-- bootstrap 에서 사용하기 위한 ajax 불러오기 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min
.js"></script>
<!-- bootstrap 에서 제공하는 JavaScript 불러오기 -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"><
/script>반응형
'Front-End > HTML & CSS' 카테고리의 다른 글
| html과 css를 이용하여 웹 화면 구현해보기(1) (0) | 2023.02.07 |
|---|---|
| CSS(2) (0) | 2023.02.06 |
| CSS(1) (0) | 2023.02.03 |
댓글