자주 쓰지만 항상 어떤 속성을 사용할지 고민하게 되는 margin과 padding. 여러가지를 참고하며 작성하는 글이지만 사실 아직 어느 상황에 써야 맞는지 헷갈리는건 여전하다. 그래도 검색하면서 다른 사람들도 많이 헷갈려 하는구나.. 라는 위안을 얻으며 기록해본다. 🔎 BOX MODEL HTML은 4가지 박스 형태로 만들어진다. 이 네가지 영역을 박스모델이라고 한다. ▪️ content: 내용이 담긴 부분 ▪️ padding: border와 content사이의 영역 ▪️ border: element를 감싸는 경계 ▪️ margin: border의 바깥 영역 🔎 비교 ✅ margin: 바깥쪽 여백 ✅ padding: 안쪽 여백 양수 (+) 음수 (-) auto collapse margin O O O O ..
Vue로 개발을 진행하다 보면 기존과 약간 다른 개발 방식에 애매한 상황이 생긴다. 그 중 하나로 Vue의 데이터와 화면의 UI를 찾아 접근해야 하는 상황에서 DOM을 찾지 못하는 상황이 있다. 데이터를 통해서 만들어지게 되는 DOM이 완성되기 이전 시점에 호출을 하려고 하는 상황인데, 어떠한 데이터를 변수에 담아 화면이 갱신되는 DOM에 바로 접근하려고 하면 DOM 요소가 없다는 에러를 뱉는다. 💡 예시코드 show Input 모든 데이터 처리가 비동기로 처리되는 자바스크립트 특성 때문에 DOM이 갱신되기 전 탐색하는 상황에서 생기는 현상이다. 그래서 setTimeout을 이용해 약간의 시간차를 주게되면 문제없이 DOM에 접근 할 수 있게 된다. // ... showInput() { this.isSho..
내가 원하는 스타일을 화면 전체 페이지에 주고 싶을때 마음대로 되지 않아서 애를 먹었던 적이 많았다. 그냥 무작정 height: 100% 주거나 비슷하게 px 또는 rem으로 크기를 맞춰서 하곤 했는데, 여러 디바이스를 비교하면서 하면 이상해 보이는걸 알았지만 일단 내가 보이는 화면에만 안 보이게 처리하려고 그랬나보다. 별거 아닐 수 도 있지만 기본이라고 생각하는 화면 크기 값 조정. 기록해 놔야지. 📌 % 창이 중심이 아닌 부모 요소의 길이에 맞게 반환한다. 그래서 최상단에서 사용한다면 문제는 없지만 밑의 컴포넌트로 파고 들어갈수록 원하는 결과 값을 얻기 힘들어진다. 📌 vh와 vw vh(viewport height): 화면 기준으로 높이를 뜻한다. vw(viewport width): 화면 기준으로 넓..
📌 자바 스크립트에 지원하고 있는 자료형 ✅ 기본 자료형 (Primitive) ◾ boolean : 논리적인 요소. true와 false값이 있다. ◾ null : 빈 값 ◾ undefined : 값을 할당하지 않은 변수가 가지는 값 ◾ numer : 숫자형으로 정수와 부동 소수점, 무한대 및 NaN (숫자가 아님) 값을 포함한다. ◾ string : 문자열 ◾ symbol (ES6에 추가됨) ✅ 객체 자료형 ◾ object 심볼(Symbol)이란, 다른 값과 중복되지 않는 자료형(unique) 이다. 프로그램에서 이름(변수명)의 충돌 없이 사용하기 위해 활용한다. 일반적으로 심볼 타입은 객체의 프로퍼티 키로 사용된다. 📌 심볼 값 생성 심볼은 전역 함수 Symbol을 사용해서 생성한다. const sy..
