root
폰트 적용하는법
- 개발자모드 -> 네트워크 글꼴 눌러서 다운로드!
- assets -> fonts 폴더에 폰트 다운로드
- fonts.css에 아래와 같이 입력.
@font-face {
font-family: '';
src: url('../fonts/폰트명-Regular/Medium/SemiBold/Bold.폰트확장자) format(폰트확장자)';
font-weight: 400;
}
font-Regular -> font-weight: 400;
font-Medium -> font-weight: 500;
font-SemiBold -> font-weight: 600;
font-Bold -> font-weight: 700;- reset.css에 아래와 같이 입력
ex) 영문은 앞의 Gilroy, 한글은 뒤의 NotoSans, 둘다 안되면 마지막의 sans-serif
body{
font-family: 'Gilroy', 'NotoSansKR', sans-serif;- layout.css에 fonts.css import로 걸어주기
@import './fonts.css';Javascript
- 자바스크립트의 경우,
$(function(){}은 한 페이지에 한개만 쓰면 됨.
trigger
- 스크롤 기능의 스크립트를 짰는데, 아래와 같이 스크립트를 작성시, 스크롤을 내리면, 클래스에서 'fix'가 빠지게되는데, 새로고침을 하면 원상태로 되어버림 -> 이유는 스크롤을 해야 스크립트가 발동되기 때문!
이 때, trigger기능을 사용하면, 창이 열리자마자 스크립트를 위에서 아래로 훑고나서 자동으로 적용시킴.
$(function(){
$(window).scroll(function(){
curr=$(this).scrollTop();
if(curr > 0){
$('#header').addClass('fix');
} else {
$('#header').removeClass('fix');
}
}
})
$(window).trigger('scroll')header
검정로고 흰색으로 변경하기
- css에
filter: invert(1);입력
버튼에 클래스
- 버튼에는 항상 click event 때문에 클래스를 줘야한다.
css로 이미지 회전시키기
- 부모요소에서 css에 transform 값을 가지고 있으면, 회전시 transform값을 가져와서 rotate를 입력시켜줘야함
ex)
.parents{
transform: translateY(-50%);
}
.child{
trransform: translateY(-50%) rotate(180deg);
}main
섹션
- 섹션 클래스
<section class="sc-xxx">로 변경
이미지
- 쇼핑몰내에 상품소개 이미지같은건 div class "thumb"로 묶어서 안에 img 넣기
질문리스트
-
아래 캡쳐처럼 pagination-bullet-active의 background가 #fff 로 되어있고, 실제로 활성화된 탭이 흰색이 들어온게 맞는데, css코딩창에는 일반 bullet에 #fff으로, active에는 비워져있는데 이유가 같은 #fff지만, active안된거에는 opacity가 들어가있다고 하셨는데, 앞으로도 모든 pagination의 선택안된거에는 opacity가 들어간다고 생각하면되는건지
-
38:00 ~ header에서 a태그가 길어지는걸 대비해서 span으로 묶어두라고 하신거 뜻을 잘 모르겠음.
-
thumb로 이미지 묶는건 모든 이미지 다묶는건지, 특정한 이미지만 thumb로 묶는건지?
1:21:00 a태그 링크부터!!!
Code log