본문 바로가기

코딩공부

 (257)
[position, margin] 배치와 가운데 정렬을 함께 해야하는 경우 부모요소를 기준으로 자식요소를 배치할 때는 부모요소에 position값을 relative를 준다. (자신 기준) (부모요소에 position값 있는지 반드시 확인) 자식요소에 position값을 absolute로 준다. (부모요소에 position값이 있으므로 부모 기준으로 배치됨) 브라우저의 크기가 변경될 때 자식요소가 부모요소 내부에 위치하면서 브라우저가 자동으로 계산하도록 하려면? 자동으로 계산할 너비나 높이등의 사이즈를 명시한다. (예시 width : 1100px; ) 좌우의 기준점을 잡아준다. (예시 left: 0 right: 0) 그것의 margin을 자동으로 계산하도록 auto 값을 준다 (예시 margin: 0 auto) 브라우저의 크기가 변해도 브라우저가 자동으로 계산해 수평의 가운데 배..
[React] state를 변경 할 때 spread 문법을 이용하는 이유 (공부내용 정리) (원시값 개념) const reducer = (state, action) => { //state는 이전 상태 , action은 dispatch에서 만든 array switch (action.type) { case 'CHANGE_INPUT': return { ...state, inputs: { ...state.inputs, [action.name]: action.value } //reducer 함수에서 새로운 상태를 만들 때에는 //불변성을 지켜주어야 하기 때문에 위 형태와 같이 spread 연산자를 사용 } } } reducer함수에서 새로운 상태를 만들 때 spread연산자를 사용하는 이유. React는 spread operator를 사용해서 기존의 state값은 유지시키고 그것을 복사해서 업데이트한 값으로 상태를 바..
[react] useReducer Hook 이해하기 [https://blog.logrocket.com/react-usereducer-hook-ultimate-guide/#how-usereducer-hook-work]를 공부한 블로그 개인적인 번역글 useRducer Hook은 어떻게 작동하는가? useReducer Hook은 useState Hook처럼 state를 저장하고 업데이트하기 위해 쓰인다. reducer function을 첫번째 파라미터로, 두번째 파라미터로 초기 state를 받는다. useReducer는 현재의 state 값과 dispatch함수를 가지고 있는 array를 return한다. (우리는 dispatch함수에 action을 보낼 수 있고 그걸 나중에 불러낼 수 있다) reducer함수는 스스로 두개의 파라미터를 받아들이고 한개의 v..
[react] 한개의 useState로 input상태 변환하기 (value 속성과 name속성을 활용한) 공부한것 정리한 개인적인 글 (공부사이트: https://react.vlpt.us/basic/09-multiple-inputs.html) import React, { useState } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inputs, // 기존의 input 객체..
paintJS 강의, 그리고 업그레이드 Javascript로 그림판 만들기 ●강의를 통한 습득 paint mode와 fill mode 버튼을 클릭 할 때마다 paint와 fill 글씨가 변경 paint mode는 자유롭게 지정한 굵기에 따라, 지정한 색에 따라 마우스를 드래그앤 드롭 하는 대로 따라오며 자유로운 펜글씨로 그림을 그려준다. fill mode는 canvas에 사용자가 지정한 색으로 전체 색칠해 주는 기능이다. save mode는 사용자가 canvas에 입력한 그림을 저장해준다. ●추가한 기능 사용자가 색을 선택하면 그 위에 색을 보여주는 기능 fill mode일 때는 연필모양 커서로 변경 paint mode일 때는 페인트통 모양 커서로 변경 text 기능 추가 text 버튼을 누르면 커서가 I 모양으로 변경, 현재까지는 개발자가 ..
[문제점 해결해보기] flex-basis 사진 아래쪽에 보면.... notice에 공지사항 글자가 줄바꿈이 된다.... 아래는 HTML과 CSS코드 공지사항 크리스마스 & 연말연시 매장 영업시간 변경 안내 [당첨자 발표] 커피 영수증 이벤트 애플리케이션 버전 업데이트 안내 [당첨자 발표] 전자영수증 이벤트 add_circle .notice .inner { height: 62px; display: flex; } .notice .inner__left { width: 70%; background-color: #333; display: flex; align-items: center; } .notice .inner__right { width: 30%; } .notice .inner__left h2 { color: #fff; font-size: 16px;..
[문제해결해보기] image 밑에 흰 여백 전역배지 만들어보기 이미지 밑에 자세히 보면 하얀 줄이 있다.... 문제 해결은 역시나 구글링...(구선생님 구구구) 참조사이트 : https://aboooks.tistory.com/193 [html/css] div 이미지 공백 없애기 [html/css] div 이미지 공백 없애기 div나 table 안에 이미지를 넣다 보면 뜻하지 않게 공백이 생기는 경우가 있더군요 오늘은 table, div 이미지 공백을 없애는 방법을 알아 보겠습니다~ 이미지 공백은 aboooks.tistory.com image는 인라인 요소이므로 밑에 보이지 않는 흰 줄이 생긴 것. 보이지 않는 라인박스를 만든다고. 방법은 diplay: block; 를 넣는것.. header .badges .badge img { height: 13..
[문제점 해결해보기]프론트엔드 개발을 시작하려고 해 css높이값 0 등 254p 커피전문점 웹사이트 클론코딩 ●문제점 1 header .inner .sub-menu .search에서 검색 input창이 형제요소의 글씨와 나란히 정렬되지 않고 input창만 위로 떠서 출력되었던 경우 (책에 나온 코드대로 작성하였으나 예쁘게 되지 않음... 아마도 저자가 스스로 찾아보라고 숙제로 남겨놓은 듯하다.) 그래서 앞의 position을 계속 복습하던 중 align-items: baseline; header .inner .sub-menu에 추가하였더니 이렇게 input창이 예쁘게 밑으로 내려간 것을 볼 수 있다. 돋보기 모양도 약간 위로 올라가 있는 것을 header .sub-menu .search .material-icons에 top 값을 0이었던 것을 10px로 주어 약간 내리게 배..

티스토리툴바