JNarin Development Story

오늘은 한 번도 생각하지 않았던 부분에 대해 피드백을 받게 되어 사용하게 된 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내용이 반복되기도 한다. 그 부분을 변수로 통일하여 사용을 하는 방법을 알게 되어 적으려 한다. CSS 변수 선언하는 방법 --variable-name: value; 여기서 variable-name은 개인이 직접 변수명을 정의하는 것이다. 그리고 그 변수명 뒤로 value 또한 변수에 대한 값을 적는 것이다. CSS 변수 사용하는 방법 property: var(--variable-name); 예제 방법만으로는 이해할 수 없으니 예시를 보여주려 한다. 여기서 root는 CSS는 최상단 CSS에 작업을 하면, h1에서 변수를 사용하듯 어디에서나 사용할 수 있다. 이렇게 쓰이면 실무에서는 메인컬러를 변수로 사용하면 필요에 따라 전체 칼라를 손쉽게 바꿀 수 있..

회원가입 로직을 하다 보면 정규식에 대해 쓰이는 경우가 종종 있다. 근데 막상 찾다 보면 내가 원하는 데로의 정규식 찾는데 다소 시간이 걸려 그 부분을 해소하고자 정규식 관련 자료를 모아보았다. 이메일 유효성 검사 const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 위 코드는 이메일 형식으로 되어 반드시 @와. 이 들어간 완성된 이메일 형식으로 되어야 한다. ex) test@te_st.com (O) ex) test_34@te3st.com (O) ex) test.to@te2st.com (O) ex) test.coj (X) 번호 유효성 검사 번호 유효성 검사는 크게 핸드폰과 일반..

CSS에서는 초기화 코드라는 것이 있다. 기본적으로 특정 태그에는 기본적으로 CSS가 있는 경우가 있는데, 이 모든 것을 초기화하고 기본으로 설정한다. 그렇게 할 경우 약간의 문제가 생긴 화면 구성을 좀 더 정확하게 코딩 디자인을 할 수 있다. 아래 코드는 퍼블리셔 과정을 했을 당시에 비슷하게 사용하던 reset.css코드다. /* reset CSS Code */ @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,..