220411 강의 정리
강의 전후 질문
유의적 버전(Semantic Versioning, SemVer)
- 버전에 의미가 있다는 이야기로, 패키지를 이용하는데 있어 버전을 일치시키는 것은 매우 중요합니다.
Major.Minor.Patch
ex) 12.14.1
- Major : 기존 버전과 호환되지 않는 새로운 버전.
- Minor : 기존 버전과 호환되는 새로운 기능이 추가된 버전
- Patch: 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전
2. script태그의 defer
defer
브라우저가 스크립트 문서 분석 이후에, 그러나 DOMContentLoaded 발생 이전에 실행해야함을 나타내는 불리언 속성입니다.
defer 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 DOMContentLoaded 발생을 막습니다.
script태그가 HTML구조 분석 후 동작하도록 만드는 방법
<head>안에 있는<script>에 defer 속성을 추가해서 브라우저가 JS를 HTML 구조를 분석한 이후에 동작하도록 만들 수 있습니다.<script>를 HTML 구조가 끝나는 위치</body>앞에 직접 작성해서 브라우저가 JS를 HTML 구조를 분석한 이후에 동작하도록 만들 수 있습니다.
H- TML 구조를 분석한 이후의 JS 이벤트(load) 핸들러로 JS를 작성하는 방법이 있습니다.
예전에는 2번이나 3번이 많이 사용되었지만, 현재는 1번을 가장 권장합니다.- 참고로
<script>에 async 속성을 사용해도 비슷하게 동작할 수는 있지만, 이 속성은 HTML 구조를 분석하는 중(병렬 실행)에 JS가 동작하게 됩니다. 따라서 HTML 구조를 중간에 이해하지 못할 수 있으니, 이 문제를 해결하는 방법으로는 권장하지 않습니다.
3. 스타벅스 예제 만들기에서 유트브영상을 API로 넣은 이유
- ifram태그로 사용하는 경우 음소거가 안되며 사용자들의 트랙픽 통제가 안됩니다. 반면 API로 발급을 하는 경우 API key를 발급 받을 수 있기에 사용자들의 트랙픽 통제를 방지할 수 있습니다.
오늘 배운 내용
✅img태그의 레이아웃 설정.
img태그는 인라인 요소입니다. 인라인 요소는 baseline이 있기 때문에 아래에 빈 공간이 생기게 됩니다. 따라서display: block을 통해 블록요소로 변경을 해 사용을 합니다.
✅블록요소의 width속성 설정 방법
1. display: inline-block;
.container {
display: inline-block;/*최대한 가로너비를 줄일수 있도록*/
background-color: royalblue;
}2. min-width속성 사용
.container {
width: min-content;/*최대한 가로너비를 줄일수 있도록*/
background-color: royalblue;
font-size: 100px;
}
.container img {
display: inline-block;
}3. 추가
min-content와 max-content를 비교해보기
index.html
<div class="container">
<img src="https://heropy.blog/css/images/logo.png" alt="">
heropy!!
</div>main.css
.container {
/*width: min-content;*/
width: max-content;
background-color: royalblue;
}
.container img {
display: block;
}
✅전환효과와 가상클래스선택자
전환효과의 경우 가상클래스선택자에는 부여하지 않는 것이 좋습니다. 대표적으로 hover의 경우 마우스가 요소 밖으로 나갈 때 전환효과 부여되지 않기 때문에 hover속성의 주체인 요소에 전환효과를 적용하는 것을 권장합니다.
예시를 살펴보도록 하겠습니다. .container:hover img에 transition 효과를 준 아래 코드의 경우 hover시에는 효과가 유지되지만 마우스를 뗄떼는 전화효과가 적용되지 않아 매끄럽지 않게 이전의 상태로 돌아가는 것을 확인할 수 있습니다.
.container {
width: min-content;/*최대한 가로너비를 줄일수 있도록*/
background-color: royalblue;
perspective: 600px; /*얼마나 가까이서 볼거냐*/
}
.container img {
display: block;
}
.container:hover img {
transform: rotateX(45deg);
transition: 1s;
}반면 .container img에 transition효과를 준 아래 코드의 경우 마우스를 뗄 때도 매끄럽게 이전 상태로 돌아가며 전환효과가 적용되는 것을 확인할 수 있습니다.
.container {
width: min-content;/*최대한 가로너비를 줄일수 있도록*/
background-color: royalblue;
perspective: 600px; /*얼마나 가까이서 볼거냐*/
}
.container img {
display: block;
transition: 1s;
}
.container:hover img {
transform: rotateX(45deg);
}✅ transition의 속성들
- transition-propery
- 기본 값은 all입니다.
- transition-timing-function
- 전환(transition) 효과의 시간당 속도를 설정. (기본 값 ease)
linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)- ▶gsap ease function
- ▶설명이 잘되어 있는 사이트
- ▶cubic-bezier
- transition-duration
- 지속 시간을 설정합니다.
- transition-delay
- 지연시간을 설정합니다.(기본값 0)
✅변환효과(transform)
변환함수는 띄어쓰기를 통해 여러속성을 순서에 상관 없이 작성할 수 있습니다.단, perspective 함수는 가장 앞쪽에 적어야합니다.
img {
display: block;
}
.container {
width: min-content;
background-color: royalblue;
perspective: 600px;
}
.container img {
transition-duration: 1s;
}
.container:hover img {
transform: perspective(400px) rotateX(45deg) scale(1.2);
}1. transform-origin
- 기본값은 50% 50%이입니다.
/*애초에 선언을 하고 필요한 경우에만 돌려라*/
img {
display: block;
}
.container {
width: min-content;/*최대한 가로너비를 줄일수 있도록*/
background-color: royalblue;
perspective: 600px; /*얼마나 가까이서 볼거냐*/
}
.container img {
transition-duration: 1s;
transform-origin: 100% 0%;
}
.container:hover img {
transform: rotate(45deg) scale(1.2);
/* transform-origin: 100% 0%; */ => 여기다 하면 기준이 hover 시에만 적용되기에 원하는 대로 동작하지 않습니다.
}2. perspective-origin
/*애초에 선언을 하고 필요한 경우에만 돌려라*/
img {
display: block;
}
.container {
width: min-content;/*최대한 가로너비를 줄일수 있도록*/
background-color: royalblue;
perspective: 600px; /*얼마나 가까이서 볼거냐*/
perspective-origin: 50% 0%;
}
.container img {
transition-duration: 1s;
/* transform-origin: 100% 0%; */
}
.container:hover img {
transform: rotateT(45deg);
}3. transform-style
- 기본값 : flat
- 부모와 자식 모두에게 3D효과를 각각 부여한 경우에는 자식요소의 3D효과는 적용되지 않습니다.
따라서 자식요소도 3D효과가 적용될 수 있도록 따로 만들어줘야합니다. - transform-style: perverse-3d;
- ▶transform-style 예제
✅animation
※animation 속성들은 animation을 제어하는 속성들로 실제 애니메이션을 적용하기 위해서는 @keyframes가 필요합니다.
animation 속성들과 기본값
- animation-name: none;
- animation-duration: 0s;
- animation-timing-function: ease;
- animation-delay: 0s;
- animation-iteration-count: 1;
- animation-direction: noraml;
normal,alternative,reverse,alternative-reverse- animation-fill-mode: none;
- ▶animation-fill-mode 예제
- 속성 값으로는
none,both,forwards,both가 있지만 자주 쓰이는none,both를 숙지하는 것을 권장합니다.- animation-play-state: running;
runing,pause- animation
- 단축속성으로 name duration timing-function delay iteration-count direction fill-mode;순으로 작성할 수 있습니다.
애니메이션 프레임
img {
display: block;
}
.container {
width: min-content;
background-color: royalblue;
perspective: 600px;
}
.container img{
transition-duration: 1s;
/* Animaation */
/* animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction:normal;
animation-fill-mode:none;
animation-play-state:running; */
/* animation : ; */
animation-name: rolling;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction:normal;
animation-fill-mode:none;
animation-play-state:running;
}
.container:hover img{
transform : rotateY(45deg);
}
@keyframes rolling {
0% {
transform : rotateY(0deg);
}
100% {
transform : rotateY(360deg);
}
}다단(column-count)
body {
padding: 30px;
}
.container {
padding: 20px;
border: 4px solid;
column-width: 100px;
column-count: 2;
column-gap: normal;
column-rule: 1px solid red;
//단축속성
colums: 100px 2;
}
공부 필요한 부분
- polyfill 공부하기
- CORS란?
0seo