SSOMI SSOMI

HTML, CSS를 작성할 때는 표준을 준수해야 한다. 표준은 일종의 작성 가이드 역할을 하는데 이메일에는 표준이 없다. 웹메일 제공 서비스인 구글, 네이버, 다음, 네이트 등은 보안상의 이유로 지극히 낮은 웹/앱 호환성을 갖고 있다.이런 수수많은 클라이언트의 랜더링 화면 또한 상이하기때문에 각각의 랜더링 가능성을 고려해야 하며, 제공하는 이메일(서비스)의 성격에 따라 고려해야 하는 클라이언트가 늘어나거나 줄어들 수 있다. 따라서,일반적인 표준 HTML과 CSS의 작성 방식으로는 메일 템플릿을 소화하기 어려워진다. 구축 전 유의사항 1. 마크업(Markup) 몇몇의 이메일 클라이언트는 div 태그나 margin 속성 같이 표준 코딩에서 자주 사용하는 개념을 미지원하기때문에 정상적인 이메일 구조를 제공하기..

Vue.js란? 간단한 화면 UI개발부터 라우팅(Routing : 페이지간의 이동), SSR(Server Side Rendering) 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크 리액트와 더불어 실무에서 가장 많이 사용되고 있는 프론트엔드 개발 라이브러리 리액트에 비해 진입 장벽이 낮고 쉽게 배울 수 있다. 프론트엔드, 백엔드 등 점차 직무적으로 전문화되고 있는 상황에서 처음 개발을 시작하는 프론트엔드 개발자 또는 백엔드 개발자에게 선호되는 경향 Vue 2와 Vue3의 차이점 vue2에서 작성되었던 라이브러리 내부 로직들이 전부 다 TypeScript 기반으로 재작성 주요 개발 도구들 변경 예) 뷰 개발자 도구, VsCode 플러그인(Vetur (Vue2 플러그인), Volar(Vue3 플러그인)..

[SCSS란] SCSS란 모든 CSS를 지원함과 동시에 더해서 추가적인 기능을 제공하는 CSS전처리기 [SCSS의 장점] 1. 변수 변수값을 수정하면 변수를 사용한 모든 부분이 한번에 바뀌어 값을 하나하나 바꿔야하는 번거로움이 없다. **변수 예시** :root{ --gray_100: #000; --gray_95: #222; } .box{ color: var(--gray_100); } 2. 연산 레이아웃 작업시 상황에 맞게 크기를 계산 하거나 정해진 값을 나눠서 작성할 경우 유용하다. 나누기 연산을 할 때 주의해야 할 사항으로는 css는 속성 값의 숫자를 분리하는 방법으로 / 를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다. 따라서 /를 나누기 연산 기능으로 사용하려면 다음과 같은 조건을..

아래는 디자인값 그대로 가져와서 넣을 때 나오는 모양이다. title 옆에 label을 만들다가 height가 안맞는 부분을 어떻게 맞춰야 하는지에 대해 궁금해졌다. 디자인 그대로 만들었을 때는h 아래와 같이 height 값이 21px이 나오지 않는다. ( 피그마-> width 54px / height 21px / padding 6px 8px / font-size: 11px / line-height 24px ) [해결법] min-width 로 최소 width 값 설정 (글자 수에 따라 사이즈가 달라져야 하기 때문에 width 값은 주지 않기) 위아래 padding은 주지 않고 양 옆에만 padding 값을 준다. 2줄로 떨어지지 않는 라벨의 경우 height 값을 준다. 글자 틀어짐은 line-heigh..

귀여운 테마 사용법이 있길래 참고해서 vscode 테마를 바꿔보았다. 장점은 이쁜 것과 보기 편하다는 점 정도인 것 같지만 이쁘다는게 내가 까는 이유이니까.. 적용하는거로~ Monokai Pro / One Monokai Theme 2가지를 깔고 디자인을 비교해보았는데 개인적으로는 One Monokai Theme 이 더 좋다. 1. extensions 에서 Monokai Pro / One Monokai Theme 를 쳐서 install. 2. 디자인 적용 - Set Color Theme 클릭 3. 원하는 디자인을 선택 후 enter. 1) Monokai Pro ex) Monokai Classic ex) Monokai Pro ex) Monokai Pro(Filter Machine) ex) Monokai Pr..

vscode 확장프로그램으로 소스 코드에서 원하는 부분에 마우스 클릭을 하면 해당 된 부분을 작성한 사람과 코멘트를 볼 수 있다. 1. 설치하기 2. 마우스 클릭 후 해당 소스 라인에 작성한 사람 및 코멘트 등 확인 가능 3. 아직 아래 부분은 잘 모르는 기능(브랜치에 대한 부분 찾아보기)

1. Git이란 형상 관리 도구 형상관리(Software configuration management)란 소프트웨어의 변경사항을 체계적으로 추척하고 통제하는 것 형상관리 도구의 종류 - CVS - SVN - GIT 2. Git, Github git -> 형상 관리 도구(버전 관리 시스템) github -> 형상 관리 도구(버전 관리) 웹호스팅 서비스 3.Git GUI란 GUI(Graphical User Interface) 초보자가 명령이나 작업을 이해하기 쉽도록 프로젝트 히스토리를 시각화하여 도와주는 도구 GUI를 사용하는 이유 - Git UI를 직관적으로 확인하고 이해하기가 쉽다. - 사용자 작업 속도를 향상시킨다. - CUI에 위험성을 최소화 할 수 있다. - git 관리 인수인계가 수월하다. - 명..

만들어둔 팝업이 하단까지 전부 나와야하는데 중간에 멈추는 에러 현상이 발생. 내가 가지고 있는 소스는 페이지 내에 팝업 소스가 포함되어 있어서 스크립트에서 구하는 높이값이 일정하게 나온다. 콜백 기능은 팝업이 활성화 된 후 실행되어야하는데 개발에서 가져가면서 에러가 났을 것으로 예상. 팝업 혹은 관련 소스를 페이지에 ajax를 통해 불러오는 경우나 일부 소스를 불러오는 경우에는 전달한 기능과 시점 차이로 인해 높이값이 달리지는 경우가 발생할 수 있다. 팝업이 활성화되고 팝업내 컨텐츠가 모두 랜더링된 후 높이값들을 구하고 위치를 잡아야 한다. (함수를 팝업이 활성화되거나 컨텐츠 랜더링 이후 호출) 1) 높이값 구하기 $winH = 전체 높이값 $headerH = 팝업 내 header 높이값 $content..