Front-end/Library5 10분만에 적용하는 Finder 부트스트랩 사용 방법 문제 상황예쁜 input 박스를 구하고 싶다.생코딩 하는 것 말고 이미 만들어진 좋은 input 박스를 구해서 쓸 수 없을까?문제 해결부트스트랩 Finder 을 검색하거나 아래 사이트로 접속한다.https://finder.createx.studio/components/input-group.html Finder | Input group finder.createx.studio 원하는 UI를 찾고 원하는 것이 있는 곳에 HTML 버튼을 클릭한다. 그대로 복사해서 사용한다.- 코드 에디터를 켜서 html 문서의 기본 골격 형태를 만든다. (vs code의 경우 ! + enter 을 치면 만들어준다.) - 아까 복사한 코드를 태그 사이에 넣는다. - Finder은 부트스트랩을 추가해야 한다. 부트스트랩을 CDN.. 2024. 9. 30. 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분만에 이해하는 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. 이전 1 2 다음
