[javascript] div와 ul, li를 사용하여 selectBox 처럼 구현하기 완성 이미지 간단하게 옵션별 배경색 지정, 옵션에 아이콘 이미지 삽입 정도만 구현했지만 마크업에따라 체크박스, 라디오 버튼 등 다양하게 적용 가능하다. 1. html 사과 바나나 오렌지 2. css /* reset */ *{ list-style: none; margin: 0; padding: 0; font-size: 14px; box-sizing: border-box; } /* common */ body{ padding: 30px; } .hide{ display: none; } .show{ display: block; } /* 셀렉트 영역 스타일 */ .select{ position: relative; padding: 5px 10px; width: 200px; border-radius: 5px; bord.. 2020. 3. 25. [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 다음
