Front-end10 10분만에 적용하는 CSS Flex/Container 기본 개념 문제 상황화면 크기를 조금만 줄여도 아래 이미지처럼 웹 페이지가 깨져 보인다. 목표화면 크기에 상관 없이 웹 페이지가 깨지지 않도록 하고 싶다. -> CSS Flex 를 이용한다! CSS Flex /Container기초 이론아래와 같은 코드를 본 적이 있는가? 하이1 하이2 하이3 컨테이너를 하나 만든 것을 flex container 라고 부르고, 컨테이너 안의 요소들을 flex item 이라고 부른다. 조금 더 쉽게 이해하기 위해서는 아래 그림을 살펴보자.어떤 요소들이 컨테이너에 담겨져 있는데, 컨테이너 박스 자체를 flex container 라고 부르고 컨테이너 안의 요소들을 flex item 이라고 부르는 것이다. CSS Container 개념의 핵심은 컨테이너 크기가 늘어나거나 줄어들.. 2024. 9. 29. 10분만에 이해하는 Around 부트스트랩 템플릿 사용하는 방법 목표아래 이미지와 같이 게시판 댓글을 만들고 싶다. 그런데, 시간이 없으니 템플릿을 사용해서 만들고 싶다. Around 템플릿 사용 방법 Around 사이트에 접속한다.참고로, Around 사이트는 유료 사이트이다.https://around.createx.studio/index.html 사이트에서 다양한 템플릿 페이지와 UI Kit을 제공한다. 그 중에서 사용하고 싶은 템플릿을 찾는다.필자의 경우 Pages > Blog > Single post v.1 에서 찾았다. 결제 시, 다운로드 받았던 폴더(Around-4)에서 가져올 페이지의 파일을 찾는다. 참고로 부트스트랩을 사용하는 경우 Around-4 폴더에서 가져오는 것이 좋다.1) 가져오고자 하는 페이지의 URL을 화인한다. 2) URL에서 확인한 것.. 2024. 9. 28. 10분 안에 마스터하는 swiper 라이브러리 사용 방법 문제 상황/목표이렇게 빙글빙글 돌아가는 것을 넣고 싶다.이렇게 하려면 swiper 라이브러리를 사용한다. 방법1. swiper 라이브러리를 설치한다.터미널에서 아래 명령어를 입력한다.npm i swiper2. swiper 페이지에서 [Resources] > [Demos] 을 선택한다.또는 아래 사이트를 접속한다.https://swiperjs.com/demos Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 3. 가져오고 싶은 demo를 선택하여 코드를 참고한다. 주의 : vue 코드로 옮길 때는 sty.. 2024. 9. 25. Vue3] vue 페이지 내용 다른 vue 페이지에서 사용하기 (Component 이용하여 데이터 옮기기) 학습 목표Header와 Footer은 어느 페이지에서나 사용된다.이때 Header와 Footer을 매번 코딩하지 말고 하나의 Component로 만들어 놓고 사용하면 어떨까? vue3에서 Component을 활용하는 방법을 배워보자. Component 활용하기1. Component로 만들 vue 파일을 만든다.필자의 경우 Header와 Footer을 만들어서 src/common/components 폴더 안에 저장했다. 2. Component 사용하기전체 코드 // 1) 1) 사이에 Component로 만들 vue 파일을 import 한다. 2) ~ 사이 원하는 위치에 태그 형식으로 사용한다. 2024. 9. 19. 이전 1 2 3 다음
