전체 글 (74) 썸네일형 리스트형 display:flex 이후 justify-content : center했을때 요소가 정 중앙에 배치 되는 경우 왼쪽 정렬하기 위한 방법 1. 1줄에 최대 몇개 요소가 정렬되는지 확인 (ex) 1줄에 4개의 요소가 지정) 2. (최대 개수 - 1)개수의 빈 요소를 생성 3. 빈요소를 추가한다 작동원리) ex) 1줄에 최대 4개의 요소가 지정 -> 하지만 1~3개의 요소가 1줄에 있으면 아래와 같이 정렬되지 않는다 (만약 2개인 경우, 원하는 layout) -> 정중앙에 정렬이 된다(이런식으로 배치가 된다) --> 즉 고치기 위해서 3개의 빈 요소를 추가 만약 1줄에 2개의 요소만 정렬이 되는 경우 값이 들어 있는 요소 값이 들어 있는 요소 빈 요소(레이아웃용) 빈 요소(레이아웃용) --> 이런식으로 배열이 되어서 화면을 보면 왼쪽정렬이 된것 처럼 보인다 + 빈 요소의 width, height는 width의 값은 원래 요소와 똑같이 지정해주.. css에서 다른 요소 위로 올라오게 만들고 해당 위치에 고정하려는 경우 1. 만약 요소위로 올라오게 스크롤을 내려도 계속 따라오게 하려면 position : absolute 사용후 left, right, top, bottom속성을 사용해서 지정 2. 만약 요소위로 올라오게 만들고 스크롤을 내릴경우 안따라오고 위치에 고정하려면 postion:absolute 와 display : block을 같이 사용하면 된다(위치는 left, right, top, bottom으로 지정) axios 에러코드 응답 처리(catch이용) - 공식문서 오류 처리 axios 라이브러리 오류 처리 방법은 다음과 같습니다. config 옵션 validateStatus을 사용하여 사용자 정의 HTTP 상태 코드 오류 범위를 정의 할 수 있습니다. <select> 태그내 <option> 태그 선택 이벤트 처리 동행인 종류 혼자 연인과 함께 가족과 함께 친구와 함께 아이와 함께 직장동료와 함께 --> 태그에는 value를 지정해서 지정된 option의 값을 지정하고 에 onChange 이벤트를 지정하여 선택 이벤트를 처리한다. [warning]Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option> ---옵션선택--- {(optionValue || []).map((options, idx) => ( {options} ))} 위와같이 selected 를 사용했을시 나타나는 경고이다. react에서는 selected 를 사용하는 대신 최상위 select 에 defaultValue 를 지정하여 그놈을 맨처음 보이게 할 수 있다. ---옵션선택--- {(optionValue || []).map((options, idx) => ( {options} ))} 요런식으로. disabled 는 선택 안되게 막아주려고 넣음 출처: https://andwinter.tistory.com/326 [index.html] [React.js] 리액트 이미지 사용 / react img src 리액트 프로젝트에서 태그를 사용할 때 src를 잡는 법은 두 가지가 있다. 1.public 폴더에 저장 -> 상대경로로 잡기 2.src 폴더에 저장 -> import 를 이용하기 src 폴더에 저장할 경우 상대경로로 바로 접근할 수가 없다. 원인은 아직 모르겠다. 1. public 폴더에 저장 -> 상대경로로 잡기 public 폴더에 저장할 경우 위와 같이 바로 상대경로를 이용해서 가져올 수 있다. 이미지가 static file로써 저장됨으로서 가능하다고 한다. 이렇게 할 경우 import 를 여러번 할 필요도 없고, 어떤 변수에 대해 해당 변수의 이미지들을 편하게 가져올 수 있다. 2. src 폴더에 저장 ->import를 이용하기 위와 같은 방식으로 src 자체에 이미지를 저장하고, import 를 .. git에서 untrack file 제거 git clean -f -d 입력 text에 그라데이션 효과를 추가하기 background: linear-gradient(to right, 시작할 색상(ex->#E30052), 끝 색상(ex->#6200EE) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -> 아래 css를 해당 텍스트 태그의 속성에 추가해 주면된다 -> 예를 들어 태그에 텍스트에 효과를 줄 경우 ex) [html] 그라데이션 [css] .gradient-test { background: linear-gradient(to right, 시작할 색상(ex->#E30052), 끝 색상(ex->#6200EE) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent.. 이전 1 2 3 4 ··· 10 다음
