flex-start /* 시작 부분에 플렉스 아이템 정렬 */
flex-end /* 끝 부분에 플렉스 아이템 정렬 */
center /* 가운데에 플렉스 아이템 정렬 */
stretch /* 플렉스 아이템을 컨테이너에 맞춰 늘림 */
space-between /* 간격을 동일하게 조절하여 아이템 정렬 */
space-around /* 아이템과 컨테이너 양 끝에도 간격을 두어 정렬 */
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
.noto-sans kr-<uniquifier> {
font-family: "Noto Sans KR", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
※ 한글폰트는 파일로 직접 가져온다면 1~2개만 넣기..
한글폰트는 한자까지 해서 너무 무거워서 트래픽을 많이 잡아먹기 때문에.
그리고 용량을 줄이려서 ttf 보단 woff 파일로 쓰자. (ttf의 약 1/3 사이즈)
3. 폰트 안티앨리어싱 폰트 부드럽게 처리
맥북은 원래 폰트를 부드럽게 처리되어 보여줘서 비슷하지만, 윈도우에선 이 효과가 큰 차이를 보인다.
let curPos = 0; // 현재 보여주는 이미지의 인덱스 번호
let positionValue = 0; // 이미지 태그의 위치 값 지정할 변수
const IMAGE_WIDTH = 1280;
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const images = document.querySelector(".images");
// 다음 이미지로 이동하는 함수
function next(){
// 현재 이미지가 마지막 이미지가 아닌 경우에만 이동 가능
if(curPos < 3){
prevBtn.removeAttribute('disabled'); // 이전 버튼 활성화
positionValue -= IMAGE_WIDTH; // 다음 이미지 위치로 이동
images.style.transform = `translateX(${positionValue}px)`; // 이미지 이동 애니메이션
curPos += 1; // 현재 이미지 인덱스 증가
}
if(curPos === 3){
nextBtn.setAttribute('disabled','true');
}
}
// 이전 이미지로 이동하는 함수
function prev(){
if(curPos > 0){
nextBtn.removeAttribute('disabled'); // 다음 버튼 활성화
positionValue += IMAGE_WIDTH; // 이전 이미지 위치로 이동
images.style.transform = `translateX(${positionValue}px)`; // 이미지 이동 애니메이션
curPos -= 1; // 현재 이미지 인덱스 감소
}
if(curPos === 0){
prevBtn.setAttribute('disabled','true');
}
}
function init(){
prevBtn.setAttribute('disabled','true'); // 페이지 로드 시 이전 버튼 비활성화
prevBtn.addEventListener("click", prev); // 이전 버튼에 클릭 이벤트 추가
nextBtn.addEventListener("click", next); // 다음 버튼에 클릭 이벤트 추가
}
init(); // 초기화 함수 호출
