모바일 환경에서의 vh

문제인식 프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다. 원인 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다. 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다. URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다. 해결 모바일 ..

2022.11.17

[CSS] scrollbar webkit

.sports_wide_right::-webkit-scrollbar{width:3px;} .sports_wide_right::-webkit-scrollbar-thumb{width:30%; background:#ffc6c6; border-radius: 10px;} .sports_wide_right::-webkit-scrollbar-track {background:var(--bgalphacolor1);} body::-webkit-scrollbar{width:5px} body::-webkit-scrollbar-thumb{height:30%;background:rgba(0,0,0,.4);border-radius:10px} body::-webkit-scrollbar-track{background:rgba(33,1..

2022.09.07

input type number를 비밀번호로 표시하기, 모바일 숫자키패드

HTML input type 속성은 하나의 타입만 허용한다. number나, password냐 둘 중 하나를 골라야 한다. 그런데 숫자만 입력 받고, 모바일에서 숫자 키패드가 뜨고, 비밀번호로 표시하고 싶다면? HTML CSS .input-number-password{ -webkit-text-security: disc; } 설명 type="number"는 숫자 인풋이다. inputmode="numeric" 모바일 디바이스에서 일반 키패드 대신 숫자 키패드를 띄운다. class="input-number-password" 웹킷 힌트를 준 클래스를 적용했다. -webkit-text-security 값으로는 disc 말고도 square나 circle 등이 올 수 있으나, disc가 가장 일반적인 패스워드 표시 ..

2022.08.17

CSS 방법론 - BEM

CSS 방법론에는 OOCSS, BEM, SMACSS 등이 있습니다. 그 중 BEM 방식!! 1. BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻한다. 이 세 가지로 구성된 이름을 짓는 것을 말한다. 그리고 각각 __ 와 -- 로 구분한다. .header__navigation--navi-test{ color: red; } 위 코드에서 header는 Block, navigation은 Element, navi-text는 Modifier가 된다. BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다. 또 '어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 짓는다. 예를 들어, 에러 메시지를 띄우는 P 태그에게는 .red가 아닌, .error 라는 이름을 줘야..

2022.05.09

폰트를 한글과 영어,숫자 따로 적용하기 (feat. unicode-range)

유니코드 범위 영문 (대문자) : U+0041-005A 영문 (소문자) : U+0061-007A 숫자 : U+0030-0039 한글 : U+AC00-U+D7A3 특수문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E 전체 : U+0020-007E @font-face body {font-family:'Roboto' ,'Noto Sans KR', 'sans-serif';} @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('※'), url('../fonts/Roboto-Regular.eot'), url('../fonts/Roboto-Regular.eot#ief..

2022.05.04

HTML include

HTML, CSS 파일로만 작업된 페이지에서 include를 하는 방법 HTML에는 include 기능이 없지만 JavaScript AJAX를 이용하여 인클루드를 할 수 있다. HTML JS window.addEventListener('load', function() { var allElements = document.getElementsByTagName('*'); Array.prototype.forEach.call(allElements, function(el) { var includePath = el.dataset.includePath; if (includePath) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () {..

2022.05.03