[1주차] 20220407 엘리스 TIL (CSS 애니메이션, 반응형 웹)

1강. 움직이는 웹사이트 제작

01. Transform

• transform : 웹사이트의 특정영역에서 오브젝트의 각도를 틀거나, 회전하거나 할 때 사용하는게 transform
• rotate, scale

• rotate(숫자deg) = 입력한 각도만큼 회전(평면적인 회전), 음수도 입력 가능
• scale(x값(width), y값(height)) = 숫자는 비율을 의미한다(width를 x값 만큼 곱해서 출력, height를 y값 만큼 곱해서 출력), 축소를 시키고 싶을 땐 " 0.5 " 와 같은 소숫값을 입력해주면 됨

• skew, translate

• skew(숫자deg(x축), 숫자deg(y축)) = x축 y축을 기준으로 입력한 각도만큼 비틂(입체적인 회전)
• translate(숫자px(x축), 숫자px(y축)) = 선택한 오브젝트의 좌표 변경

• transform을 사용할 때 기억해야할 것 = prefix 접두사

- transform은 CSS3의 최신 언어이다. 따라서 explorer의 하위 버전에선 사용할 수 없다.

다른 버전의 브라우저에서 실행을 원할 경우, prefix를 달면 transform의 사용이 가능해진다!!

<style>
.transition{
	-webkit-transform : translate(100px,200px); /*크롬, 사파리*/
    -moz-transform : translate(100px,200px); /*파이어폭스*/
    -ms-transform : translate(100px,200px); /*익스플로러*/
    -o-transform : translate(100px,200px); /*오페라*/
}
</style>

transform 추가 사항

• 위 코드처럼 transform을 여러 줄 적고 실행하면 맨 마지막줄의 transform만 출력된다 (덮어 씌워짐)
• prefix를 단 태그와 prefix를 달지 않은 태그가 꼭 같이 있어야 한다!!!
• rotate, skew, translate는 음수를 넣을 수 있다( scale은 음수를 넣을 수 없다 )

 

02. Transition

• transition : 변화하는 과정을 보여주고자 할 때 사용
• property, duration

• property : 효과를 적용하고자 하는 CSS 속성
• duration : 효과가 나타나는데 걸리는 시간

• timing-function, delay

• timing-function : 효과의 속도(다양한 속도의 성격들이 존재하는데, 각각의 속도의 성격을 규정할 때 사용하는 것)
• delay : 특정 조건하에서 효과 발동, 1s 는 ' 1초 후 ' 라는 의미

• 가상 선택자 : hover

• CSS에서 미리 만들어놓은 클래스로, ' 마우스를 올렸을 때 ' 라는 조건이 부여된다.

• transition 종합

• 순서주의!!! - 다른 요소들은 border, background 처럼 순서가 상관 없지만, duration과 delay는 순서가 있으므로(duration이 먼저, delay가 그 다음이다) 표기에 주의해야 한다!! (만약 숫자가 하나인 경우, 무조건 duration으로 적용된다.)

<style>     .transition{         transition : width(property) 2s(duration) linear(timing-function) 1s(delay);     }     .transition:hover{width:300px;} </style>

• 위 코드에 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안 속도 일정하게 변하는 애니메이션 효과가 발동된다.
• 주의 : hover 작성할 땐 항상 띄어쓰기를 하지 말고 작성해야한다!!!

03. Animation

• transition : 마우스를 over 했을때와 같은 특정한 조건이 필요.
• animation : 조건에 상관없이 어떠한 이벤트를 적용하고자 할 때 사용

 

animation 속성값들

1. animation-name : 애니메이션 이름 설정(임의로 작성)
2. animation-duration : 애니메이션이 작동되는 총 시간
3. animation-timing-function : 애니메이션 속도의 성격을 규정
4. animation-delay : 몇초후에 동작되게 할 것인가
5. animation-iteration-count : 애니메이션 반복 횟수 (infinite = 무한반복)
6. animation-direction : 애니메이션 진행 방향

※ animation-direction 의 종류 ※

1. 시작을 기준으로 해서 끝으로 가는 것 = normal (from->to, from->to)
2. 끝을 기준으로 해서 시작으로 가는 것 = reverse (to->from, to->from)
3. 시작에서 끝으로 갔다가 다시 끝에서 시작으로 갈 때(반복) = alternate (from->to->from)

* keyframes = animation을 사용하려면 같이 써야하는 명령어 => 변화를 줄 결과값을 안쪽에 입력

.animation{     animation-name : til;     animation-duration : 3s;     animation-timing-function : linear;     animation-iteration-count : infinite;     animation-delay : 1s;     animation-direction : alternate; }	조건
@keyframes til {     from{     width : 600px;     } to {     width : 300px;     } }	(실제 애니메이션을 통해 변화되는) 결과값

• transform과 다르게 animation은 브라우저에 접속하자마자 동작함
• animation-iteration-count 에 6이라고 지정하고, animation-direction : alternate 로 지정하면 6회가 아닌 3회 왕복한다 => from->to / to->from 각각 1번을 1회로 친다.

 

04. Transform & Animation

• transform과 animation이 결합할 때 주의사항

• 순서에 한해선 duration, delay 순서만 주의하기
• prefix - animation도 앞에 prefix를 달 수 있다!! (animation도 CSS3에서 새로 나온 속성이기 때문)

<style>
.box1{
	-webkit-animation: rotation 3s lineat 1s 6 alternate;
}

@-webkit-keyframes rotation{
	from{-webkit-transfrom: rotate(-10deg)}
	to{-webkit-transform: rotate(10deg)}
}
</style>

• animation에 prefix를 사용할 땐 keyframes도 prefix와 함께 쌍을 이뤄서 작성해줘야 한다( webkit 은 webkit 끼리, moz 는 moz 끼리, prefix 를 달지 않았다면 prefix 가 없는 것들 끼리 )
• prefix를 keyframes 앞에 하나 달았다고 해서 끝이 아니라, keyframes 안에 transform 앞에도 달아줘야 한다.

 

05. 메뉴 영역 애니메이션

06. 본문 영역 애니메이션

• transition : all = " transition 코드가 들어있는 곳에서 모든 속성값들에 영향을 주겠다(그 태그가 갖고 있는 모든 CSS 속성을 선택하겠다) " 는 의미로 해석하기
• animation 태그는 적용하고자 하는 클래스 안에 넣어주고, keyframes 는 그 클래스 밖으로 빼줘야 정상적으로 작동된다.
• prefix를 달거면 prefix가 없는 코드 / prefix가 있는 코드 둘 다 만들어줘야 한다!!
• margin : 0 auto = 공간에 대한 명확한 크기를 갖고 있는 Block 요소에서 사용 가능한 방식 -> ex> x축 중앙정렬을 하고싶다! - margin : 0(상하 : 0) auto(좌우 : 자동으로 맞춰라)

 

2강. 반응형 웹사이트 제작

01. 미디어쿼리 소개

• 미디어쿼리란 = pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
• 반응형 / 적응형 차이

1. 반응형 : 브라우저 폭을 줄이거나 늘렸을 때 자연스러운 리사이즈 효과
2. 적응형 : 뚝뚝 끊겨서 레이아웃 / 폰트 크기가 달라지는 사이트들

• 미디어쿼리 media

@media (min-width:320px) and (max-width:800px) { ~ }

• (태블릿으로 접속했는지, 모바일로 접속했는지 직관적으로 아는 법 = 가로 폭 사이즈)
• min-width 와 max-width 로 브라우저 가로폭 설정 (위 코드는 브라우저의 가로폭이 최소 300px, 최대 800px이 되었을 경우 중괄호 안의 CSS속성으로 대체하겠다는 의미)
• 미디어쿼리가 정상적으로 출력되는지 확인하는 법

1. 크롬 - 개발자도구 클릭 : Elements 옆에 있는 기기버튼 클릭해서 모바일로 적용해보며 확인
2. Troy Labs (다음에서 만든 서비스) : 결과물이 서버에 등록되어 있고, 도메인 주소가 존재할 때 사용가능

 

02. 미디어쿼리 사용시 주의사항

• viewport - 미디어쿼리를 사용할 땐 반드시 "뷰포트" 라고 하는 meta 태그의 속성값을 입력해줘야 함 (head 태그 안쪽에)
• meta name="viewport" = " 기기 화면 ", 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미. 너비와 배율을 설정할 때 사용하는 메타태그의 속성 중 하나
• 구체적인 너비와 배율의 설정은 " content " 라는 영역에서 이루어짐

• width=device-width : viewport의 가로폭 = device의 가로폭
• initial-scale=1.0 : 비율은 항상 1.0 으로

• CSS 속성 상속

• 미디어쿼리 외부 영역에 있는 CSS 속성은 상속 받음(입력하지 않아도 적용되어 있음)
• 만약 상속을 받지 않고자 하면 속성값으로 none 입력