|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* background의 크기를 결정하는 태그를 조절 */
html,
body{
margin: 0;
height: 100%;
}
body{
/* 이미지 저장 */
background-image: url('./flower.webp');
/* 이미지 출력횟수 제한.
x축 반복, y축 반복, 단순 반복 사용가능 */
background-repeat: no-repeat;
/* background 크기 조절 cover나 contain(비율조절) 사용 */
background-size: cover ;
/* center center 처럼 x축과 y축으로도 조절 가능 */
background-position: center center;
/* 배경을 어떤방식으로 붙일것인가?
fixed는 배경 크기가 비정상적으로 커지는걸 제한 */
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
|
cs |
<전환 효과>
전환 : 한 요소에 적용된 스타일 값을 다른 속성값으로 변하게 하는 것.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<sty
body{
/* 전환 효과를 적용할 대상 속성 지정 */
transition-property: background-color, width;
/* 전환 효과가 끝나는 시간 제어
property와 세트. 각각 시간다르게 적용가 */
transition-duration: 0s, 5s;
/* 전환 효과가 시작하는 시간 제어 */
transition-delay: 0ms;
/* 전환 효과의 진행 속도 지정 */
transition-timing-function: linear;
}
</style>
|
cs |
transition-timing-function:
linear 속도 일정
ease 중간까지 빨라지다 중간부터 느려짐
ease-in 속도가 느리다가 점점 빨라짐
ease-out 처음 속도가 빠르나, 완료될 때 점점 느려짐
ease-in-out 처음 속도가 느리나, 점점 빨라지다 다시 느려짐
cubic-bezier(p1, p2, p3, p4) ㅡ> 사용자 지정 속도
전환 효과부터 무슨 말인지 모르겠다. 설명을 들어도 와닿지 않는다.
왜 필요한지 적용할 능력이 안되서 그런게 첫번째.
두번째는 앞 내용이 이해가 잘 안되서 그런 것이겠지.
이럴 때는 잘 안들리더라도 차분한 마음으로 영상 완주를 목표로만 공부하는 것이 좋다. 앞을 모르는데 뒤를 어떻게 이해할것인가? 당연히 잘 안되지.
(이런 추가적인 부분은 같이 만들어보면서 차차 배우는 것이다.)
미디어 쿼리: 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술.
반응형 웹페이지란 홈페이지 크기를 늘리고 줄임에 따라 웹 구성이 바뀌는 웹을 의미.
뷰포트: 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기 (휴대폰 화면 크기. 모니터 화면 크기)
meta: vp 단축키로 코드생성.
아래의 코드가 뷰포트를 접속 디바이스의 너비로 지정하라는 코드.
initial-scale =1.0은 화면을 줄여놨더라도. 새로고침하거나 나갔다오면 화면을 다시 원래의 1배율에서 시작하게끔 지정하는 코드
'📚HTML, CSS > 이론 정리' 카테고리의 다른 글
| 웹 UI개발 정리[ css(5)box-model] (0) | 2023.01.26 |
|---|---|
| 웹 UI개발 정리[틀린 것만 복습| html ~css(4)](가상, 선택자, 케스케이딩 등) (0) | 2023.01.25 |
| CSS 특성들(font와 box 제어) (0) | 2023.01.24 |
| CSS 속성, 선택자 , 특정 요소 선택하기 (0) | 2023.01.24 |
| html (멀티미디어 태그, 시멘틱 태그, 글로벌 속성) (0) | 2023.01.19 |