Web
[SVG] svg 백그라운드로 사용하기
1. SVG 아이콘을 저장한다. https://heroicons.com/ Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. heroicons.com 2. SVG를 압축한다. (좌측 Paste markup에 붙여넣는다.) https://jakearchibald.github.io/svgomg/ SVGOMG - SVGO's Missing GUI jakearchibald.github.io 3. 백그라운드 이미지로 사용하려면 Data URI로 변경해야 한다. https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io 4. 색상 변경하기 위 코드에서 fill..
[eDM] 이메일 정보성 메일 html 만들때 참고
eDM이란 이메일 코딩을 말한다. 이메일 서비스(gmail, naver, daum, outlook등)나 아웃룻의 버전마다 렌더링 되는 화면이 다르다. 테스트를 하며 디자인과 맞춰야 하기 때문에 쉽지 않은 작업이다. 아래는 아웃룩 이메일 템플릿 작업을 하며 경험한 특징들을 공유하고자 정리한 내용이다. 인라인 스타일 스타일 시트를 별도로 사용하지 않고 태그에 인라인 스타일로 작성한다. table 레이아웃은 div가 아니라 table로 설계해야 한다. 코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들(특히 아웃룩)이 이를 지원하지 않는다. width, height, align 너비, 높이, 정렬들은 HTML 속성으로 지정해줘야 한다. image 이미지 태그는 렌더링되면서 이미지 아래에 여백이 생긴다. 이..
[CSS] 배경 필터 backdrop-filter
backdrop-filter는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성이다. 요소 뒤에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 반투명하게 설정해야 한다. .blur { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(2px); } .brightness { -webkit-backdrop-filter: brightness(1.5); backdrop-filter: brightness(1.5); } .contrast { -webkit-backdrop-filter: contrast(.8); backdrop-filter: contrast(.8); } .drop-shadow { -webkit-backdrop..
[VUE] 엘리먼트 간 transition
HM 프로젝트 작업중... 한 페이지에서 엘리먼트 페이지 전환 효과를 멋있게 주고 싶었다. v-if / v-else를 사용해서 엘리먼트 사이를 트랜지션 할 수 있다. v-if 이기 때문에 트랜지션 내에 엘리먼트가 한개이니까 트랜지션이 자연스럽겠지? 생각을 하고 아래와 같이 작업을 했다. 그랬더니 조건에 따라 v-if를 변경할때마다 트랜지션이 뚝뚝 끊기고 이상했다. ... ... ... 이상하다. 구글링 구글링...@@ 검색을 해보니 Vue 가이드 사이트에 아주 친절하게 이유가 있었다.(멀리 가지 말고 정식 가이드부터 확실하게 보자) 아래와 같이 트랜지션 내에 v-if로 엘리먼트 변경을 할 때는 :key 값을 같이 넣어줘야 한다. ... ... ... Vue 가이드 왈.. Vue 에서는 같은 태그 이름을 ..
[VUE] vue.js 에서 aos.js 사용하기
작업환경 : vue.js 2.6.11 + typescript + yarn 1. aos 패키지 설치 yarn add 'aos' --save-dev yarn add '@types/aos' --save-dev ❗ aos만 설치하면 에러가 뜬다. 타입스크립트 버전으로 추가 설치를 해야한다. 2. main.ts import AOS from 'aos' import 'aos/dist/aos.css' Vue.use(AOS); new Vue({ router, store, mounted () { AOS.init({ easing: 'my-easing', duration: 500, delay: 50 }); }, render: h => h(App), }).$mount('#app') ❗ AOS.init 옵션은 원하는대로 커스텀해..
[VUE] vue.js 라이프 사이클
VUE 와 친해지기..! 😎 Vue 인스턴스나 컴포넌트가 만들어질 때 몇 단계의 과정을 거치게 되는데, 이를 라이프사이클(life cycle)이라 한다. 즉 Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 말한다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거친다. Vue는 각각의 단계에서 훅(Hook)을 할 수 있도록 API를 제공한다. beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 가 있다. 자세히 😏😎😉 알아보자 beforeCreate - Vue 인스턴스..
[HTML] 태그
쓰던것만 쓰다보니.. 분위기도 전환시키고 좀 더 탄탄한 마크업을 위해 주기적으로 봐야할 html 태그들.. HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위입니다. : HTML5에서 새롭게 추가된 태그 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함. 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함. 머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요소를 사용함. 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함. 문서에 포함되는 애플릿(웹 페이지에 포함되..
[SEO] 메타태그 최적화
🔎 SEO SEO 작업은 검색환경에 맞게 내 웹사이트를 최적화하는것을 뜻한다. SEO 작업이 잘 되어 있을 수록 내 웹사이트의 검색 결과가 더 좋은곳에 위치할 수 있다. 이는 곧 유입률과 연관있기 때문에 SEO 최적화는 중요하다. SEO를 위한 메타 태그 최적화 작업중 가장 기본은 메타태그 설정(최적화)이다. 메타태그란, 웹페이지의 정보를 담고 있는 태그라고 생각하면 된다. 사이트맵 제출 이는 간단하게 말하면 웹사이트의 설계도면과 같다. 보통 XML 파일형식으로 사이트맵을 구성하게 된다. 처음 SEO를 하는 사람들은 직접 셋팅하기에는 힘들기 때문에 XML 자동생성 사이트의 도움을 받는 것이 좋다. robots.txt 설정 이는 현실로 따지면 문지기와 같다. 내 웹사이트에 검색로봇이 들어올 수 있게 허가를..
[CSS] !important를 대체할 :all
클래스 우선순위를 높이기 위해 최후의 방법으로 많이 쓰는 !important 쓸때는 편하지만 자칫 !important 남발이 일어날수가 있다. 그럴 때는 all 을 사용해서 초깃값으로 세팅해줄 수 있다. (!important가 미리 선언되어 있다면 안먹힌다.) https://jsfiddle.net/Kimara/73aj9pz0/21/ https://developer.mozilla.org/ko/docs/Web/CSS/all all - CSS: Cascading Style Sheets | MDN CSS all 단축 속성은 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. developer.mozilla.org