본문 바로가기

Lect & Tip109

vscode php scss 사용하기 sass 컴파일러 설치 ✈ vscode php scss 사용하기 sass 컴파일러 설치. 처음 vscode를 사용했을 때는 앵귤러를 사용했기 때문에, scss를 기본으로 사용했었다. 얼마 전에 php 프로젝트에 scss를 사용하려고 vscode scss설치를 했다. 기본적으로 브라우저 자체가 scss를 이해하는 것이 아니기 때문에 scss는 sass compiler로 컴파일해서 css파일을 생성해 주어야 한다. 어디까지나 scss는 퍼블리셔의 편의를 위한 기능이지 브라우저를 위한 기능이 아니기 때문이다. vs코드에서 scss를 사용한다는 것은 사용 언어와 무관하게 사용될 수 있다. 바로 Live sass compiler를 설치함으로써 가능하다. sass Lint 익스텐션 설치 설치하는 김에 sass Lint 익스텐션도 설치하면.. 2020. 1. 3.

✈ bootstrap selectpicker multiple js 수정 전체선택 해제 변경 css bootstrap selectpicker multiple js 수정 전체선택 해제 변경. 이 제목을 뭐라고 설명해야 할지 모르겠다. 아무튼 요지는 이렇다. 부트스트랩4의 selectpicker multiple 옵션을 사용할 때 디폴트로 주어지는 모두선택 모두해제 토글 되는게 클라이언트 마음에 안들었나보다. 모든 option이 선택되면 모두 해제되는 것은 당연하지만 하나의 옵션만 선택해도 모두해제로 바뀌는 것이 클라이언트는 이해가 안된 모양이다. 그래서 클라이언트는 전체가 아닌 옵션을 선택하면 전체옵션은 변하지 않고, 전체옵션을 선택하면 모든 옵션도 체크가 된 것 처럼 보이게 해 달라는 것이다. 기본적인 셀렉트피커의 태그 구조는 다음과 같다. 그룹명 그룹설명 부서명 새로 변경해서 스크립트를 짠 html구조.. 2019. 12. 22.

✈ 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 2019. 12. 12.

성별 통계 CSS 디자인 및 SASS ✈ 성별 통계 CSS 디자인 및 SASS 성별 통계 CSS 디자인 및 SASS 성별 차트 플러그인이 딱 디자인에 맞는게 없어서 아래와 같이 만들어봤다. 원리 자체는 간단하다. 그냥 막대그래프에서 퍼센트 통계 그려주는 것과 같다. 다만 다른 점은 BG가 필요한 것 뿐이다. 기본적으로 채워져 있지 않은 테두리만 있는 성별 BG를 부모 객체에 background로 준다. 이후 데이터를 표시하는 엘레먼트는 색을 가진 BG를 background로 받는다. 색이 머리에서부터 칠해진다면 background position은 top이겠지만 보통 이런 차트는 다리부터 색이 칠해져 올라가야 하므로 bottom을 준다. 관련 BG는 아래에 첨부해 두도록 하겠다. 소스코드는 다음과 같다. html 여성 73% 7300 남성 .. 2019. 12. 9.

✈ 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.. 2019. 11. 29.

✈ 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로 들여쓰기를 하지.. 2019. 11. 20.

이전 1 ··· 9 10 11 12 13 14 15 ··· 19 다음

티스토리툴바