반응형
최종 화면을 보여드리자면 비주얼 업데이트를 조금 진행했습니다.이렇게 만들게 되면 반응형을 따로 하지 않아도 바로 모바일 형식으로 볼 수 있는 장점이 있습니다.오늘은 네이게이션 설정과 메인 디자인을 하도록 하겠습니다.Navigation 영역 import styles from "./nav.module.css";import { Link } from "react-router-dom";function Nav() { return ( My Info 홈 ..
여러 홈페이지 사이트나 나도 많이 자주 쓰는 플러그인 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..
태그 기본 구조 : 표 만들기 시작 : 하나의 행을 시작 : 행 안에 셀 : 첫 번째 행 안에 제목이 되는 셀 : 표를 설명하는 제목 만들기 : 행 또는 열 합치기 : 표 제목 구조 정의 : 표 본문 구조 정의 : 표 안의 구조 정의 HTML 삽입 미리보기할 수 없는 소스
멀티미디어(웹과 멀티미디어 / 오디오, 비디오 재생하기) 알아두면 좋은 속성값과 정보 비디오 태그 속성 속성 값(예) 설명 autoplay autoplay 동영상이 바로 재생 buffered buffered 동영상이 버퍼링 시간을 읽을 수 있는 속성 controls controls 비디오 컨트롤이 표시되도록 설정 loop loop 비디오 재생이 끝나면 다시 시작하도록 설정 muted muted 비디오의 오디오 출력을 음소거로 설정합니다 poster poster="URL" 비디오를 다운하는 동안 또는 시작버튼을 누르기 전까지 이미지를 설정 preload preload= "auto" preload="metadata" preload="none" 페이지가 로드되고 비디오 로드 여부를 서정 src src="URL..
태그 태그 : 이미지, 동영상 등 멀티미디어를 넣을 때 태그 : 피겨 태그 안에 이미지 넣기 ~ 태그 : 피규어 태그 안에 이미지에 대한 제목글 넣기 태그 : 피규어 태그 안에 이미지에 대한 설명글 넣기 HTML 삽입 미리보기할 수 없는 소스
순서 있는 목록을 만드는 태그(ol : Ordered List) HTML 삽입 미리보기할 수 없는 소스 순서 없는 목록을 만드는 태그(ul : Unordered List) HTML 삽입 미리보기할 수 없는 소스