Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

HTML&CSS 정리(6) 변화 속성 ~ 반응형 웹(media 관련) 본문

과거 프로그래밍 자료들/Html&CSS

HTML&CSS 정리(6) 변화 속성 ~ 반응형 웹(media 관련)

평부 2021. 4. 6. 23:38

※ 변화 속성

- 효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 그 과정을 시간적으로 조정할 수 있게 함

 

 

※ 변화속성 종류

- transition-property : 변화 효과를 적용할 속성들 나열

- transition-duration : 변화가 지속되는 시간 지정

- transition-timing-function : 변화의 시작과 끝 타이밍 지정

<transition-timing-function 속성값>

- liner : 처음부터 끝까지 같은 속도

= cubic-bezier(0, 0, 1, 1)

- ease : 느리게 시작하여 점점 빨라졌다가 느리게 끝남

= cubic-bezier(0.25, 0.1, 0.25, 1.0)

- ease-in : 느리게 시작하여 점점 빨라지다가 일정한 속도에 다다르면 같은 속도 유지

= cubic-bezier(0.42, 0, 1, 1)

- ease-out : 일정한 속도의 등속 변화로 시작해서 점점 느려지면서 끝남

= cubic-bezier(0, 0, 0.58, 1)

- ease-in-out : 느리게 시작하여 느리게 끝남

= cubic-bezier(0.42, 0, 0.58, 1)

- cubic-bezier(n, n, n, n) : 처음과 끝의 속도 설정(기본값 :         cubic-bezier(0.25, 0.1, 0.25, 1.0))

- transition-delay : 변화 효과가 지연되는 시간 지정

 

 

 

※ 애니메이션 원리

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
/*모두 다 <style></style>에 적용됨
@keyframes animationname {
 
keyframes-selector{css-styles;}
 
    }
 
//위에서 아래로 움직이는 키 프레임
 
@keyframes boxanimation {
 
from { top: 0px; }
 
to { top: 200px; }
 
    }
 
//키 프레임 안에서 퍼센트 단위로 애니메이션 설정
 
@keyframes animationname {
 
keyframes-selector {
 
css@keyframes aniname {
 
0% 25% 50% 75% 100%
 
        }
 
    }
 
}
 cs

 

※ 애니메이션 속성 종류

- animation-name: @keyframes 애니메이션 이름 지정

- animation-duration : 애니메이션의 지속시간을 초단위로 설정

- animation-timing-function : 애니메이션 시작과 끝 타이밍 지정

- animation-delay : 애니메이션 시작을 지연시키는 시간을 초 단위로 설정

- animation-iteration-count : 애니메이션 반복 재생되는 횟수 설정

- animation-direction : 애니메이션 방향 설정

- animation-fill-mode: 애니메이션을 재생하고 있지 않을 때 속성값 설정

- animation-play-state : 애니메이션 재생 상태 설정

 

 

※ 레이아웃

- 중앙 정렬 : width 속성 지정, margin 속성을 '0 auto'으로 지정

<style>

*{margin:0; padding:0;}

body{margin: 0 auto; width: 700px;}

</style>        

- 수평 정렬 : float와 overflow 사용(자손에게 float 속성 지정, 부모의 overflow 속성에는 hidden 적용

 

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/*첫 번째 방법*/
 
<style>
 
div.container { /*<body>에서 <div class="container"></div>로 적용*/
 
overflow : hidden;
 
}
 
div.item {  /*<body>에서 <div class="item"></div>로 적용*/
 
float: left;
 
margin: 0 3px;
 
padding: 10px;
 
border: 1px solid black;
 
}
 
</style>
 
 
 
/*두 번째 방법*/
 
<style>
 
body {
 
width: 960px;
 
margin: 0 auto;
 
}
 
.clear { /*<div class="clear"></div>*/
 
clear: both;
 
}
 
#aside { /*<div id="aside"></div>*/
 
float: left;
 
width: 260px;
 
}
 
#section { /*<div id="clear"></div>*/
 
float: right;
 
wdith: 680px;
 
}
</style>
 cs

 

 

※ One True 정렬 레이아웃

- 행을 독립적으로 생각해서 나눔(top, left, right, bottom)

- 레이아웃 구성 방법

1) 부모 태그에 고정된 너비 입력

2) 수평 정렬하는 부모 태그의 overflow 속성에 hidden 적용

3) 자손 태그에 적당한 너비 입력 및 float 속성 적용

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
 
body { width: 500px; margin: 10px auto; }
 
#middle { overflow: hidden; }
 
#left { float: left; width: 150px; background: yellow; }
 
#right { float: left; width: 350px; background: blue; }
 
#top { background: green; }
 
#bottom { background: magenta; }
 
</style>
 
 
 cs

 

※ 글자 생략

- ellipsis 클래스 구현

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
 
h1, p {
 
width:300px;
 
}
 
.ellipsis { /*<h1 class="ellipsis"></h1> and <p class="ellipsis"></p>*/
 
white-space: nowrap;
 
overflow: hidden;
 
text-overflow: ellipsis;
 
}
 
</style>
 cs

※ 반응형 웹

- 웹 페이지 하나로 PC, 태블릿, 스마트폰에 맞게 디자인이 자동으로 반응

- 개발 효율성, 유지 보수 용이

- 방법 : 1) 뷰포트 설정

= meta 태그 : 추가적인 웹페이지 정보 제공

ex) <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1">

 

※ meta 태그

1) width : 화면 너비

2) height : 화면 높이

3) initial-scale : 초기 확대 비율

4) user-scalable : 화면 및 추소 가능 여부(yes/no)

5) minimum-scale : 최소 축소 비율

6) maximum-scale : 최대 확대 비율

7) target-densitydpi : DPI 지정

 

- 방법 : 2) 미디어 쿼리 설정(@-규칙)

= @import 규칙 : 외부 스타일을 가져옴

= @font-face 규칙 : 글꼴을 추가로 정의

 

※ media 속성

- link 태그를 입력해서 해당 미디어 쿼리 조건에 맞는 장치만 CSS 파일에 불러올 때 사용

<link rel="style

- 미디어 타입 연산자

= only : '해당 장치에서만'을 나타냄

= not : '해당 장치를 제외한'을 의미

- orientation을 제외한 모든 속성은 min 접수사와 max 접두사 붙일 수 있음

- and 연산자를 사용해 조건 합치기도 가능

 

※ media 특징

1) width : 화면 너비

2) hegith: 화면 높이

3) device-width: 장치 너비

4) device-height : 장치 높이

5) orientation: 장치 방향

6) device-aspect-ratio : 화면 비율

7) color : 장치 색상 비트

8) color-index : 장치에서 표현 가능한 최대 색상 개수

9) monochrome : 흑백 장치의 픽셀당 비트 개수

10) resolution : 장치 해상도

 

ex) orientation 속성 사용 - 화면마다 다른 배경 화면 적용

- 가로 : 파랑색, 세로 : 보라색

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
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1"/>
 
<style>
 
@media screen and (orientation: protrait) {
 
body {
 
background-color: blue;
 
}
 
}
 
@media screen and (orientation: landscape) {
 
body {
 
background-color: purple;
}
}
</style>
 cs

 

저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Html&CSS' 카테고리의 다른 글

[유투브 강의] 드림코딩 by 엘리님 반응형 웹 만들기 공부  (0) 2021.06.03
HTML&CSS 예제(총 4개)  (0) 2021.05.21
HTML&CSS 정리(5) 표 레이아웃 속성 ~ 2차원 변환 함수  (0) 2021.04.05
HTML&CSS (3) 기본선택자 ~ 조합선택자  (0) 2021.04.05
HTML&CSS 정리(4) 상태 선택자 ~ 글자 속성  (0) 2021.04.02
'과거 프로그래밍 자료들/Html&CSS' Related Articles more