728x90 Web/CSS6 [CSS] em,vw 단위 최소 글자크기 설정하는 방법 반응형 폰트 사이즈 em과 vw를 사용하면서 최소로 페이지를 줄여버릴때, 제일 작은 폰트사이즈는 이정도로 했으면 좋겠다 싶을 때가 있습니다. 그 방법을 정리해봅니다. em em은 부모요소의 폰트사이즈를 기반으로 표현한 측정 단위입니다. body { font-size: 16px; } p { font-size: calc(1em + 12px); } body의 폰트사이즈가 16px일때, 그 안에 속해있는 p태그가 있다고 가정합니다. 그렇게 되면 부모 요소인 body로 인해 1em사이즈가 16px일것이고 여기에 +12px가 되서 p태그의 폰트사이즈는 28px이 됩니다. p태그는 절대 28px 아래로 떨어지지 않게 됩니다. vw VW는 뷰포인트 width 너비의 퍼센테이지를 부여해서 표현한 측정단위입니다. body.. 2023. 2. 8. [CSS] 폰트 사이즈 단위에 대하여 간단정리(em,vw,vh,px,rem) css 작성할때, px 가급적 사용하지 마세요 라는 말을 언뜻 들은적이 있습니다. px단위가 너무 익숙했던 저는 처음엔 그냥 무슨소리지.. 생각하고있었는데 반응형 홈페이지 디자인을 건드리려니 이제야 그 말이 이해가 되네요. 그렇게 '알아야겠구나' 싶은 폰 트종류들을 나중에 또 까먹을테니ㅎㅎ 간단히 정리해보았습니다. em 부모 태그에 적용되어있는 폰트사이즈에 상대적인 영향을 받는다. 때문에 안정적이고 반응형 디자인에 적합하다. (가장 많이 사용하는듯) vw, vh 뷰포인트의 크기를 vh 기준으로 결정하는 단위이다. 여기서 viewpoint란, 웹페이지에서 보일 수 있는 영역을 말하는데, 페이지가 표시되는 실체 창크기랑 다를수는 있다. vw, vh를 사용할때에는 창크기가 아닌 뷰포트 크기를 기준으로 크기가 .. 2023. 2. 8. [css] 나눔스퀘어라운드 웹폰트 적용하는 방법 서비스하던 사이트에서 나눔스퀘어라운드 웹폰트가 어느날 갑자기 뜨지않아 서치 후 이를 정리해보려합니다.이토록 간단한 방법인데도 웹폰트 적용을 망설여왔다니 아직도 갈길이 멀었나 봅니다.. 나눔스퀘어 라운드 글꼴은 네이버에서 배포하는 무료글꼴인 '나눔글꼴'의 종류 중 하나입니다. 나눔스퀘어라운드 - 눈누나눔스퀘어라운드, 네이버 제작, 고딕, 141K 조회, 다운로드 페이지로 이동, 네이버 나눔글꼴의 지적 재산권은 네이버와 네이버문화재단에 있습니다. 네이버 나눔글꼴은 개인 및 기업 사용자를noonnu.cc 이 눈누 사이트에서빨간색 화살표로 표시해둔 '웹폰트로 사용' 코드를 복사해 왔습니다. @font-face { font-family: 'NanumSquareRound'; src: url('http.. 2023. 1. 30. [web] 키보드 활성시 ui밀림 줄어듬 현상 방지방법 / 하단 고정 레이아웃 이슈 참고사이트 (html/css/javascript/jquery) keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법 https://kkh0977.tistory.com/926 40. (html/css/javascript/jquery) keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 /* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] /* ====.. kkh0977.tist.. 2022. 7. 12. [css] 두줄로 넘어가지않게 방지하는 옵션 white-space: nowrap; 텍스트, 두줄 넘어가지않게하는것 도형2개가 있으면 정해진 공간을 넘어가서 아래로 밀려 내려가지 않게하는것 2022. 1. 31. [css] 나눔스퀘어라운드 웹폰트 네이버 글꼴 모음 네이버가 만든 150여종의 글꼴을 한번에 만나보세요 hangeul.naver.com 나눔스퀘어 라운드 글꼴의 저작권이나 컴퓨터상에서 사용가능한 정보가 나와있는 네이버 글꼴 모음 중, 나눔스퀘어라운드를 내 html, css에 적용시키고 싶어 찾아보았다. 1. 태그 사이에, 또는 css파일 안에 아래 명령어를 넣는다. @import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css'); 2. css파일 안에 적용하고싶은 부분의 폰트모양을 아래처럼 지정한다. font-family: 'NanumSquareRound'; 참고사이트 https://clover7-webnote.tistory.com/20.. 2021. 12. 24. 이전 1 다음 728x90 300x250
