본문 바로가기

분류 전체보기

 (212)
[Web] em 과 rem, CORS 란? 혼나고 배우는 것은 기억에 오래 남는 법. 1. em과 rem의 차이 1) 상대 단위란? 고정되지 않고 유동적으로 바뀔 수 있는 길이 단위이다. em, rem 을 포함해 %, vh, vw 등이 대표적인 css의 상대단위이다. 반대로 절대단위는 고정된 길이 단위이다. 대표적으로 px, pt를 들 수 있다. 쉽게 말해 1cm는 항상 손가락 한마디 반정도의 길이인것 처럼, 1px은 항상 0.02645833cm 인 것이다. 2) em과 rem의 공통점 em과 rem은 css의 font-size 속성값에 비례해서 결정되는 상대 단위이다. 예를 들어 기본 font-size가 16px의 경우 다음 과 같이 em의 크기가 정해진다 0.5em 16px * 0.5 8px 1em 16px * 1 16px 2em 16px *..
[JAVA] (1) 환경 설정 - 다운로드 1. JDK 설치 : x64 Compressed Archive zip 파일 다운로드 https://www.oracle.com/java/technologies/downloads/#jdk17-windows 2. 이클립스 설치 : Eclipse IDE for Enterprise Java and Web Developers (Windows x86_64) 다운로드 https://www.eclipse.org/downloads/packages/ Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source pro 509 MB 566,255 DOWNLOADS T..
[Error] Get 으로 보내는 주소에 한글이 있을 때 TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters 일단 상황은 해시태그를 url 에 담아서 서버로 get 요청을 하는 것이다. 해시태그는 당연히 한글이 될 수 있다. 프론트 서버에서는 다음과 같은 에러를 뱉어냈다. 에러발생의 원인인 axios 로 서버에 API 요청을 하는 부분을 보자 axios.get(`/hashtag/${data}?lastId=${lastId || 0}`); data 변수에 hashtag 가 들어간다. lastId 는 페이지네이션을 위한 것이므로 여기서는 무시한다. data 에 한글이 들어갈경우 백엔드로 요청하는 API는 '/hashtag/크리스마스' 가 되는 것이다. 여기서 바로 에러가 발..
react-hook-form 과 meterial-UI 함께 쓰기 (3) - DateRangePicker (1) TextField https://tacit.tistory.com/41 react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextF.. tacit.tistory.com (2) ToggleButton https://tacit.tistory.com/42 react-hook-form 과 meterial-UI 함께 쓰기 (2) - ToggleButton 이전 게시물(1) - TextField 에 이어서..
react-hook-form 과 meterial-UI 함께 쓰기 (2) - ToggleButton 이전 게시물(1) - TextField 에 이어서 https://tacit.tistory.com/41 react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextF.. tacit.tistory.com 이번엔 ToggleButton 과 함께 사용하는 방법에 대해 정리해보려한다. CheckBox로 예시들이 몇개 구글에 나와있다. ToggleButton도 비슷한 맥락이다. import ToggleButton..
react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextField'; import { useForm, Controller } from 'react-hook-form'; export default function App() { const { handleSubmit, control, formState: {errors} } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( ( )}/> 전송 ); } 전달하는 속성들에..
[Web] 색상 코드 추출하기 (컬러콥 color cop 추천 및 오류 해결) 컬러콥을 사용하고는 신세계가 열렸었다.ㅋㅋ ppt 만들때나, 문서작성, 디자인 등등에 유용한 색상 추출 프로그램을 소개하려 한다. 뭐 이미 유명한 프로그램이겠지만 ㅎㅎㅎㅎㅎ colorcop.net/download/ download The easiest way to install Color Cop is to download the self-installing version. If you use the installer it's easy to remove the application by using add/remove programs under Windows. Standalone 5.4.6 BETA beta.zip I have a new version here, but I'd like colorcop.net..
[Web] url로 queryparameter 쿼리파라미터 가져오기 지금 작성하는 글의 url을 캡쳐해보았다. 뒤쪽에 보면 ? 로 시작해서 & 로 이어지는 글자들이 보인다. type = post returnURL= %2Fmanage%2Fpost%2F 위의 경우는 이처럼 2가지의 쿼리 파라미터를 가지고 있다고 볼 수 있다. 그럼 html 상에서 위의 쿼리파라미터를 변수로 가져와서 사용하는 방법을 소개하겠다. $(document).ready(function() { var param_type = new URLSearchParams(location.search).get('type'); var param_returnURL = new URLSearchParams(location.search).get('returnURL'); console.log("param_type은? ", par..
[Web] div안에 div 가운데 정렬하기 웹 디자인을 하다보면 가장 많이 쓰는데 또 맨날 까먹는 것 중에 하나가 바로 가운데 정렬이다. 무의식적으로 바로 text-align : center 사용하고는 아 왜 안되지? 그다음은 이제, vertical-align : middle 사용하고는 아 왜 안되지? 무한 반복하다가, 아 맞다....하고는 최후의 수단? 만병통치약으로 사용하는 것이 바로 position을 사용한 가운데 정렬이다. 안녕? 레알 만병통치약이다. 부모 클래스에는 position : relative; 자식 클래스에는 position : absolute; top: 50%; left : 50%; transform: translate(-50%, -50%);
[Web] css 한 줄에 여러가지 색깔 넣기 한줄에 여러가지 색깔을 사용하려면 꼭 써줘야하는 css 속성이 있다. 오늘 해볼 것은 한줄에 여러가지 두가지 색상을 표현하고, 또 추가로 마우스를 가져다 대면 (hover) 색이 변하는 css를 구현해보려 한다. like this -> 가장 중요한 것은 바로바로 !!! display : inline-block 을 넣어 주는 것이다. 그리고 hover 속성을 전체 묶어주는 div에 주어야 마우스를 가져다 대면 동시에 모든 색상이 변할 수 있다. hover 속성을 main_titl_1:hover / main_titl_2:hover 이런식으로 따로따로 주게 되면 글자를 반 나눠서 왼쪽 반에 가져다 대면 왼쪽만 바뀌고, 오른쪽에 가져다 대면 오른쪽만 바뀌게 된다. (이런 효과를 원한다면 이렇게 따로따로 hove..

티스토리툴바