root
- 자주 쓰이는 값은 아래와 같이 변수로 저장해놓고 쓰자
ex)
:root{
--headerHeight:95px;
}
container{
padding-top:var(--headerHeight);
}- 시안이 없을 경우, 스크린사이즈에 따른 폰트 사이즈 달라지는거 구현하는법,
1) 기존 사이트 320 사이즈로 줄이기
2) 클론사이트도 320 사이즈로 줄이기
3) 클론사이트에 똑같은 폰트사이즈 조금씩 줄여가면서 눈대중으로 비슷한지 보기
4) css에font-size: clamp()사용하기
ex)아래는 .example의 최소 폰트사이즈는 40px, 최대 사이즈는 80px 그 사이(4.1667vw)는 유동적인 값 을 의미.
5) 4)의 유동적인 값은 구글에 px vw 쳐서 계산기로 값 찾아야함.
처음받은 시안에서 1920px(기본 1920px이라고 생각하면됨)일때, 폰트사이즈 80px이라고 적혀있으면 viewportwidth에 1920 입력 후, 폰트px에 80입력하면 맞는 vw값 나옴
6) 나온 값을 clamp 중간에 아래와 같이 입력.
.example{
font-size: clamp(40px,4.1667vw,80px)
}header
- 보통 header 에는 패딩, 높이 주고 header-inner에는 width, margin: 0 auto로 중앙정렬 준다.
- 이 때, header-inner에 안에 로고나, 우측의 메뉴들 세로정렬시, 높이가 필요한데 이때 높이는 header를 상속받게 하기위해 height:inherit을 사용함.
- nav의 경우 보통 id값을 gnb로 주고 사용함.(혼자 꾸며도 되기 때문)
position:absolute의 부모가position:absolute라면, 부모인position:absolute가 기준이 되어서 자식이 움직이게됨.
- 헤더에 공간을 주고 싶을때는, header / main / footer를 다 묶은 뒤, container안에 몰아놓고 container에 padding-top으로 공간을 만든 뒤, 그 높이만큼 header에게 높이를 주자.
ex)
<div id="container">
<header class="header"></header>
<main class="main"></main>
<footer class="footer"></footer>
</div>#contaier{
padding-top:50px;
}
.header{
height:50px;
}- position:fixed의 경우 width값이 없기때문에 width값을 꼭 넣어줘야한다.
main
keyframe(애니메이션효과)
애니메이션효과 줄 때, 사용
- 아래와 같이 keyframe 세팅
ex) name이라는 keyframes에서 0%일때, opacity:0 / 100%일때, opacity: 1;을 적용하라는 뜻.
@keyframes name {
0%{opacity: 0;}
100%{opacity: 1;}
}- 아래와 같이 세팅된 keyframe값 적용
ex) 아래 예제에서 name은 위에서 세팅된 keyframes의 이름 / .2s는 발동되는데 걸리는 시간 / forwards는 마지막수치로 유지를 시켜라! 라는뜻
.test .a{opacity:0;animation: name .2s forwards}- 순차적으로 발동되게 하려면
ex) 0.1초씩 delay를 줘서 순차적으로 설정
.test .a{opacity:0;animation: name .2s forwards}
.test .a:nth-child(1){animation-delay: 0.1s}
.test .a:nth-child(2){animation-delay: 0.2s}
.test .a:nth-child(3){animation-delay: 0.3s}
.test .a:nth-child(4){animation-delay: 0.4s}video 컨트롤
- jQuery에서 video 선택시 선택자뒤에
[0]을 붙여줘야 선택이 된다.
ex)
$('.example video)[0].pause();marquee 영역
- roof되는 영역을 만들 때, 아래와 같이 marque 영역을 만들어 준다.
ex)
<div class="marquee">
<ul></ul>
</div>flex-shrink
- 부모요소에 display:flex가 있으면 자동으로 자식요소에 flex-shrink:1; (수축됨) 이 적용 되어있음. 그러므로 필요에 따라 자식요소에 flex-shrink: 0; 으로 수정해야함.
질문리스트
-
header에서 .sc-visual에 height calc 100vh-var~~~ 줬는데 .swiper에 height :100% 또 주는이유?? 추가로 .swiper에 height100%도 줬는데 img에 또 height 100% 또주는이유??
-
스와이퍼 그림이동하는거에 갑자기 .link에 height:100%를 주게 된이유??... 떠올릴수있는 방법..?
-
marquee 키프레임 에서 (영상 2:03:53) margin값 빼서 폰트 박스? 끼리 딱딱붙어있는데, 어떻게 순식간에 사이공간이 생기는건지..?
-
marquee 0% -> transform: translateX(0) ; marquee 100% -> transform: translateX(-33.3%) ;가 세줄을 display:flex로 쭉 길게 가로로 붙이고, 0%일때 시작점 0 / 100%일때 쭉 길게 가로로 붙인 세개중에 하나라서 -33.3%처리한게 맞는지?
-
미디어쿼리 분기점? 브레이크포인트? 이건 국룰처럼 정해져있는지.. 나누는 px 기준이뭔지?
1:34:00 부터.. 그리고 사진무빙하는거 다시듣고 다시정리하기
Code log