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

CSS 전처리기 SASS SCSS

Sass는 CSS전처리기(Preprocessor)라고도 합니다. CSS 전처리기란? CSS 전(예비)처리기 입니다. 보통 언급되는 전치리기 3대장으로 Less, Sass(SCSS), Styleus가 있습니다. 그 중 Sass는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며, 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭합니다. Sass와 SCSS의 차이점? Sass (Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다. 즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원합니다. Sa..

2022.01.24

단위 em, rem, vw, vh, vmin, vmax

CSS3 에서 새롭게 추가 된 단위 vw, vh 등을 이용하여 좀 더 쉽게 반응형 사이트를 만들 수 있다. 단위 설명 em 부모의 font-size를 상속받음 rem html의 font-size를 상속받음 vw 브라우저 너비의 %, 1vw = 1% vh 브라우저 높이의 %, 1vh = 1% vmin 브라우저 너비와 높이 중 작은쪽의 % vmax 브라우저 너비와 높이 중 큰쪽의 %

2022.01.12

CSS3 grid

CSS Grid Layout CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해줄 수도 있습니다. See the Pen CSS grid by miok (@slog-miok) on CodePen. display: grid 그리드 컨..

2022.01.11

CSS3 filter

filter CSS의 filter 속성은 요소에 흐림 또는 색상 변화 등의 그래픽 효과를 적용합니다. 필터는 일반적으로 이미지, 배경 및 테두리의 렌더링을 조정하는 데 사용됩니다. Syntax /* values */ .filter{ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); } /* Multiple filters..

2022.01.07