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

input 태그의 pattern 속성과 정규표현식

HTML5에서 새롭게 추가된 속성입니다. 태그의 pattern 속성은 폼 제출 시 요소의 값을 검사할 때 사용될 정규 표현식(regular expression)을 명시합니다. 이때 전역 속성인 title 속성을 사용하여 정규 표현식에 간단한 설명을 추가함으로써 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있습니다. 보안상 예상치 않은 데이터 입력을 완전하게 컨트롤 하기 위해서는 최종적으로 서버사이드 스크립트에서 처리해 주어야 한다. pattern 속성이 제대로 동작하는 요소의 type 속성값은 다음과 같습니다. date, email, password, search, tel, text, url 문법 예제 생년월일: 예제

2022.05.02

세로쓰기 모드 writing-mode, 글자 타이핑 효과

CSS 쓰기 모드는 텍스트가 가로 또는 세로로 표시되는지 여부를 나타냅니다. writing-mode (en-US) 속성을 사용하면 쓰기 모드에서 다른 쓰기 모드로 전환할 수 있습니다. 이를 위해 세로 쓰기 모드를 사용하는 언어로 작업할 필요는 없습니다 — 창의적 목적으로 레이아웃 일부의 쓰기 모드를 변경할 수도 있습니다. 아래 예에서는 writing-mode: vertical-rl 를 사용하여 표시되는 제목이 있습니다. 이제 텍스트가 세로로 나타납니다. 세로 텍스트는 그래픽 디자인에서 일반적이며, 웹 디자인에서 보다 흥미로운 모양과 느낌을 추가할 수 있습니다. Syntax /* Keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-r..

2022.03.18