본문 바로가기

분류 전체보기

 (244)
[CSS] 선택자 옵션 자주 사용하는 클래스 명 선택자 옵션은 아래와 같다. 값이 특정하는 단어의 전체일 필요는 없다. 1. [class^="btn-"] class 명이 "btn-"으로 시작되는 모든 선택자들 2. [class*="test"] class 명 중에 "test"를 포함하는 모든 선택자들 3. [class$="--outline"] class 명 중에 "--outline"으로 끝나는 모든 선택자들 참고 사이트 : https://www.w3schools.com/css/css_attribute_selectors.asp CSS Attribute Selector W3Schools offers free online tutorials, references and exercises in all the major languages ..
[VSCode] Sass Live Compile 설정하기 sass를 사용하기위해서 몇가지 셋팅이 필요하다. 컴파일을 할때 어떠한 형식의 css로 컴파일을 할것인지부터 시작해서 어떤 특정 scss파일만 도출해 낼것인지까지 다양한 옵션으로 셋팅이 가능하다. 1. 플러그인 live sass compiler와 Sass 설치하기 2. 불필요한 공백 모두 제거(compressed)와 특정 파일 main.scss, sub.scss만 컴파일 하며 오토프리픽스로 크로스브라우징(브라우저별 인식 코드 자동 삽입)을 할 예정이다. ex) display: flex;만 작업자가 scss에 작성하여도, 자주 사용하는 브라우저들의 프리픽스를 선언하여 인식할 수 있게 해준다. display: flex;를 컴파일한 결과는, display: -webkit-box; display: -ms-fle..
[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를 골라 저장 및 실행한다. ..

티스토리툴바