코딩75 Bootstrap 4.5 dropdown 에러 사이트 제작중에, top메뉴 dropdown은 매우 잘되는데갑자기 본문에 dropdown이 에러가나서 동작 안하는 것을 발견했다. 콘솔창에는 다음과 같은 에러메세지 발동.. Bootstrap's dropdowns require Popper.js 구글링 해보니 bootstrap.bundle.js 파일을 추가하라는 글을 보아서 bootstrap.min.js와 bootstrap.bundle.min.js 파일을 둘다 넣었는데 그래도 해결이 안됐다;어떤글을 보니 번들파일을 아래에 넣으면된다고 했는데 그래도 안됐다. 두 파일을 열어서 비교해보니 bundle.js에는propper에 대한 내용이 빠져있고 부트스트랩js와 기능구현은 같다는 것을 알게되었고 bundle.js만 추가해봤는데 기능이 모두 잘 동작하는것을 확인.. 2020. 7. 8. [atom] 멀티커서가 안될 때 atom을 사용할때 편한 기능중 하나가 ctrl + click으로 여러 라인을 선택해서 한번에 수정하는 것이었다.이 기능을 뭐라고해야되지..? 멀티선택? 다중선택? 멀티커서? 여러줄선택..?그런데, 갑자기 이 다중선택이 회사에서는 잘되는데 집에서는 안되는 상황이 발생..답답해서 찾아보니 해결방법이 있었음..! C:\사용자\(user)\.atom\config.cson 위에 파일을 수정하면 된다. (user)는 본인 컴퓨터 사용자 이름임. "*": core: editor: multiCursorOnClick: true editor: font-size: 13px ... 빨간부분을 추가하면 되는데,유의할 점은 core와 같은 depth에 editor가 이미 있는데 그 하위에 추가하니 안먹었다.core 하위뎁스에 .. 2020. 6. 19. scss 반복문 css코딩 @each $color, $value in $theme-colors { .select-badge .badge-#{$color} { color: $value; } .select-badge .badge-#{$color}:hover{ background-color: $value; color: #fff; border-color: $value; }} 2020. 2. 3. document.ready(), window.onload() 차이점 $(document).ready(function(){ // 외부 리소스 및 이미지와 상관 없이 DOM 데이터만 로드가 완료되면 바로 실행. // 가장 먼저 실행됨 }); window.onload = function() { // 페이지 안의 외부 리소스, 이미지까지 로딩이 끝난 후에 실행됨 } ★onload 함수는 동일한 페이지 안에서 하나만 존재해야 하는데 만약 외부 라이브러리에서 onload가 이미 선언 되어 있으면 찾아서 하나로 합치는 것이 어려움. 또한 한 페이지 내에서 onload가 2번 쓰이면 앞에 것은 무시되고 뒤에 함수만 동작함. 2020. 2. 3. document ready 를 순수 javascript로 jquery를 쓰지 않고 순수 javascript로 ready()를 대체하는 코드. document.addEventListener("DOMContentLoaded", function(){ // Handler when the DOM is fully loaded }); 참고로, $(document).ready(handler); 는 사용을 피하는 것이 좋다고 한다. 아래 글 참조. https://github.com/codepink/codepink.github.com/wiki/%EC%88%9C%EC%88%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-ready()-%EB%8.. 2019. 4. 24. [css]강조모션 애니메이션 css 빨간점 강조 애니메이션 효과깜박깜박임 @keyframes joyride-beacon-outer { 0% { opacity: 0; } 100% { opacity: 1; }} .timeline .sign-x{ display: block; position: absolute; top: -10px; right: -9px; width: 24px; height: 24px;}.timeline .sign-outer{ display: block; position: absolute; top: 0; right: 0; height: 100%; width: 100%; -webkit-animation: joyride-beacon-outer 1.2s ease-in-out infinite; animation: joyride-beaco.. 2019. 3. 19. [react] 리액트 컴포넌트 옵션 안에 태그넣기 ({form.name || ""} 님) {this.getStatusInfo(form.status)} ]} match={this.props.match}/> 중괄호 안에 대괄호[] 넣음. 기본 css 코드와 변수를 함께 쓰기 2019. 3. 7. [css] sass sass 함수 사용 @each $color, $value in $theme-colors { .select-badge .badge-#{$color} { color: $value; } .select-badge .badge-#{$color}:hover{ background-color: $value; color: #fff; border-color: $value; }} 2018. 9. 11. [CSS] 수직 중앙 정렬 가로로 가운데 정렬은 매우 쉽지만,수직(세로) 가운데 정렬은 항상 골칫거리였다..여러가지 편법이 난무.. 나는 보통 display: table 을 가지고 세로정렬을 했었는데flex 개념이 생기면서 좀 더 간편해짐.하지만 flex 개념은 너무 어려워ㅜㅜㅜ 수직 가운데 .vertical-center{height: 100%} .item { display: flex; align-items: center; justify-content: center; -webkit-justify-content: center; -webkit-align-items: center; } vertical-center의 높이에 따라 item이 가운데 정렬됨.위 코드는 풀화면의 가운데 하고싶을 때.. 단, vertical-center의 부모가.. 2018. 9. 11. 이전 1 2 3 4 5 ··· 9 다음