JNarin Development Story

구글 문서를 쓰다 보면 일반적으로 한글과 다른 점으로 인해, 헷갈리는 경우가 생긴다. 그러한 것 때문에 자주 검색을 하게 되는데 이를 방지하고자 정리를 하게 되었다. 이 글을 상황에 따라 계속 업데이트가 될 예정이다. 1. 가운데 정렬 표를 정리하다보면 가운데 정렬을 많이 하게 되는데, 세로로 가운데 정렬은 아무리 눈 씻고 찾아봐도 보이지 않는다. 하지만 한글처럼 생각 말고 우클릭을 해보면 아래 이미지처럼 보인다. 표 속성을 클릭한다. 표 속성에서 셀 세로 정렬이라는 카테고리가 존재한다. 해당하는 부분에서 가운데로 변경을 한 후 확인을 눌러준다. 그럼 다음과 같이 세로 가운데 정렬이 된 것을 확인할 수 있다. 한글과 다른점은 역시 우클릭에서 표 속성을 통해야지만 세로 가운데 정렬이라는 게 좀 불편하지만,..

오늘은 한 번도 생각하지 않았던 부분에 대해 피드백을 받게 되어 사용하게 된 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..

이번 주는 프로그래스 바를 업그레이드한 방법으로 예제는 많이 나아 있는 것 같지만, 기록과 정리를 위해 글을 쓰게 되었다. 1. Scroll Indicator( 스크롤 표시기 ) CSS와 자바스크립트를 통해 이 페이지를 어디까지 보았는지 확인할 수 있는 일종의 게이지 바 같은 것이다. 사실 이 명칭을 어떻게 표현이 되는지 잘 모르겠다. 그래서 찾는데 생각보다 오래 걸려 하루 종일 회사 프로젝트에 이 한 가지 구현만 찾게 되었다. 하지만 실상은 너무 간단한 코드였다. document.addEventListener('scroll', () => { progress = document.querySelector('.progress-bar'); let winScroll = document.body.scrollTop..