본문 바로가기

전체 글208

html 코드를 vue 코드로 변환하기 문제 상황다른 라이브러리 사이트에서 좋은 코드를 발견해서 사용하려고 한다.그런데 그 코드가 html으로 되어 있고, 나는 vue 프로젝트에 사용해야 하는 경우 생긴 문제이다. html 코드를 vue에 바로 넣으면 오류가 발생한다!vue 형식에 맞춰 넣어주어야 한다.문제 해결변환 공식HTML/CSS/JSVue3 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)vue 파일의 태그 안에 삽입CDN 등 라이브러리 연결 코드 중 CSS + 아이콘(font awesome  라이브러리 등)index.html 파일의  1단계 : 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)을 vue 파일의 태그 안에 삽입  2단계 : CDN 등 라이브.. 2024. 9. 30.
[HTML/CSS] 3분 안에 웹사이트에 아이콘 넣기 - Font Awesome 5 문제 상황가끔 라이브러리를 활용하여 가져오는 경우 아이콘이 안뜨는 경우가 있다. 문제 해결아래 2개 사이트 중 한 곳에서 원하는 아이콘을 찾으면 된다.필자의 경우 이 글에서 font awesome을 사용하여 아이콘을 추가하려고 한다. w3schools : https://www.w3schools.com/icons/fontawesome5_icons_alert.asp W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and .. 2024. 9. 29.
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.

티스토리툴바