JNarin Development Story

회사에서 처음 배정받은 이메일 템플릿 제작을 진행한 적이 있었다. 근데 생각보다 간단하지만 수정사항이 많았었다. 찾아보아도 이 내용에 대한 정리가 별로 많지 않아 아쉬워 글을 쓰게 되었다. 언제까지나 이 이야기는 필자가 직접 겪은 과정을 회고하듯이 작성한 글임을 밝힌다. 1. body 일반적으로 퍼블리셔/프런트 분들이라면 body에서도 기본적인 스타일 값을 준다. 그래서 나도 평소처럼 body태그 안에 style값을 주려 아래와 같이 작성을 해보았었다. hello 물론 웹상에서는 아무런 문제 없이 잘 보였다. 하지만 진짜 문제는 이메일로 보냈을 때 생겼다. 구글은 body 태그 안의 style값이 잘 들어왔다. 하지만 문제는 네이버였다. 네이버는 body 태그 안의 모든 스타일값을 무시하여 돌아왔다. 이..

node-sass버전은 계속 올라가는데 오류가 발생하는 듯하다. 알아보니 버전을 다운 그레이를 해야 한다고 한다. 먼저 기존의 node-sass를 삭제한다. $ npm uninstall node-sass $ yarn remove node-sass 그런 다음 낮은 버전으로 node-sass를 설치를 한다. $ npm install node-sass@4.14.1 $ yarn add node-sass@4.14.1 npm과 yarn을 쓰시는 것에 따라 두 가지 명령어를 작성하였다. 생각보다 버전을 낮추라고 나오는 경우가 꽤 있는 듯하다. TMI node-sass는 노드에 의존성이 강하기 때문에 노드 버전에 따라 node-sass의 버전이 달라진다. 그래서 npm에서 node-sass공식문서에 보면 다음과 같은 ..

오늘은 한 번도 생각하지 않았던 부분에 대해 피드백을 받게 되어 사용하게 된 CSS를 정리하려고 한다. 원래는 낱말이 자동으로 줄 바꿈이 되면 기존의 낱말이 떨어지는 경우가 일반적이다. 그런데 이 부분도 보기에는 좋지 않고 줄 바꿈에 의해 영어의 경우 하이폰(-)을 넣곤 하는데 그런 비슷한 기능이라 할 수 있다. word-break 형식 정의 줄바꿈을 할 때 단어 기준으로 할지, 글자 기준으로 할지 정하는 속성입니다. 기본값: normal 상속 : 가능 애니메이션: 불가 버전: CSS Level 3 word-break: 값; word-break의 값은 다음과 같다. 1) normal 기본 줄 바꿈 규칙을 사용합니다. 한국어는 한 글자씩, 영어는 한 단어씩 줄 바꿈이 실행이 된다. 2) break-all ..

보통 그러데이션은 벡 그라운드에 주로 사용한다. 그래서 그 사용법은 CSS Gradient 사이트에서 쉽게 바꾸어 코드로 변환할 수 있다. 근데 우연히 Font Gradient를 바꾸어야 할 경우가 생겨서 알아보다가 찾게 되어 글을 쓰게 되었다. Font Gradient Access 폰트에 그라디언트 적용하는 방법은 다음과 같다. See the Pen CSS: Font Gradient by miok-jung (@miok-jung) on CodePen. 위 코드는 폰트에 gradient를 적용한 예시이다. .border-box{ background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { backgro..

어느 블로그를 가다 보면 간간하게 볼 수 있는 생략의 닷 3개(...) 현재 필자의 블로그 메인 홈페이지를 보시면 볼 수 있는 저 점 세 개가 CSS의 단 2줄로 코드를 작성할 수 있다고 한다. 이전에는 이걸 어떻게 만드는지 몰랐다가, 최근 프로젝트에서 쓰이게 되어서 적용도 해보고 다시 개인 프로젝트에 작업을 해보고 있다. 먼저 간략하게 ellipsis의 뜻이 무엇인지 찾아보았다. ellipsis는 생략이라는 뜻을 가지고 있다. 이렇게 검색해보니 검색 방법을 알게 되는 것 같다. 그럼 바로 프로젝트에 한번 적용해보려고 한다. 네모로 감싼 것의 태그로 감싼 것이며, 일정 공간을 넘어서면 자동으로 줄 바꿈이 되는 것을 볼 수 있다. 먼저, 저 줄 바꿈을 없애준다. p{ white-space: nowrap; ..

회사 프로젝트를 하면서 CSS에 대한 코드가 제각각인 것을 보았다. 그래서 이러한 원인보단 규칙이 정리가 되어 있는 것 같아 다시 기억을 상기시키기 위해 정리하게 되었다. Coding Convention 해당 언어로 작성된 프로그램의 각 측면에 대한 프로그래밍 스타일, 관행 및 방법을 권장하는 특정 프로그래밍 언어에 대한 일련의 지침이다. 규칙에 대한 예시로는 들여 쓰기, 주석, 선언, 공백 등 다양하게 사용될 수 있다. 즉, 코드상으로는 prettierrc를 정의하는 그것과 같다고 볼 수 있다. (prettierrc는 다른 운영체제라 하더라도 동일한 코드 규칙을 정리한 것이라 할 수 있다.) 회사마다 코딩 컨벤션은 다양하다. 1) 구글 코딩 컨벤션 알파벳 순으로 지정한다. 2) 네이버 코딩 컨벤션 순서..

저번에는 CSS에서 변수를 사용하는 방법을 알아보았다. 그렇다면 당연히 SCSS 또한 변수를 사용하는 것 같아 개인 프로젝트에 투입하면서 찾아보게 되었다. 그리고 그 방법이 있고, 몇 가지는 정리하고 싶어서 적게 되었다. 1. Variables 1-1. 변수를 사용하는 방법 SCSS 변수는 다음과 같다. $large-font: 3rem; $small-font: 0.5rem; $main-color: purple; 1-2. 변수를 실제 사용 변수를 실제 SCSS에 적용시 예시는 다음과 같다. body{ font-size: #{$large-font}; color: #{$main-color}; } 2. Mixins 2-1. 믹스인 사용 방법 믹스인은 CSS를 여러개 묶어 재사용을 할 수 있는 모듈을 만들어 주는..

프로젝트를 하다 보면 공통적으로 많이 들어가는 CSS내용이 반복되기도 한다. 그 부분을 변수로 통일하여 사용을 하는 방법을 알게 되어 적으려 한다. CSS 변수 선언하는 방법 --variable-name: value; 여기서 variable-name은 개인이 직접 변수명을 정의하는 것이다. 그리고 그 변수명 뒤로 value 또한 변수에 대한 값을 적는 것이다. CSS 변수 사용하는 방법 property: var(--variable-name); 예제 방법만으로는 이해할 수 없으니 예시를 보여주려 한다. 여기서 root는 CSS는 최상단 CSS에 작업을 하면, h1에서 변수를 사용하듯 어디에서나 사용할 수 있다. 이렇게 쓰이면 실무에서는 메인컬러를 변수로 사용하면 필요에 따라 전체 칼라를 손쉽게 바꿀 수 있..