Seoul clone

SEOUL CITY HALL CLONE

Css Flex와 Position을 적극 활용해 진행한 프로젝트입니다. 바닐라 자바스크립트만을 이용하여 슬라이드 및 탭 등을 직접 적용하여 기본 원리에 대한 개념을 강화시켰습니다. 또한 다양한 레이아웃과 아이콘을 종합적으로 관리했습니다.

기여도 : 개발 100%

글꼴 : NOTOSANS

WEBSITE

PROJECT MAIN TASK

라이브러리 없이 자동 슬라이드 구현

1. 변수 선언, 위치 초기 값 및 이동 값 설정

2. setInterval로 특정 값 n초마다 실행

3. 슬라이드 전부 이동 시 위치 초기화하기
슬라이드 정지, 플레이 구현

1. 상태 초기 값 설정하기

2. if문으로 해당 상태 값 마다 코드 실행하기

3. 버튼 클릭 시 마다 src값 변경 혹은 display 변경하기
글자별 find, 해당 css 변경하기

1. 해당 태그에 특정 문자열이 포함되는 지 확인하기

2. html 코드 직접 삽입 혹은 클래스 추가하기
아이콘 background position으로 관리하기

1. 전체 아이콘 세트 png 설정

2. 개별 아이콘 background-position 변경

slideInterval

setInterval 은 일정시간 마다 함수가 실행되도록 처리하는 내장 함수 clearInterval 은 setInterval 로 설정한 작업을 취소하는 내장 함수입니다.

var slideFirstClone = slideBox.firstElementChild; // 첫번째 슬라이드 복사하여 컨테이너 박스 뒷부분에 추가하기

var cloneFirst = slideFirstClone.cloneNode(true);

slideBox.appendChild(cloneFirst);

// var slideInterval; 선언 생략

slideInterval = setInterval(transitionSlide, 3000); 함수 실행 시 마다 새로운 타이머를 3초마다 실행

if (currentView >= 1) { // 초기값이 1보다 큰 상태일 시 실행

currentView++; // 상태값 + 1 하기

slideBox.style.transform = "translateX(-" + 690 * currentView + "px)"; // 상태 값 x 위치 이동 값

document.querySelector('#con-counter').innerHTML = currentView + "/3" // 해당 상태 바인딩하기

if (currentView === slideImg.length + 1) { // 슬라이드가 끝 도달 시 위치 초기화, 상태 값 초기화

slideBox.style.transition = "0s";

slideBox.style.transform = "translateX(0px)";

currentView = 1;

return slideInterval; , moveAuto(); // 슬라이드 정지 매개변수를 위해 리턴하기, 함수 실행하기

clearInterval로 함수 종료, class 추가 삭제로 디자인 변경하기

버튼 클릭 시 상태 값 카운트를 통해 재생, 정지를 구현하였습니다.

var mainPausePlayBtn = document.querySelector('#main-pauseBtn');

var mainPauseCount = 0 // 상태 초기 값 설정

if (mainPauseCount % 2 == 1) { // 상태 값이 홀수일시 == 재생되고 있을 때

clearInterval(slideInterval); 기존 함수 안 setInterval 종료

mainPausePlayBtn.classList.remove("fa-pause");

mainPausePlayBtn.classList.remove("fa-play"); // 다른 url값 가진 class 탈부착하기

}

if (mainPauseCount % 2 == 0) { // 상태 값이 짝수 일 시 == 정지되어 있을 때

// 위와 동일하므로 생략

moveAuto(); 함수 재시작

}

replace() , :contains

replace 함수는 첫 번째로 발견한 문자열을 지정한 문자열로 치환하여 줍니다.
:contains는 해당 문자열의 특정 문자열이 있는 지 검수하여 추가 코드를 작성할 수 있도록 합니다.

.grid-container {

display: grid; /* 컨테이너 그리드 박스 지정 */

grid-template-columns: repeat(3, 1fr); /* 행열 프레임 설정 */

grid-template-rows: repeat(2, 1fr);

grid-auto-rows: 480px;

grid-gap: 20px;

grid-template-areas: /* 행열 별 영역 지정 */

'a b b'

'a c d'

;

}

/* 자식 아이템 영역 지정 */

.grid-itemA {

grid-area : a;

}

아이콘 한꺼번에 배경이미지처리 후 background-position 처리

아이콘이 너무 많아질 시 이를 정리하기 쉽지 않습니다. 그래서 png 파일로 해당 아이콘들을 모두 모은 뒤 background-position 처리를 하는 네이버 홈페이지의 코드를 참고해 제작해보았습니다.

.link-set > li a::before { 부모와 같은 역할을 할 수 있도록 지정

content: "";

background-image: url(../images/icon_set_service.png);

}

.link-set li.link1 a::before {

background-position: -360px 0; 해당 값으로 position 변경

}

데이터 바인딩

요소에 객체 및 데이터 값을 주소를 통해 전달해주는 것

var carformSlides; // 슬라이드

var clickModel // 클릭된 슬라이드 변수

carformSlides.click(function() {

clickModel = $(this).find('p').text(); // 클릭된 (this)의 텍스트 값 변수 할당

$('.clicked-model').text(clickModel); // 해당 값 바인딩

localStorage.setItem('choose', clickModel); // 로컬스토리지에 값 저장

});

저장소에 있는 값 다른 브라우저에서 가져오기

var clickSub = localStorage.getItem('choose');