직장인인강

오늘의 강의에서는 슬라이드 하단의 인디케이터와 관련된 이벤트들을 작성한다. 인디케이터와 관련된 이벤트 내용은 다음과 같다. 인디케이터 개수가 슬라이더 개수와 일치하도록 동적으로 생성하기 활성화된 인디케이터에는 특정한 클래스를 추가해주기 인디케이터를 클릭하면 해당 인덱스와 일치하는 슬라이드로 이동하고 해당 인디케이터에 활성화 클래스를 붙이기 1. 인디케이터 개수 동적으로 생성하기 HTML의 구조를 보면 indicator-wrap 안에는 ul이 들어있다. 그리고 ul 안에 슬라이드 개수만큼의 li를 동적으로 생성할 수 있도록 코드를 작성할 것이다. // 동적으로 인디케이터 생성 createIndicator() { // 여러개의 엘리먼트를 추가할때 사용. 렌더되지 않는다. // 결과적으로 ul 안에 들어가는 ..

오늘의 강의에서는 다음과 이전 버튼의 이벤트를 걸어주기로 했다. 슬라이더의 전체적인 스크립트는 ImageSlider.js 파일을 생성한 뒤, class를 작성하기로 했다. class ImageSlider { #currentPosition = 0; // 현재 슬라이더의 위치 #slideNumber = 0; // 슬라이드의 개수 #slideWidth = 0; // 슬라이드의 너비 sliderWrapEl; sliderListEl; nextBtnEl; previousBtnEl; // class에서 인스턴스가 만들어질때 실행되도록 넣어줌 constructor() {} // element 담아둠 assignElement() { this.sliderWrapEl = document.getElementById('slid..

위의 이미지가 슬라이드로 사용될 기본 구조이다. 좌우의 버튼과 오른쪽 하단의 일시 정지, 재생 버튼의 아이콘을 사용하기 위해서 폰트어썸 패키지를 설치해준다. https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 폰트어썸을 사용하는 방법에는 여러가지가 있지만 이번에는 npm을 통해 설치하기로 했다. 아래의 명령어를 작성해서 패키지를 설치해준다. npm install --save @fortawesome/fontawesome..

프로젝트 개요 이번 프로젝트는 이미지 슬라이드를 만드는 프로젝트이다. 개발환경은 지난 프로젝트와 마찬가지로 웹팩 개발환경이 셋팅될 것이다. 레이아웃은 HTML과 CSS를 사용해서 구성될 것이다. 대략적인 구조는 다음과 같다. 슬라이드 next, prev 버튼 인디케이터 자동재생 버튼 슬라이드는 이미지가 들어갈 부분이다. next와 prev 버튼은 클릭하게 되면 이미지가 각각 오른쪽-왼쪽, 왼쪽-오른쪽으로 이동해 현재 나타나는 슬라이드를 변경할 수 있게 한다. 인디케이터는 게시판의 페이지네이션과 같다. 각각의 인디케이터를 클릭하게 되면 해당하는 이미지 슬라이드로 이동하게 된다. 예를 들어 5번째 인디케이터를 클릭하면 내가 어느 이미지를 보고 있더라도 5번째 이미지로 이동하게 된다. 마지막으로 자동재생 버튼..

마우스 이벤트도 키보드와 마찬가지로 특수키를 제외하고 키가 클릭되었을때 이벤트가 발생하도록 해야한다. 키가 클릭되었을때 active 클래스를 추가해 요소의 색상이 변해야 하고, input에도 값이 들어가야한다. 키보드와 마찬가지로 모든 각각의 key 요소에 이벤트 핸들러를 할당하는 것이 아니라 요소를 모두 감싸고 있는 키보드 엘리먼트에서 이벤트 핸들러를 작성한다. 즉, 이벤트 위임을 사용하는 것이다. 마우스 클릭시 효과 주기 #addEvent() { // ... this.#keyboardEl.addEventListener( "mousedown", this.#onMouseDown.bind(this) ); document.addEventListener("mouseup", this.#onMouseUp.bind..

keyboard.js 리팩토링 리팩토링 전 #assignElement() { this.#switchEl = document.getElementById("switch"); this.#fontSelectEl = document.getElementById("font"); } 리팩토링 후 #assignElement() { // document단이 아닌 container단에서 요소를 찾음으로 비용이 절감됨 this.#containerEl = document.getElementById("container"); this.#switchEl = this.#containerEl.querySelector("#switch"); this.#fontSelectEl = this.#containerEl.querySelector("#..

가상 키보드에 기본모드 / 다크모드를 적용해 주기 위해서 html 태그에 theme 라는 커스텀 속성을 지정해주었다. theme의 값이 빈 문자열이면 기본 모드, dark-mode이면 다크모드를 적용해 줄 것이다. 코드로 나타내면 아래와 같다고 할 수 있다. 그리고 다음은 css에서 다크모드가 실행될때 적용될 부분을 작성해주었다. 기본모드에서 다크모드가 되면 흰색이 검은색이 되는 등 색상 반전이 일어나게 된다. 이것을 설정해주기 위해 css의 filter 속성을 사용한다. filter 속성은 주로 흐림 효과, 색상 변형 등 그래픽 효과를 요소에 적용할때 사용한다. 이미지나 배경, 테두리의 렌더링을 조정할 수 있다. html[theme="dark-mode"] { filter: invert(100%) hue..

🧱 구현 이미지 html 구조 html의 전체적인 구조는 다음과 같다. container : 요소들 전체를 감싸는 가장 큰 div menu switch : 다크모드 / 라이트모드를 전환하는 토글 스위치. select-box : 폰트를 전환할 수 있는 셀렉트 박스 input-group input : autocomplete="off"(자동완성 끄기 설정) error-message : 한글이 입력되면 나타날 에러 메시지 keyboard row : 키보드의 각 줄 key : 각인이 하나인 타입과 각인이 2개인 타입이 있음. 각인 2개는 span 2개로 구성됨 css구조 display : flex; 아이템들의 정렬을 위해서 사용하였다. keyboard에서 보면 row가 flex-box 가 되고 key들이 flex..

📚 구현할 내용 웹팩을 활용한 개발 환경 설정 ES Lint, Pritter 설정 HTML, CSS로 키보드 레이아웃 제작 다크모드 폰트 변경 물리적으로 키보드 입력시 가상키보드에도 동일하게 나타나는 이벤트 적용 특수키 제외 한글 입력시 에러 메시지 출력 마우스로 가상키보드 클릭시 실제로 글자가 입력되는 이벤트 적용 특수키 제외 🧱사용 툴 webpack 💜 개발환경 설정 1. package.json 생성 npm init -y 2. 웹팩 패키지 설치 npm i -D webpack webpack-cli webpack-dev-server npm i -D 패키지이름 => devDependencies에 패키지를 설치하겠다. devDependencies는 로컬 개발이나 테스트에 필요한 패키지를 말함. 만약 -D를 ..