본문 바로가기

분류 전체보기519

bootstrap selectpicker multiple js 수정 전체선택 해제 변경 css bootstrap selectpicker multiple js 수정 전체선택 해제 변경. 이 제목을 뭐라고 설명해야 할지 모르겠다. 아무튼 요지는 이렇다. 부트스트랩4의 selectpicker multiple 옵션을 사용할 때 디폴트로 주어지는 모두선택 모두해제 토글 되는게 클라이언트 마음에 안들었나보다. 모든 option이 선택되면 모두 해제되는 것은 당연하지만 하나의 옵션만 선택해도 모두해제로 바뀌는 것이 클라이언트는 이해가 안된 모양이다. 그래서 클라이언트는 전체가 아닌 옵션을 선택하면 전체옵션은 변하지 않고, 전체옵션을 선택하면 모든 옵션도 체크가 된 것 처럼 보이게 해 달라는 것이다. 기본적인 셀렉트피커의 태그 구조는 다음과 같다. 그룹명 그룹설명 부서명 새로 변경해서 스크립트를 짠 html구조.. 2021. 7. 19.
jquery .sort() 요소 이동하면서 제이쿼리 소트 정렬하기 jquery .sort() 요소 이동하면서 제이쿼리 소트 정렬하기 부서나 트리구조의 UL, OL의 LI요소를 다른 UL로 이동하고자 할 때 이동한 후 소팅 정렬 되도록 할 때 jquery .sort() 함수는 요긴하게 사용된다. 다음과 같이 부서 목록에서 특정 부서를 선택해서 선택된 부서로 옮기려고 할 때 순서대로 정렬하는 구조의 제이쿼리를 짜보자. 먼저 복사 이동은 클릭 이벤트 발생과 동시에 .appendTo() 함수로 이동된다. appendTo 함수가 두번 사용된 것은 선택된 부서의 목록에서 클릭 이벤트는 부서 목록으로 다시 옮기기 위한 이벤트 처리다. 원리 자체는 같다. 두 경우 모두 요소가 이동된 뒤에 소팅 정렬을 해야 해서 임의의 함수를 만들어 공통으로 사용하고 있게 구성했다. HTML HTML.. 2021. 7. 17.
CSS IE 상위 padding, child absolute position eorror 문제 크로스 브라우징 CSS IE 상위 padding, child absolute position eorror 문제. 다음과 같은 달력형 스케줄에서 카운터 패널은 TD의 bottom에 붙어야 한다. 크롬이나 웹킷 기반 브라우저에서는 문제가 없으나 IE에서는 중간에 뜨는 현상이 생겼다. 이 크로스 브라우징 문제를 해결하기 위한 가장 중요한 솔루션은 구조 자체의 문제다. TD의 높이는 140px로 주고, sns 버튼 팜은 margin으로 여백을 띄웠어야 했다. 현재는 padding으로 띄워져 있는 상태다. 이미 퍼블리싱된 구조를 바꿀 것인지, ie에만 구조를 줘서 패치를 할지는 전적으로 선택의 문제다. 하지만 이 구조를 다른 곳에서도 쓰고 있지만, 그 곳에서의 ie문제는 없기 때문에 그냥 ie 패치를 진행하기로 했다. @char.. 2021. 7. 15.
vscode php scss 사용하기 sass 컴파일러 설치 설치 가이드: VS Code에서 PHP 프로젝트에 SCSS 사용하기 및 SASS 컴파일러 설치 소개 안녕하세요! 이번 포스팅에서는 VS Code에서 PHP 프로젝트에 SCSS를 사용하는 방법과 SASS 컴파일러 설치에 대해 알아보겠습니다. VS Code는 앵귤러를 사용하던 분들도 SCSS를 편리하게 활용할 수 있는 좋은 도구입니다. SCSS는 브라우저가 직접 이해하지 못하기 때문에 SASS 컴파일러를 통해 CSS 파일로 변환해주어야 합니다. 이를 통해 개발자들은 편리하게 작업할 수 있습니다. 필요한 확장 설치 먼저, VS Code에서 SCSS를 사용하기 위해 필요한 확장을 설치해 보겠습니다. 다음 확장을 설치하면 SCSS 작업이 더욱 편리해집니다. Live Sass Compiler: 이 확장은 SCSS .. 2021. 7. 14.
visual studio code 들여쓰기 fomatter tab 간격 조정 visual studio code 들여 쓰기 fomatter tab 간격 조정 예전에는 드림위버로 주로 작업했는데, 요새는 웬만한 프로젝트에서는 VScode로 한다. 어느 날 정신 줄 놓고 있다가, 뭘 건드렸는지, 포매터의 텍스트 들여 쓰기 간격이 너무 넓어졌다. 탭 간격이 8문자 간격이다. 이걸 확인하는것은 태스크바의 spaces 옆의 숫자를 보면 된다. 이 설정 역시 저 부분을 클릭하면 된다. 위의 Spaces:8을 클릭하면 다음과 같은 드롭이 열린다. Indent Using Spaces를 선택한다. 1 문자부터 8개까지 선택이 가능하다. 현재는 8문자로 선택되어 있다. VS코드 전체의 설정은 2 문자로 탭 사이즈를 지정해둔 상태다. 2를 선택하면 2문자 간격으로 바뀐다. 나는 주로 space로 들여.. 2021. 7. 9.
웹 접근성 앵커 태그 A에 onfocus hover 시각화 (점선 테두리)가 나타나지 않을 때 해결법. 초점을 인지할 수 없는 링크 및 서식 개수 웹 접근성 심사를 받다 보면, 전혀 예기치 못했던 부분에서 감점을 받게 되는 경우가 종종 있다. 팀작업이나, 예전에 다른 사업자가 작업했던 부분에서 너무나 도 기초적인 부분을 체크하지 못했던 경우에 종종 문제가 생긴다. 직접 했던 프로젝트라면 웹 접근성의 기본과 기초에 맞춰서 작업을 했을 테니 기본적으로 갖추었어야 할 부분인데, 남이 했던 것인데 "설마 이런 것도 틀리겠어?" 라고 생각하는 부분에서 문제는 발생한다. 다행히 위와 같이 초점을 인지할 수 없는 링크 및 서식 개수의 문제에 있어서 초점을 시각적으로 인지할 수 없는 링크의 경우 의도적으로 시각화를 날려 버린 경우가 아니라면, X가 아닌 △을 받긴 한다. 하지만 모든 심사관이△를 준다는 보장은 없다. 그리고 의도적으로 onfocus=blur();.. 2021. 7. 7.
SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기/성별 통계 CSS 디자인 SASS SCSS에서 :hover 상태일 때 a 태그 아래 각기 다른 색을 동일하게 변경하기 소개 이 문서는 SASS(SCSS)를 사용하여 a 태그 아래에 있는 각 요소의 색상을 동일하게 변경하는 방법에 대해 설명합니다. 이 기술은 간단한데, SCSS의 구조를 활용하여 효과적으로 스타일을 적용할 수 있습니다. 해당 방법을 통해 마우스 오버 시 모든 요소의 색이 반전되는 효과를 구현할 수 있습니다. 상세 설명 먼저, 아래와 같은 HTML 구조를 가정해봅시다. Contents 스페인하숙 3화 미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요 위와 같은 구조에서 SCSS를 활용하여 스타일을 적용해보겠습니다. .latest { .card { .. 2021. 7. 5.
Bootstrap 4 Carousel : 자동 재생 중지 방법 부트스트랩 슬라이더 처음 퍼블리셔를 시작했을 때 내게 카루셀(Carousel)은 악몽 같은 존재였다. 클라이언트들이 요구하는 각종 사안을 적용해서 슬라이더를 매번 새로 만들어야 했기 때문이다. 요즘은 부트스트랩같은 라이브러리가 많이 사용되고 있어서 슬라이더 구현이 너무 편하다. Bootstrap 4는 별로 친절하지 않다. Bootstrap 4에 카루셀 슬라이더가 있지만, 처음부터 자동재생이다. 이걸 원한다면 너무도 간편한 방법이지만, 처음에 멈춰 있기를 원한다면 이 때는 패닉이다. 방법은 의외로 간단하고 무궁무진하다. 먼저 예제를 보자. 가장 간단한 방법은 data-ride =”carousel” 를 빼 버리는 방법이다. 이게 없으면 부트스트랩 슬라이더는 멈춰 있다. 아니 멈춰두면 이게 뭐냐? 싶겠지만 부트스트랩 슬라이더는 .. 2021. 7. 2.
vscode 파일 찾기 단축키, 프로젝트 내 특정 폴더 파일에서 찾기 - 문자열 검색 VS code 파일 찾기 단축키. VS코드에서 파일 익스플로러가 유용하지만, 프로젝트 규모가 커져서 폴더 구조가 복잡해지고 파일이 많아지면, 특정 파일을 찾을 때는 파일 찾기를 해야 한다. 왼쪽의 아이콘은 파일 내에서 특정 문자열을 찾아주는데 유용하지만, 파일 자체를 찾을 때는 파일 찾기를 해야 한다. 단축키는 보통 윈도우에서는 CTRL+P를 사용하면 유용하다. 리눅스에서도 많이 사용되는 단축키이므로 Ctrl+P로 외워두는 것이 용이하다. Windows vscode 단축키 Ctrl+E 혹은 Ctrl+P MAC용 vscode 단축키 Cmd+P 구형 MAC 단축키 Cmd+E Linux용 vscode 파일 찾기 단축키 Ctrl+P -blackun.com vscode 문자열 검색 프로젝트 내 특정 폴더 파일에서.. 2021. 7. 1.
php include로 파라미터 값 넘기기 (php include parameters) & php switch case 분기 처리 php include로 파라미터 값 넘기기 (php include parameters) 주소 뒤에 ?id=1과 같이 파라미터를 붙여서 include를 할 수는 없다. 대신 php의 include는 별도의 스코프(scope)를 가지지 않으므로 설정된 변수를 함께 공유한다. 따라서 와 같이 선언하고 받는 측 즉 위의 경우라면 list_contents_card_toolbar.php는 다음과 같이 파라미터를 받는다. php switch case 분기 처리는 위와 같이 한다. 2021. 7. 1.
리액트 데이트피커 포맷 api axios error문제 react datepicker date format axios not working 리액트에서는 jquery용 데이트 피커를 사용할 수 없다. 아니 사실 리액트용 데이트피커인 react datepicker가 훨씬 깔끔하게 사용되기 때문에 굳이 제이쿼리 데이트 피커를 붙여야 할 필요가 없다. 사실 아직 리액트가 초짜라 react datepicker를 온전히 다루지는 못하고 있기 때문에 정석으로 설정하는 방법은 사실 나도 잘 모르겠다. 일단, 신규 프로젝트에서 datepicker를 사용할 일이 있어서 설치했다. yarn add react-datepicker 혹은 npm i react-datepicker 로 설치 하면 되겠다. 그런데 문제는 이렇게 설치하고 import DatePicker from "react-datepicker"; 했을 경우 스타일 깨짐 문제가 발생했다. 이유는 모르겠지만 .. 2021. 5. 27.
워드프레스 사이트 이름 문자 출력 인스턴스 bloginfo( 'name' ); 워드프레스는 PHP로 만들어졌다. 하지만 워드프레스에서 쓰는 모든 함수가 PHP 네이티브 함수는 아니다. 워드프레스 사이트 이름을 문자로 출력하고자 할 때 찾는 방법은 많지만 이미 워드프레스 코어 자체가 사이트 이름을 bloginfo의 인스턴스로 가지고 있다. 이 것을 호출해서 쓰기만 하면 된다. 사용방법은 간단하다. 쓰고 싶은 위치에서 2021. 4. 23.

티스토리툴바