24.08.12 총정리-1

 

1. HTML
   • svg
2. CSS
   • @media
   • CSS 변수
   • 의사 클래스/의사 요소
   • 베지에 곡선
   • 폰트
   • Padding/Margin
   • calc()
3. JavaScript
   •  

---

svg

svg를 반응형으로 렌더링 하고자 할 때 임포트한 svg의 태그를 확인.

<svg width="100%" height="100%" viewBox="0 0 126 169" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

 

                . . .

 

 

width와 height 부분을 %등으로 설정해야 이미지가 clip되지 않음.

---

@media

@media (max-width: 575px) {
}

@media (min-width: 576px) and (max-width: 767px) {
}

@media (min-width: 768px) and (max-width: 991px) {
}

@media (min-width: 992px) and (max-width: 1199px) {
}

@media (min-width: 1200px) {
}

위 코드로 반응형 웹을 제작.

위 3개가 모바일-태블릿 환경이고 아래 2개가 데스크탑 환경.

 

CSS 변수

:root {
	--startWidth: 100%;
	--endWidth: 100%;
}

위 코드로 CSS 변수 정의가 가능하고 @keyframes 등 스타일에 사용 가능함.

단 사용시 아래와 같은 코드를 이용해야 함. (var())

@keyframes expand {

        from {

            width: var(--startWidth);

        }

        to {

            width: var(--endWidth);

        }

    }

}

 

@의사 클래스/의사 요소

의사 클래스는 특정 이벤트가 발생하거나 특정 조건 하에 있는 클래스들의 속성을 덮어씌울 때 이용한다.

예시)

.display-box-info-container:nth-child(2) {

    top: 0.416vw;

}

 

의사 요소는 클래스가 관여하는 요소(텍스트 등)의 속성을 덮어씌운다.

문법은 ::(의사 요소)

 

@베지에 곡선

animation의 프레임이 구간 별로 어떻게 돌아갈 것인지 설정해주는 옵션.

예시) 아래 코드의 4번째 인자 부분.

animation: reveal 0.5s 0.3s cubic-bezier(0.2, 0.5, 0.7, 0.75) forwards;

https://cubic-bezier.com/

cubic-bezier.com

 

폰트

@import url("link");

위와 같은 코드를 이용해서 폰트를 임포트하고 속성에 적용할 수 있음.

html 단계에서

<link rel="stylesheet" href="link">

로 임포트 해도 가능.

 

Padding/Margin

padding은 오브젝트 내의 여백, margin은 외부 여백.

padding 설정 => 본인의 위치와 크기는 변하지 않음. 자식 오브젝트가 위치될 때 여백을 침범하지 않음.

margin 설정 => 본인의 위치가 바뀜.

 

calc()

예시 in Js)

image.style.left = `calc(${staticImgLeft} - ${offsetDesktop})`;

calc()로 단위가 다른 두 길이를 계산할 수 있음.

---