💻 오늘 배운 것
- CSS
1-1. 움직이는 웹사이트 : transform, transition, animation
1-2. 반응하는 웹사이트 : media query- 모바일 웹 만들기
2-1. 차원 결정요소 Position : static, relative, absolute, fixed
1. CSS
1-1. 움직이는 웹사이트
(1) Transform
: 특정 영역의 요소를 변형 하는 효과
< 속성 >
(1) rotate(0deg) : 입력한 각도만큼 회전
(2) scale(0,0) : 비율을 변형. width와 height를 0, 0 만큼 확대
(3) skew(0deg, 0deg) : x,y 축을 기준으로 입력한 각도만큼 비틀기
(4) translate(0px, 0px) : x,y 거리만큼 이동
<style>
.transition {
transform : rotate(-25deg) ;
transform : scale(2, 0.5);
transform : skew(10deg, 10deg);
transform : translate(100px, 200px);
}-> 시계 반대반향으로 25도 회전하고 가로는 2배, 세로는 0.5배 확대하고 x,y축 기준으로 10도씩 비틀고 x축으로 100px, y축으로 200px 이동해라.
❗ 하지만, 위처럼 작성하면 우선순위에 따라 가장 마지막에 작성한 translate만 적용된다. 모든 속성을 적용하고 싶다면 한 줄에 써주자.
transform : rotate(-25deg) scale(2, 0.5);(2) Transition
: 특정 요소가 변화하는 과정, 전환을 보여주는 효과
< 속성 >
(1) transition-property : 전환 효과를 추가할 요소 설정
(2) transition-duration : 전환 효과가 지속되는 시간
(3) transition-timing-function : 전환 효과의 속도
(4) transition-delay : 전환 효과 재생 전 지연 시간
<style>
.transition {
transition-property : width;
transition-duration : 3s;
transition-timing-function : linear;
transition-delay : 2s;
</style>-> width 요소를 3초동안, 속도는 일정하게, 그러나 동작 시행 후 2초 뒤에 시작해라
❗ 여기서 필요한 건, 어떤 동작이 일어나면 transition 효과가 일어날지가 정해져 있지 않으면 아무런 변화도 일어나지 않는다는 것. 그래서 가상 선택자를 사용한다. 기존 선택자는 HTML에서 태그, 아이디, 클래스를 의미했다. 가상 선택자는 CSS에서 미리 만들어둔 클래스로 '마우스를 올렸을 때'라는 조건을 가지고 있다.
<style>
.transition { transition : width 3s linear 2s; }
.transition:hover { width : 300px; }
</style>❗ 항상 duration이 먼저 나온 다음 delay가 나와야 한다.
-> 마우스를 올리고 2초 뒤에 width 요소를 3초동안, 속도는 일정하게 300px로 변경해라.
(3) Animation
: 조건에 상관없이 어떤 이벤트를 적용하고자 할 때
< 속성 >
(1) animation-name : 애니메이션 이름 만들기
(2) animation-iteration-count : 애니메이션 반복 횟수
(3) animation-direction : 애니메이션 진행 방향
(4) animation-duration, timing-function, delay : transition과 동일
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name : changeWidth;
animation-duration : 3s;
animation-timing-function : linear;
animation-delay : 1s;
animation-iteration-count : 6;
animation-direction : alternate;
}
@keyframes changeWidth {
from { width:300px; }
to { width : 600px; }
}1-2. 반응하는 웹사이트
(1) Media query
: 단말기의 유형과 어떤 특성이나 수치(화면 해상도, viewport 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용. 반응형, 적응형과 같은 모바일에 대응하는 웹사이트를 만들 수 있음.
- 반응형 : 웹사이트 방문 후 브라우저 폭 변화가 있을 때 자연스럽게 변하는 것
- 적응형 : 폭 변화가 있을 때 레이아웃이 확 변하는 것
< 속성 >
(1) (min-width : 0px) : 브라우저 가로폭의 최소 px
(2) (max-width : 0px) : 브라우저 가로폭의 최대 px
-> 브라우저의 가로폭이 최소 ~ 최대 사이에 있을 경우 @media 의 속성으로 대체
❗ <meta name="viewport} content="width=device-width, initial-scale=1.0">를 적어야 하는데 이는 데이터를 설명하는 데이터, meta 데이터로 <head> 에 작성한다. viewport는 현재 보고있는 영역을 의미하고 initial-scale은 처음 로딩되었을 때의 줌 레벨을 뜻한다.
또한, Media query는 외부 영역의 CSS 속성을 상속받는다. 즉, 외부에서 지정한 속성은 Media query에서 지정하지 않을 경우 그대로 반영되어 해당 내용을 삭제하고 싶다면 속성 : 속성값; 에서 속성값을 none을 작성해줘야 한다.
2. 모바일 웹 만들기
2-1. 차원 결정요소 Position
: 2차원인지 3차원인지를 결정
- 2차원의 특징 : 부모 자식간에 발생하는 마진 병합 현상, 자식의 높이값에 영향을 주는지
- 3차원의 특징 : top, right, bottom, left의 속성
(1) static : 2차원
(2) relative : 2차원, 3차원 교집합. 부모에 대해서 상대적, 부모태그에 의해서 위치가 결정된다. 따라서 left, bottom에 변화를 주면 첫번째 이미지처럼 위치가 옮겨간다. 부모 또한 position : relative일 때 변화가 생기면 함께 이동한다.
.png)
(3) absolute : 3차원. 마치 공중부양한 것 처럼 위에 얹어진다. 첫번째 사진을 보면 부모로부터 자유로워져서 자신의 크기를 가진다. 따라서 전체 크기도 부모의 속성이 아닌, 자신의 컨텐츠 만큼의 크기만 가진다. 아래에 있던 fixed가 한 칸 올라온 것을 알 수 있다. 다만 left에 0을 주면 relative처럼 자신이 있던 원래 자리로 돌아가는 것이 아니라 부모의 위치를 기준으로 0에 이동한다. 이 때의 조건은 부모가 static이 아니어야 한다.
.png)
.png)
(4) fixed : 3차원. 위에서 2번째 사진에서 속성을 변경하지 않은채 fixed만 변경했을 경우 첫번째 사진처럼 변한다. absolute처럼 fixed도 상단에 올라와서 아래의 hello가 위로 올라왔다. 크기도 컨텐츠만해졌다. absolute와 다른 점은 left를 0으로 변경하면 가장 처음의 태그, 시조 태그로 거슬러올라가 자리를 잡는것이다. 스크롤도 무시하고 계속 고정되어 있기 때문에 상단바의 햄버거 메뉴를 생각하면 이해하기 쉽다.
.png)
💻 하루를 마치며
사아실 오늘 배운건 이것보다 훨씬 훨씬 훨씬 더 많았다. 하지만 어제 실습강의에서 배웠던 이론들과 오늘 내용까지 함께 하려니 집중력이 너무 떨어져서 잘 이해가 안간다. position 같은 경우도 이론으로 확인하는 건 이해가 더뎌서 직접 만들어보면서 요리저리 옮겨봐야 할 것 같다. 영문 타자 속도를 올리고 싶다. 점점 사용하는 속성, 특성, jquery 어쩌고 저쩌고 @로 열고 $로 열고 하는데 하나도 이해가 안가서 제대로 정리하고 싶다. 추석 연휴동안 한 번 다시 정리하고 싶은데 사실 복습 정리보다 새로운거 미리 준비하는게 더 맞는게 아닌가 싶기도 하다. 힝구 어려워...
