본문 바로가기

Programming

[HTML] input="file" 파일 지정하기 - input="file" 에서 파일 선택 창에서 선택 가능한 확장자 선택하기 - 일반적으로 input="file" 로 앨리먼트를 생성한 후 파일 추가하기를 누르면 모든 확장자명의 파일이 보여집니다. 하지만 파일 선택 창 오픈 시 특정한 확장자 (.jpg, .xls 등) 만 보여지게 하고 싶다면 아래와 같이 코드를 추가 해 줍니다. 위와같이 input="file" 에 accept 옵션을 추가한 후 파일 선택창에서 보여지게 할 확장자명을 입력해주면 됩니다. - 여려개의 파일 확장자명을 지정 할 경우 - 이미지파일이나 동영상 파일의 경우 여러가지의 확장자명을 가지고 있는데 이럴 경우 위와같이 , 를 사용하여 필요한 옵션 값을 추가 해주면 된다. 더보기
[Next.js] error, 404 페이지 만들기 - 컴포넌트 파일의 위치 src └ pages 404.jsx _error.jsx - 각 컴포넌트들의 위치는 위와같이 src 아래 pages 위치에 만들어준다. - Next.js 에서 Error 페이지 만들기 // _error.jsx const Error = () => { return( 에러페이지 접속 시 메시지 입력 ) } export default Error; - 위와같이 _error.jsx 컴포넌트를 만들어 준 후 코드를 작성해주면 Error 시 자동으로 Error페이지로 이동된다. - Next.js 에서 404 페이지 만들기 // 404.jsx const NotFound = () => { return( NotFound 페이지 접속 시 보여질 메시지 입력 ) } export default NotFou.. 더보기
[React]map 함수로 만든 메뉴에 개별 이벤트 걸기 - map으로 메뉴를 만들고 개별로 아코디언 메뉴 만들때 이벤트 걸어주기 import { useState } from "react"; const MenuArray = [ { title:"메뉴1" }, { title:"메뉴2" }, { title:"메뉴3" }, { title:"메뉴4" }, ]; const Test = () => { const [activeIndex, setActiveIndex] = useState(-1); const handleToggleMenu = (index) => { setActiveIndex(index === activeIndex ? -1 : index); }; return( {MenuArray.map((item, index) => handleToggleMenu(index)} >.. 더보기
[CSS] list-style 바꾸기 - list-style? 웹 퍼블리싱을 하다 보면 리스트 부분을 작성할 때 ul, ol, dl과 같은 엘리먼트를 사용하게 됩니다. 이때 각각의 태그들이 기본적으로 보여주는 list-style을 보면 다음과 같습니다. 하지만 기본 list-style들은 원형의 도트 스타일만 지원해 주고 색상 또한 li의 색상을 이어받아 사용하기 때문에 커스텀이 필요한 상황이 많이 발생합니다. - 가상요소를 통한 스타일 제가 가장 자주 쓰던 방법이면서 list-style을 다양한 크기와 모양으로 만들 수 있는 방법입니다. 먼저 변경이 필요한 해당 list-style을 none으로 지정해준 후 li 엘리먼트의 position 속성을 relative로 변경합니다. 그 후 해당 엘리먼트에 가상요소인 ::before 나 ::aft.. 더보기
[CSS] @media query 가로·세로 적용 stylesheet 반응형 작업중에 고민되는 것 중 하나가 모바일 기기에서의 가로·세로 반응형 작업이다. 머릿속으로는 있을거야... 하고 생각만해놓고 1도 찾아보지 않은 내가 밉다... 모바일기기의 가로 세로를 체크하는 방식은 반응형 작업을 할 때 처럼 미디어쿼리를 사용한다. /* 세로 모드: Portrait(포트레이트) 모드 */ /* 가로 모드: Landscape(랜드스케이프) 모드 */ @media (orientation: portrait) { /* Portrait 모드일 때 적용할 CSS */ } @media (orientation: landscape) { /* Landscape 모드일 때 적용할 CSS */ } 사실 다른 방법으로는 javaScript를 이용하여 페이지에 접속 할 때 혹은 디바이.. 더보기
[Vue] Vue Project 시작하기 1. 난 React가 더 좋은데! - React가 재밋어보이고 독학으로 React를 파다보니 Vue의 존재를 까먹고 있었는데... Vue로 현재 작업중인 BackOffice를 진행하게 되어서 기억속에 잠들어있던 Vue를 깨워보려고 합니다. // Vue 설치 npm install vue // Vue Cli 설치 (빠른 Vue 프로젝트 생성, 관리 라이브러리) npm install -g @vue/cli c React 만큼 쉽습니다 2. Vue Project 생성은 더 쉬웠다... - React를 명령어로만 생성하다보니 yarn create react-app ProjectName 혹은 npm create-react-app ProjectName 이런식으로 프로젝트를 만들어 준 후 추후 필요한 모듈을 추가해주는 .. 더보기
[CSS] 모바일 기기에서 button touch 시 효과 제거 - 웹 개발 시 button 앨리먼트를 작성 후 모바일 기기에서 터치를 했을 경우 파란색 background가 생기는 것을 확인할 수 있다. 이 때 아래의 코드를 사용하여 해당 background를 제거해줄 수 있다. -webkit-tap-highlight-color : transparent !important; 더보기
[HTML] a 태그 사용하기 1. a 태그는? - a 태그는 HTML 코딩에서 링크를 만들 때 사용하는 요소입니다. 간단하게 링크를 주기위한 태그 입니다. a 태그의 기본 style a {display:inline; text-decoration:underline; color:#0000ee;} a:active {color:#551a8b;} 2. a 태그에 사용되는 옵션 href a태그를 클릭했을 때 href에 입력 된 주소로 이동합니다. target target 은 a태그를 클릭했을 때 새 창으로 이동 할 지 현재창으로 이동할 지 등 다양한 옵션을 줄 수 있습니다. 이름 기능 _blank 기존 페이지는 유지하면서 링크 이동 _self 현재 페이지에서 해당 링크 이동 _parent 현재 프레임의 부모 프레임에서 링크 이동 _top 최상.. 더보기

티스토리툴바