All
[이슈노트] iOS 이슈 모음 #5 (가로모드 여백, 확대)
1. 사파리에서 가로모드일 때, 사이트 양쪽에 여백이 생기는 이슈 이거 뭐람..? 사파리는 왜 자꾸 혼자 놀지..?? 해결 방법은 생각보다 간단하다. 위와 같이 뷰포트에 viewport-fit=cover 를 추가해주면 된다. 참고 : https://webkit.org/blog/7929/designing-websites-for-iphone-x/ Designing Websites for iPhone X The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. webkit.org 2. 사파리에서 확대되는 이슈 ios 에서는 더이상 뷰포트 user-scalable=no 를 ..
[eDM] 이메일 정보성 메일 html 만들때 참고
eDM이란 이메일 코딩을 말한다. 이메일 서비스(gmail, naver, daum, outlook등)나 아웃룻의 버전마다 렌더링 되는 화면이 다르다. 테스트를 하며 디자인과 맞춰야 하기 때문에 쉽지 않은 작업이다. 아래는 아웃룩 이메일 템플릿 작업을 하며 경험한 특징들을 공유하고자 정리한 내용이다. 인라인 스타일 스타일 시트를 별도로 사용하지 않고 태그에 인라인 스타일로 작성한다. table 레이아웃은 div가 아니라 table로 설계해야 한다. 코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들(특히 아웃룩)이 이를 지원하지 않는다. width, height, align 너비, 높이, 정렬들은 HTML 속성으로 지정해줘야 한다. image 이미지 태그는 렌더링되면서 이미지 아래에 여백이 생긴다. 이..
[git hub] cli 로 포크 받은 저장소에서 issue/pr 보내보기
✨ git hub cli를 설치한다. https://cli.github.com/ GitHub CLI Take GitHub to the command line cli.github.com 🧨 처음에 포크받은 레파지토리에서 vscode 터미널을 열어서 gh 를 실행하려고 할 때, 원본 레파지토리와 포크 레파지토리 중에서 고른다. 🧨 나는 포크된 저장소를 선택했고, 이 선택은 앞으로 있을 이슈와 pr에서 원본 레파지토리를 필수 선택을 해야 실행이 되는 불편함을 야기했다. 🧨 초기 설정을 변경하고 싶었으나 방법을 못찾았고, 아마도 폴더를 다시 만들어야 하지 않나 싶다. (혹시 재설정 아는 사람 댓글 달아주면 감사하겠다.) # 레파지토리 변경해서 이슈 올리기 gh issue create --title "test" ..
[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 인스턴스..
[git hub] 자주쓰는 git hub 명령어
소스트리도 좋지만 여러개의 계정이라던가 많은 저장소로 인해 느려질 때 등.. 명령어 쳐서 하는게 빠르고 좋다. 명령어 치는것에 익숙해지자. 우선은 자주 쓰는 명령어로 정리. 포크 받아서 풀리퀘 받는건 git hub에서 바로 하는게 좋다는 생각이 들어서 패스. git clone 주소 클론 git add . 업데이트 된 파일 스테이징에 추가 git add -A git status 현재 add 내역 확인 git commit -m "메세지" 커밋 git remote add origin 주소 원격 저장소 git hub url git push origin main 푸시 git branch -M main 브랜치 변경 git pull 풀 받기 git log 커밋 이력 git diff 변견 내용 확인 git reset ..
[HTML] 태그
쓰던것만 쓰다보니.. 분위기도 전환시키고 좀 더 탄탄한 마크업을 위해 주기적으로 봐야할 html 태그들.. HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위입니다. : HTML5에서 새롭게 추가된 태그 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함. 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함. 머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요소를 사용함. 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함. 문서에 포함되는 애플릿(웹 페이지에 포함되..