Front-end 35

React) 이미지/파일 업로드 버튼

이미지와 파일 업로드는 input태그를 사용한다. function Home() { const [imgUrl, setImageUrl] = useState(); const onImgChange = (e) => { setImageUrl(e.target.files[0]); } return( + ) } type='file'로 설정하고 accept='image/*'로 하면 jpg, png 등 이미지 형태의 확장자를 가진 파일만 불러올 수 있다. 원하는 확장자의 파일만 불러오고 싶으면 accept='.pdf' 형태로 원하는 확장자만 적으면 된다. 또한 여러 개를 가져오고싶으면 multiple="multiple"을 적용!

Front-end/React 2021.11.27

HTML&CSS) HTML 버튼 만들기 button

버튼 만드는 방법 4가지! 방법1 . input태그에 type으로 button을 지정하고 value에 글자를 넣으면 그 글자대로 버튼이 생긴다. 방법2 . submit은 태그의 결과 전송 용도로 주로 쓰인다. input태그에 type으로 submit을 지정하고 value글자대로 버튼이 생긴다. submit 타입은 데이터를 아무런 검증없이 보내기때문에 자바스크립트에서 검증을 한 후 데이터를 전송해야한다. 방법3 . 버튼태그 흔히 많이 쓰는 방법이다. 방법4 . 는 일반 text를 쓸때 사용하는 태그로, 위의 세 가지 방법과는 달리 눌리는 기능이 없다. 그래서 CSS로 뒷배경 색깔을 넣어서 버튼처럼 보이게 만든 후 기능을 달아서 사용한다.' 버튼 같지 않지만 버튼이 될 거야. 태그와 같이사용해서 버튼기능을 ..

Front-end/HTML&CSS 2021.11.18

HTML&CSS) 목록 태그 ul 와 li, 목록 스타일 없애기

목록을 만들 경우에는 또는 태그로 감싸고 그 안에 태그를 사용한다. 1. 순서 있는 목록: 항목 항목 *순서 알파벳으로 항목 항목 2. 순서 없는 목록: 에 type옵션으로 모양을 다르게할 수 있다. 항목 항목 항목 항목 항목 항목 3. 설명 목록: 자동으로 들여쓰기가 되며, 목록 스타일이 없다. 설명 목록 목록 분류 항목1 항목2 4. 목록 스타일 없애기 태그는 기본적으로 목록 앞에 ⦁ 점이 붙는다. ⦁ 이 아니더라도, 번호(1,2,a,b)같이 목록 앞에 무언가가 붙는데, 없애고 싶으면 css부분 *목록만들기 항목 항목 1번이 없어졌다!

Front-end/HTML&CSS 2021.11.18

HTML&CSS) inline과 block 차이

block inline 1 inline 2 inline 본인 크기만큼 자리를 차지하는 속성. 기본적으로 본인 크기만큼만 자리를 차지하기 때문에 줄바꿈없이 다른 태그들과 같이 나란히 배치된다. 대표 inline 엘리먼트 , , 특징 크기를 지정해도(width, height) 무시된다. -> 내용의 크기만큼만 공간을 차지하도록 되있어서 margin과 padding은 좌우로만 적용되고 상하는 적용되지 않는다. block 얼만큼의 컨텐츠를 가지고 있던 기본적으로 한 줄을 다 차지한다. 한 줄을 다 차지하기때문에 다른 엘리먼트들과 같이 있을 수 없어 자동으로 줄바꿈이 적용된다. 대표 block 엘리먼트 , , 특징 width, height, margin, padding이 모두 반영된다. inline-block 기..

Front-end/HTML&CSS 2021.11.18

리액트 설치 방법 - 리눅스

1. curl 설치 sudo apt install curl ​ ​ 2. PPA(개인아카이브) 등록하기 curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash - ​ ​ ​ 3. 노드 설치하기, 버전 확인 sudo apt-get install -y nodejs node -v ​ ​ ​ 4. npm 설치 curl -sL https://npmjs.org/install.sh | sh sudo npm update -g npm ​ ​ 5. create-react-app 설치 npm install -g create-react-app create-react-app 앱이름짓기 cd 앱이름 npm start ​

Front-end/React 2021.11.15
반응형