< HwanLog />

문제상황 텍스트 줄바꿈 규칙을 정의할때 사용되는 css속성 특정 영역안의 텍스트가 삐져 나온현상 발견... 한글은 텍스트 안에서 삐져나간 글자가 없지만 영어는 빠져나간게 있다. word-wrap `(영어) 비 아시아 언어 줄바꿈 ` // 기본값 단어기준 word-wrap: normal; // 단어기준 x 글자기준 o word-wrap: break-word; word-break `아시아 , 비아시아 다 적용됨 (영어,[한국어,일본어,중국어])` // 기본값 word-break: normal; // 글자 기준 word-break: break-all; // 단어 기준 word-break: keep-all; 영어만 적용 : word-wrap 영어+한글 둘다 적용 : word-break

그레디언트 효과 눈으로 쉽게 확인하는 사이트 가끔 혼자 사이트를 만들다 보면 그레디 언트 효과를 사용할 때가 있는데 그럴 때마다 코드 값을 변경하면서 그레디언트 효과를 찾기는 불편하기 때문에 그레디언트 효과를 한눈에 보기 쉽게 만들어 주는 사이트를 소개할까 한다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 위 사이트에서 좀더 쉽게 그..

CSS 코드들을 보다보면 간혹 font-size : 62.5%가 적용되어 있는걸 확인할 수 있다. html { font-size: 62.5%; } 62.5%란 무엇인가 ? 대부분 기본 브라우저는 16px 기본값으로 사용한다. font-size : 62.5% , 적용하면 10px로 바뀐다. 10px로 작업하는 이유가 나중에 미디어 쿼리등 반응형 웹을 만들다 보면 웹페이지 크기에 맞춰서 폰트도 바꿔야 하는 경우가 생긴다. 이때 10px로 바뀌어 있으면 rem 단위로 작업할 때 좀 더 수월히 적용할 수 있기때문에 10px로 바꿔서 사용한다.