프론트엔드 작업할때 종종 쓰는 줄바꿈. 보통은 통일된 디자인을 위해 한줄 줄바꿈을 많이 쓰지만 가끔 여러줄 줄바꿈을 쓰는 경우도 있다. 그럴때 복붙해서 사용하려고 나를 위해 정리하는 글...ㅋㅋㅋㅋㅋㅋㅋ한 줄 줄바꿈.text-ellipsis{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} 여러 줄 줄바꿈/* 3줄 줄바꿈 */.text-ellipsis--3{ text-overflow:ellipsis; overflow:hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;}예시는 ..

글을 시작하기에 앞서 @font-face를 설정하려면 웹폰트를 사용하는 것보다 폰트 파일 자체를 프로젝트 내부에 assets으로 저장해서 사용하는 것을 권장한다고 한다. 이와 관련해서 사실 정확한 이유는 잘 모르겠다. 혹시 아시는 분 댓글좀..... 프론트 엔드로 직무 전환을 한 뒤 다양한 프로젝트에 참여해볼 수 있었는데 그중 진짜(!?) 웹 디자이너와 함께 했던 프로젝트는 대부분 폰트가 두가지로 나뉘었다. - 기본폰트 Noto Sans KR - 숫자폰트 Roboto 사실 처음에는 기본폰트를 Noto Sans로 설정해두고 숫자 타입이 들어가는 요소들만 Roboto를 설정했는데 사실 only 숫자만 들어가는 요소보다는 주로 'XX개', 'XX,000원', 'XX명' 등 한글과 섞이는 경우가 많고 그렇다고 ..

새프로젝트를 시작하면서 여러명의 프론트엔드 개발자들이 동시에 다른 페이지들을 작업하게됐는데 통일성 있고 효율적인 작업을 위해 루트 스타일root style을 정해놓고 시작하기로 했다. root style은 보통 웹사이트, 앱 프로젝트의 테마컬러를 주로 지정해놓고 사용하는 것 같은데 컬러뿐만아니라 자주 사용하는 스타일을 변수처럼 지정해놓고 사용할 수 있기때문에 잘 익혀두면 협업뿐만아니라 프론트엔드 작업하기에 전반적으로 정말 편할 것 같다. 참고로 구글도 개발자모드로 스타일을 확인해보면 아래와같이 테마컬러를 지정해서 사용하고 있다. 전체 페이지에 공통으로 적용해야하니 루트 요소에 적용을 해주는데 위의 구글 코드처럼 html에 적용해도 되고 :root 라는 의사 클래스를 사용해 적용할수도 있다. 사용법은 간단..

input태그 커스텀은 label으로! html태그 는 기본적으로 아주 심플한 디자인으로 보여지는데 프로젝트를 진행해보면 사이트의 분위기라던거 컨셉에따라 다른 디자인으로 변경해야하는 경우가 있다. 근데 단순하게 style로 바로 input태그를 커스텀할수가 없다. 이때 사용하는 방법이 바로 lable이다. checkbox뿐만아니라 같은 방법으로 파일 열기인 도 역시 label으로 커스텀할 수 있다. 일단 기본 체크박스의 경우 아래와 같다. 이걸 조금 더 사이즈가 큰 체크박스로 바꿔보려고 한다 checkbox옆에 label태그를 생성해 checkbox의 id 속성을 label태그의 for속성으로 연결해준다 · html 그리고 이 라벨을 원하는 디자인으로 css 스타일을 꾸며준다. 체크시 디자인은 그냥 박스..