반응형 Front-End/CSS6 [CSS] mobile address bar 포함하여 100vh 적용하기 + React, SCSS [ 문제점 ] 일반적으로 css 에서 100vh를 사용하면 데스크탑에서는 문제가 되지 않는다. 그냥 창 전체 크기로 알아서 맞추어 주지만, 모바일에서는 url 주소창이 있기 때문에 문제가 생긴다. 주소창의 형태와 크기는 safari, chrome 에 따라 다르고, 버전에 따라서도 다르기 때문에 각각의 경우를 나누어서 계산하기는 힘들다. [ 해결 방법 ] 찾아보니 CSS에서 height: -webkit-fill-available; height: fill-acaiable; 이런저런 속성들이 있다고 했다. 그래서 적용시켜보니 safari에서는 돌아가는데 chrome에서는 또 적용이 안되는 오류가 있었다. 그래서 chrome에서는 또 따로 분기를 나누어서 처리하고 하려고 하다가 다음과 같은 방법을 발견하고 해결.. 2022. 9. 5. [CSS] width에 padding, margin 포함시키기 [ 문제점 ] 일반적으로 div 에 width를 지정하면 이는 padding, margin이 포함되지 않는다. figma와 같은 디자인을 받았을 때 전체 width 값이 주어지고, padding과 margin이 따로 주어진다면 이를 맞추기 위해서 패팅, 마진의 값을 계산으로 빼주어야 하는 상황이 발생한다. [ 해결 방법 ] 이와 같은 상황에서 패딩, 마진을 포함해서 width를 정하게 해주는 방법이 있다. css에서 box-sizing을 border-box로 해주면 된다. .box { box-sizing: border-box; width: 865px; padding: 64px; } 2022. 8. 3. [CSS] 가로, 세로 스크롤 없애기 업무 중 스크롤을 만들고 디자인 해야하는 경우가 있었다. 스크롤을 만들기 위해서 overflow: scroll 을 설정하니 다음과 같이 가로, 세로 스크롤이 모두 생겼다. 1. 가로 스크롤 없애기 이런 경우 가로 스크롤을 없애기 위해서는 2가지 방법이 있다. overflow-y: scroll; overflow-x: hiddle; 위 2가지 방법 중 한 가지를 사용하면 된다. 2. 세로 스크롤 없애기 위와 비슷한 방법으로 다음과 같은 방법이 있다. overflow-x: scroll; overflow-y: hiddle; 2022. 7. 28. [CSS] Font property font-family does not have generic default 해결 [문제점] 커스텀 폰트를 사용하고 텍스트에 font-family로 설정을 해주었더니 webstorm에서 아래와 같은 경고가 나왔다. @font-face { font-family: "galmuri"; src: url('/fonts/Galmuri11.ttf'); } .text { font-family: galmuri; } Font property font-family does not have generic default [해결 방법] 우선 webstorm에서 나온 경고이기 때문에 커스텀 폰트만 제대로 적용을 했다면 웹은 정상적으로 보일 것이다. 정상작동을 하는데도 경고를 한 이유는 네트워크 오류 등 커스텀 폰트를 불러오지 못했을 때를 대비하라는 의미이다. 따라서 그 대용 폰트를 지정해주면 경고는 사라진다. .. 2022. 2. 23. [CSS][웹 폰트] google font, 눈누 적용하기 웹폰트 웹에서 폰트를 적용하기 위해서는 크게 두가지 방법이 있다. TTF, OTF파일과 같은 폰트 파일을 다운받은 뒤 서버에 저장을 시키고, 이 파일을 불러와서 적용하는 방식과 다운받는 것 없이 url을 이용해서 웹 폰트를 적용하는 방식이다. 이 두가지 방법 중에서 두번째 방법인 웹 폰트를 적용하는 방법에 대해서 알아보자. 웹 폰트 종류 가장 많이 사용하는 웹 폰트에는 구글 폰트와 눈누가 있다. 구글 폰트에는 영어, 한국어 모두 있고, 눈누에는 한국어 폰트가 주로 있다. 이 웹사이트에 가보면 많은 폰트가 있으니 만드는 웹사이트에 어울리는 폰트를 골라서 사용하면 된다. 구글 폰트 적용하기 Google Fonts Making the web more beautiful, fast, and open through.. 2021. 7. 17. [CSS] CSS적용 안되는 경우, 크롬 강력 새로 고침 문제점 CSS파일을 수정하였는데도 실제 웹페이지에서는 적용이 안되는 경우가 있다. 해결방법 CSS를 수정해도 적용이 안되는 이유는 브라우저에 캐시가 남아있기 때문이다. 그래서 남아있는 캐시를 모두 지우고 새로고침을 하면 수정된 CSS가 웹페이지에 적용이 된다. 크롬브라우저에서 F5를 누르면 일반적인 새로고침이 된다. 이 경우 캐시는 남아 있어서 강력한 새로고침을 하기 위해서는 개발자 도구를 연다. 개발자도구가 열린 상태에서 새로고침 버튼을 우클릭 해준다. 그러면 아래에 "일반 새로고침", "강력 새로고침", "캐시 비우기 및 강력 새로고침" 3가지 메뉴가 나타난다. 이중에서 가장 아래인 "캐시 비우기 및 강력 새로고침"을 누르면 캐시가 비워지도 CSS가 적용됨을 알 수 있다. 하지만 이렇게까지 않아도 ".. 2021. 7. 10. 이전 1 다음 반응형
