JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자. 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 ..

Swiper 페이징은 다음 코드로 추가할 수 있지만 오직 하나의 타입 밖에 사용할 수 없다. const swiper = new Swiper('.swiper', { pagination: { el: '.swiper-pagination', type: 'bullets', }, 하지만 웹사이트를 만들다보면 Swiper 2개를 동시에 사용해야하는 상황이 발생할 수 있다. 원리는 간단하다. Swiper가 총 2개 필요한데 하나는 메인이 되는 Swiper로, 슬라이드와 페이징 하나(위 예제에서는 Fraction 혹은 Progressbar)를 실행하고 나머지 하나는 다른 페이징 형태 하나를 실행한다. 그리고 controller로 메인 Swiper가 서브 Swiper를 제어하도록 한다. var mainSwiper = ne..

ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있고 aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. aria-label 1-1. aria-label은 모든 html 태그에서 사용할 수 있다. 1-2. 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다. 일반적인 텍스트를 사용해서 영역을 표현하는 경우가 아닌 이미지를 통해 영역을 표현하는 경우 해당 영역이 어떤 영역인지 설명할 수 있..

페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지 그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠? 이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다. script로 구현 저는 서울시청 사이트 프로젝트에서탑 버튼을 클릭했을때 위로 가는 동작을 아래 처럼 스크립트로 구현했습니다. $(".fix-btn-..

📁 서울시청 👉 사이트명 : 서울시청 👉 작업기간 : 3일 👉 사용언어 : HTML5, CSS3, JQuery 👉 라이브러리 : Swiper 👉 분류 : 적응형 PC, 클론코딩 👉 URL : https://codenablog.github.io/Seoul-cityhall/ ✨POINT ✔️ 시멘틱웹에 유의하며 작성 ✔️ swiper custum 💡 레이아웃 서울시청 사이트는 class: common-inner로 전체 width값만 잡아주었다. 그리고 section마다 다른 inner값을 사용하기 때문에 섹션들의 묶음은 inner1 ,inner2…등으로 클래스 명을 주었다. 위 이미지 처럼 3개의 section의 위 아래에 padding값을 넣어주어야 할때를 위해 section을 묶어주는 inner를 또 하..

네이버 마크업을 하다 보니 아이콘들은 img태그가 아닌 :after 혹은 :before를 사용하고 있고 이미지 파일에 모든 아이콘들을 한 파일에 모아둔 것을 가져다가 썼더라구요~ 이런 기법을 '스프라이트'라고 하는데 오늘은 스프라이트 대하여 자세하게 알아보겠습니다! 이미지 스프라이트(Image Sprite)란? 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법을 말합니다. 쉽게 말하자면 각의 이미지를 개별적으로 불러오는 것이 아니라 하나로 뭉친 파일을 불러와 필요 부분만 똑! 똑! 떼어 사용하는 것입니다. 왜 쓰는 걸까? 이미지가 사용될 때마다 웹 브라우저는 서버에게 이미지를 요청해야 합니다. 요청하고 처리되는 과정이 일괄적으로 ..

에디터 창 제어 현제 창 닫기 Ctrl + w 닫은 창 닫기 Ctrl + Shift + t 사이드바 토글 Ctrl + b 사이드바-탐색기 Ctrl + Shift + e 사이드바-전체 검색 Ctrl + Shift + f 에디터 확대 Ctrl + (=) 에디터 축소 Ctrl + - 소스코드 편집 들여쓰기 Tab 혹은 Ctrl + ] 내어쓰기 Shift + Tab 혹은 Ctrl + [ 아래에 행 삽입 Ctrl + Enter 위에 행 삽입 Ctrl + Shift + Enter 현재 행 이동 Alt + ⬆️⬇️ 현재 행 복사 Alt + Shift + ⬆️⬇️ 현재 행 삭제 Ctrl + Shift + k 주석 토글 Ctrl + /

게임을 이용하여 CSS기초 flex 마스터하기 ! flex를 모르는 초보자라도 쉽게 게임으로 이해할 수 있는 사이트를 이용하여 flex 테그들을 공부하였다. 개구리를 연잎에 올리는 방법을 코드로 치면 다음단계로 넘어가는 간단한 게임이지만 한눈에 보기 쉽게 사용해볼 수 있다는게 큰 장점이라고 생각한다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com flex의 정렬 테그 정리 1. 가로 정렬하기 justify-content: flex-start : 요소들을 컨테이너의 왼쪽으로 정렬합니다. justify-content: flex-end : 요소들을 컨테이너의 오른쪽으로 정렬합니다. jus..