반응형 SMALL 전체 글26 React - LostArk Open-API 사용 홈페이지 만들기 React Mini Project lostarkopenapi생성 $ npm create-react-app lostarkopenapi 필요 없는 파일들 삭제 - public 폴더 내의 로고사진들 - src 폴더안의 불필요한 파일들 삭제 - app.js 파일을 열어 내용을 꺠끗이 삭제 // index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); npm start 이렇게 빈 화면을 만든후 아래 사이트를 접속해 로그인을 한다. https://.. 2023. 12. 19. 이미지 CSS로 다루기(background), PICTURE 예전에 이미지를 한번 다룬적이 있는데요. https://frontdevpark.tistory.com/entry/HTML5-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%A7%81%ED%81%AC-%EB%8B%A4%EB%A3%A8%EA%B8%B0img%ED%83%9C%EA%B7%B8-a%ED%83%9C%EA%B7%B8 HTML5 - 이미지, 링크 다루기(태그, 태그) 태그 이미지 안에 width와 height 넣을 수 있으나 css로 관리하는 게 더 좋습니다. HTML 삽입 미리보기할 수 없는 소스 태그 구글 태그는 현재창에서 바로 열리는 게 기본값입니다. target="_blank" : 새로 frontdevpark.tistory.com 이번에는 좀 더 CSS로 이미지 삽입 하는 스킬을 공유 하.. 2023. 12. 18. Swiper.js - 슬라이드를 쉽게 만들고 쓰자! 여러 홈페이지 사이트나 나도 많이 자주 쓰는 플러그인 Swiper.js WHY? 왜 써? 스와이퍼 같은 기능이 있으면 좋을 거 같은데?, 아 물품 같은 리스트를 있어 보이게 만들 수 없나? 또한 웹페이지에 적용시켜놓으면 굉장히 이쁩니다. 웹과 모바일 사진 아래를 통해 확인할 수 있습니다. CDN의 Swiper 사용 프로젝트에 Swiper 파일을 포함하지 않으려면 CDN에서 사용할 수 있습니다. 직접 다운받아서 사용할 수도 있습니다. https://www.jsdelivr.com/package/npm/swiper jsDelivr - A free, fast, and reliable CDN for JS and Open Source Optimized for JS and ESM delivery from npm an.. 2023. 12. 18. HTML5 - 표 만들기(<table> 태그>) 태그 기본 구조 : 표 만들기 시작 : 하나의 행을 시작 : 행 안에 셀 : 첫 번째 행 안에 제목이 되는 셀 : 표를 설명하는 제목 만들기 : 행 또는 열 합치기 : 표 제목 구조 정의 : 표 본문 구조 정의 : 표 안의 구조 정의 HTML 삽입 미리보기할 수 없는 소스 2023. 9. 19. HTML5 - 멀티미디어 멀티미디어(웹과 멀티미디어 / 오디오, 비디오 재생하기) 알아두면 좋은 속성값과 정보 비디오 태그 속성 속성 값(예) 설명 autoplay autoplay 동영상이 바로 재생 buffered buffered 동영상이 버퍼링 시간을 읽을 수 있는 속성 controls controls 비디오 컨트롤이 표시되도록 설정 loop loop 비디오 재생이 끝나면 다시 시작하도록 설정 muted muted 비디오의 오디오 출력을 음소거로 설정합니다 poster poster="URL" 비디오를 다운하는 동안 또는 시작버튼을 누르기 전까지 이미지를 설정 preload preload= "auto" preload="metadata" preload="none" 페이지가 로드되고 비디오 로드 여부를 서정 src src="URL.. 2023. 9. 19. HTML5 - 피규어 태그 태그 태그 : 이미지, 동영상 등 멀티미디어를 넣을 때 태그 : 피겨 태그 안에 이미지 넣기 ~ 태그 : 피규어 태그 안에 이미지에 대한 제목글 넣기 태그 : 피규어 태그 안에 이미지에 대한 설명글 넣기 HTML 삽입 미리보기할 수 없는 소스 2023. 9. 19. 이전 1 2 3 4 5 다음 반응형 LIST
