[css] 6가지의 확실한 수직 가운데 정렬 방법 다양한 높이의 요소들을 수직 가운데 정렬하는 일은 수평 가운데 정렬하는 것보다 다로 까다롭다. 각각의 특징을 비교하여 6가지의 수직 가운데 정렬을 소개한다. 수직정렬은 자식이 inline속성을 가지냐 block 속성을 가지냐에따라 적용 여부가 달라지므로, 각 속성들의 특징파악이 선행되어야한다. 1. display : flex 사용 특징 가장 손쉽게 할수있는 방법 수직정렬하고자하는 요소가 하나거나 두개이거나 상관 없음 IE9 이하는 지원하지 않음 방법 부모에 display:flex; align-items:center; 와 높이값 추가 See the Pen 수직 가운데 정렬 1 by off-echoi (@off-echoi) on CodePen. 2. display : table 사용 특징 태그의 깊이가 깊어.. 2020. 2. 24. [javascript] 자바스크립트 객체지향 - Object Oriented Programming(OOP) 객체지향 자바스크립트는 객체지향 프로그래밍 능력을 가진 언어이다. 객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다. 객체지향 프로그래밍은 관계성 있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다. 객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었다. 또한 객체지향적인 코드는 개발을 보다 단순하게 했고, 시간이 흐른 뒤에도 보다 쉽게 이해할 수 있도록 했으며, 복잡한 상황이나 절차들을 덜 모듈화 된 프로그래밍 방법들보다 더 직접적으로 분석하고, 코딩하고, 이해할 수 있도록 만들었다. - 객체지향 자바스크립트 개요 .. 2020. 1. 28. [javascript] Arrow Function 이모저모 const foo = (num) =>{ return num++ } // 리턴값이 간단한 한줄의 화살표 함수는 아래와 같이 작성할 수 있다. const foo1 = num => num++ // 인자가 하나라서 num을 감싸는 소괄호()를 생략 // 리턴값이 간단해서 return을 감싸는 중괄호{} 및 return 생략 const foo2 = num => (num++) // 혹은 return만 생략할 수 있다. 화살표함수의 화살표가 두개인 형태 (첨에 보고 띠용했다.) curried function(Currying)(커링함수) 이라고 하는 것 같다. 인자로 함수를 받는 것. 참고 : https://stackoverflow.com/questions/32782922/what-do-multiple-arrow-fu.. 2019. 11. 5. [javascript] 개행문자(\n) 줄바꿈 처리 및 특정 단어 바꾸기 개행문자 바꾸기 \n을 로 변경 1. forEach 웬 forEach? 할수도 있지만 리액트(react) 프로젝트를 했었을때 줄바꿈을 forEach 혹은 map을 사용해서 했었다. 안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요? 2. replace + 정규식 안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요? 하면서 코드의 마지막을 pInner = pInner.replace(/\\n/gi,''); 라고 작성했는데 콘솔에만 바뀐값이 나오고 화면에는 출력이 안되었다. pInner은 pTag.innerHTML를 담은 하나의 string값이기 때문에 변수 pInner의 값만 바뀌고 pTag의 실제 innerHTML값.. 2019. 11. 4. 이전 1 2 3 4 다음