본문 바로가기
[VSCode] 기본 셋팅 리스트 및 플러그인 위치 VSCode를 새로 셋팅할 때마다 처음부터 플러그인을 하나하나 Install 할 필요 없이 extensions 폴더를 저장하여 필요할 때마다 폴더를 붙여넣어주면 된다. 그리고 현재 내 작업 Windows 환경의 VSCode 확장 플러그인을 백업해둘 용도의 포스팅이기도 하다. 보통 윈도우에서 extensions 폴더 위치는 C:\Users\Users_name\.vscode\extensions에 있다. 아래가 현재 내 로컬 VSCode의 확장 플러그인이다.
[Sass] .scss로 svg 아이콘 색상 변경 svg 파일은 백터 형태로서 픽셀단위가 아니여서 깨지는 현상이 없는 파일이다. 따라서 작은 사이즈의 파일 형태라도 원하는 사이즈로 자유롭게 이용이 가능하며, 이를 데이터 형식으로 변환하여 사용할 경우 그리는 형식이라 사이즈 및 색상을 자유자제로 변경이 가능하다. 또한 svg 파일을 코드에 사용할 경우 ie에서 호환이 되지 않지만, Sass와 svg data 형태를 사용하게 되면 ie10 이상부터 호환이 가능하다. (ie10~) 그러기 위해선 Sass를 사용하는 방법을 소개하고자 한다. 기존에 svg를 data 형식으로 바꾸는 방법에 대해서 포스팅을 했었다. https://jintrue.tistory.com/entry/SVG-data-%ED%98%95%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EB..
[Publishing] 반응형 배너 작업 사이트를 만들다 보면 banner list 이미지 사이즈 높이값을 지정하기가 애매하다. 높이값을 픽셀로 지정해버리면 해당 배너 등록 비율이 깨질수도 있기 때문이다. 따라서 등록한 배너 비율을 유지하면서 반응형 작업을 해야하는데, image banner responsive style(CSS)는 다음과 같다. 우선 HTML 구조를 img 태그를 감싸는 부모와, img 태그로 코딩한다. 이미지 비율에 따라 부모 클래스 "img-area"의 padding-top이나 padding-bottom의 퍼센트 스타일을 주어야한다. padding-top을 줄것인가 bottom을 줄것인가는 개인 선택이다. 여기서는 padding-bottom으로 예를 들겠다. 여기서 알아두어야 할 것이 해당 이미지 비율인데 이미지 비율마다 ..
[Javascript] 특정 미디어에서만 함수 실행 보통 $(window).on("resize", function(){}); 과 if($(window).outerWidth() == "") {} 를 사용하여 특정 미디어의 조건을 사용하였었는데 이벤트나 함수를 실행할 경우 제대로 적용이 안되었었다. 따라서 자바스크립트만을 사용하여 아래와 같이 미디어 쿼리를 제어하여 함수 실행을 하였더니 안정적이게 작동이 되었다. $(function(){ function gnbMouseFunction(){ $(".gnb-list__title").on("mouseenter", function(){ $this = $(this); $(".gnb-list__title").removeClass("on"); $(".depth2-page-frame").each(function(i,v){ ..
[SVG] data 형식으로 변환하기 svg 이미지 파일을 해당 파일 없이 scss나 css 파일에 저장해둔 background-image 형태로 가지고 다니기 위해선 data 형식의 svg 소스가 필요하다. 그럴때 변환 해주는 유용한 사이트는 아래와 같다. https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io
[SVG] svg window 미리보기 윈도우 환경에서 svg 이미지 파일을 미리보기란 쉽지 않다. 1. 탐색기에서 오른쪽 마우스> 보기> 큰아이콘 으로 설정 해두기 2. 아래 깃허브 레파지토리에 있는 .exe를 다운받아 실행하기 https://github.com/tibold/svg-explorer-extension/releases Releases · tibold/svg-explorer-extension Extension module for Windows Explorer to render SVG thumbnails, so that you can have an overview of your SVG files - tibold/svg-explorer-extension github.com 자신 로컬환경에 맞는 비트.exe를 골라 저장 및 실행한다. ..
[Publishing] position 상쇄 ie 대응 기존 스타일에 position이 정의되어 있을 때 상쇄하는 스타일로 'initial'를 사용하였을 때 ie에서 인식하지 못한다. position: intial; left: initial; bottom: initial; width: initial; 익스를 고려한다면 initial 보단 static를 사용하여 상쇄시킨다. 참고 url: https://www.w3schools.com/css/css_positioning.asp CSS Layout - The position Property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subje..
[Publishing] 이미지 블러 처리 및 텍스트 위치 CSS 위의 예시로 1770px 과 1130px window 사이즈를 들어보았는데, 이야기 하고자하는 바는, 이미지 블러처리 + 하단에 "2022.03 Sample Onboard Training Programme" 텍스트 위치가 window 사이즈를 줄였을 때에도 같은 위치에 떨어지게 구현하는 것이다. CSS 1. blur 영역의 부모 및 blur 클래스 .blur-parents { display: inline-block; position: relative; } .blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 14%, r..

티스토리툴바