분류 전체보기
-
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..
pagination 2개 사용하기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..
2023.02.18 -
ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있고 aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. aria-label 1-1. aria-label은 모든 html 태그에서 사용할 수 있다. 1-2. 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다. 일반적인 텍스트를 사용해서 영역을 표현하는 경우가 아닌 이미지를 통해 영역을 표현하는 경우 해당 영역이 어떤 영역인지 설명할 수 있..
aria-label , aria-labelledbyARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있고 aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. aria-label 1-1. aria-label은 모든 html 태그에서 사용할 수 있다. 1-2. 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다. 일반적인 텍스트를 사용해서 영역을 표현하는 경우가 아닌 이미지를 통해 영역을 표현하는 경우 해당 영역이 어떤 영역인지 설명할 수 있..
2023.02.18 -
페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지 그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠? 이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다. script로 구현 저는 서울시청 사이트 프로젝트에서탑 버튼을 클릭했을때 위로 가는 동작을 아래 처럼 스크립트로 구현했습니다. $(".fix-btn-..
앵커 시 부드럽게 움직이는 스크롤페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지 그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠? 이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다. script로 구현 저는 서울시청 사이트 프로젝트에서탑 버튼을 클릭했을때 위로 가는 동작을 아래 처럼 스크립트로 구현했습니다. $(".fix-btn-..
2023.02.18 -
📁 서울시청 👉 사이트명 : 서울시청 👉 작업기간 : 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를 또 하..
서울시청📁 서울시청 👉 사이트명 : 서울시청 👉 작업기간 : 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를 또 하..
2023.02.17 -
네이버 마크업을 하다 보니 아이콘들은 img태그가 아닌 :after 혹은 :before를 사용하고 있고 이미지 파일에 모든 아이콘들을 한 파일에 모아둔 것을 가져다가 썼더라구요~ 이런 기법을 '스프라이트'라고 하는데 오늘은 스프라이트 대하여 자세하게 알아보겠습니다! 이미지 스프라이트(Image Sprite)란? 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법을 말합니다. 쉽게 말하자면 각의 이미지를 개별적으로 불러오는 것이 아니라 하나로 뭉친 파일을 불러와 필요 부분만 똑! 똑! 떼어 사용하는 것입니다. 왜 쓰는 걸까? 이미지가 사용될 때마다 웹 브라우저는 서버에게 이미지를 요청해야 합니다. 요청하고 처리되는 과정이 일괄적으로 ..
이미지 스프라이트 기법(Image Sprite)네이버 마크업을 하다 보니 아이콘들은 img태그가 아닌 :after 혹은 :before를 사용하고 있고 이미지 파일에 모든 아이콘들을 한 파일에 모아둔 것을 가져다가 썼더라구요~ 이런 기법을 '스프라이트'라고 하는데 오늘은 스프라이트 대하여 자세하게 알아보겠습니다! 이미지 스프라이트(Image Sprite)란? 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법을 말합니다. 쉽게 말하자면 각의 이미지를 개별적으로 불러오는 것이 아니라 하나로 뭉친 파일을 불러와 필요 부분만 똑! 똑! 떼어 사용하는 것입니다. 왜 쓰는 걸까? 이미지가 사용될 때마다 웹 브라우저는 서버에게 이미지를 요청해야 합니다. 요청하고 처리되는 과정이 일괄적으로 ..
2023.01.26 -
에디터 창 제어 현제 창 닫기 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 + /
VSCODE 단축기 모음에디터 창 제어 현제 창 닫기 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 + /
2023.01.24 -
게임을 이용하여 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..
flex로 정렬하기게임을 이용하여 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..
2023.01.24 -
컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다. 예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위해, CSS를 이용하여 img 나 video 요소같은 오브젝트들을 조정해야 되는데 방법이 결코 녹록치 않다. 이번 시간에는 background-img 혹은 img 태그로 이미지를 가져와, 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고 비율을 조정해 꾸밀때, 어떤 css 속성을 사용하여 다루는지 3가지 방법에 대해 한방 정리하는 시간을 가져보자. background 속성을 이용해 조절 background-size 속성 먼저 css의 background-img : url() 속성을 통해 이미지를 불러와 사용할때, 사이즈를 조절하는 방법을..
이미지 사이즈 비율 맞추는 3가지 방법컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다. 예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위해, CSS를 이용하여 img 나 video 요소같은 오브젝트들을 조정해야 되는데 방법이 결코 녹록치 않다. 이번 시간에는 background-img 혹은 img 태그로 이미지를 가져와, 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고 비율을 조정해 꾸밀때, 어떤 css 속성을 사용하여 다루는지 3가지 방법에 대해 한방 정리하는 시간을 가져보자. background 속성을 이용해 조절 background-size 속성 먼저 css의 background-img : url() 속성을 통해 이미지를 불러와 사용할때, 사이즈를 조절하는 방법을..
2023.01.24