728x90 Front-end47 [HTML/jQuery] Input[type="text"]에 숫자만 입력하기 input type을 number로 하면 깔끔하게 숫자만 입력이 가능합니다.Number 타입은 키보드 방향 버튼으로 숫자를 변경할 수 있는 장점이 있습니다. 그리고 min값과 max값, step을 설정할 수 있습니다.하지만 단순 수량이 아닌 휴대폰번호, 생년월일 등을 입력할 때에는 input number가 적당하지 않습니다.왠지 모르게 우리 회사에서는 단순 수량 인풋 타입도 number보다는 text 사용을 선호한다. 그래서 작성해 보는input text타입에 숫자만 입력하는 방법 코드펜 예제See the Pen Input[type="text"] number only by sel (@wimmwell) on CodePen. 값이 숫자가 아니면 공백으로 대체하는 방식입니다. oninput: 입력 필드의 .. 2023. 1. 2. [HTML] Select 박스 옵션 타이틀 항목 나타내기 셀렉트 박스에 옵션값을 입력하면 첫번째 옵션이 셀렉트박스에 노출이 된다. 예시 7일 3개월 1년 첫 옵션값 대신에 옵션들의 타이틀을 입력하고 싶은 경우 옵션에 disabled hidden selected 속성을 이용하면 된다. 옵션이 숨겨지고 선택 불가능한 상태로 활성화된다. 예시 구독 기간 7일 3개월 1년 코드 구독 기간 7일 3개월 1년 2023. 1. 2. [HTML/CSS] 입력되는 텍스트 길이에 따라 자동으로 높이가 늘어나는 textarea textarea는 속성에서 rows나 cols로 열과 행의 크기를 정할 수 있습니다. textarea 하지만 지정된 크기보다 텍스트가 많이 들어가면 세로 스크롤이 생깁니다. textarea 우측 모서리의 도구를 사용하여 resize 가능하지만 이 사실을 모르는 사용자가 있을 수 있습니다. 입력하는 텍스트 양에 따라 textarea가 자동으로 맞춰지면 훨씬 보기 좋고 편할텐데! 구글링 해서 찾았다. 자동으로 높이를 조절해주는 코드입니다. See the Pen Easiest Autogrowing Textarea by Chris Coyier (@chriscoyier) on CodePen. https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ 2022. 12. 29. [HTML/CSS] pure css 원이 퍼지는 마우스오버 애니메이션 효과 마우스 오버 시, 원이 퍼지는 효과를 주는 코드이다. See the Pen circle animation on hover by nah (@wimmwell) on CodePen. 2022. 12. 29. [HTML/CSS] 가로로 긴 컨텐츠 스크롤 박스 만들기 이미지를 반응형으로 사용할 때, 하나의 이미지를 사용하는게 가장 이상적이다. 하지만 모바일 크기에서는 너무 작게보이는 경우에는 모바일버전 이미지를 따로 만드는 경우가 있다. 하지만! 모바일 사이즈의 너비는 한정적인데 가로로 길어야만 하는 이미지가 있다. 예를 들면 가로로 긴 지하철 노선도같은 가로 이미지말이다. 그럴 경우에 나는 가로로 스크롤이 가능하게 박스를 만들어준다. 표도 아무래도 가로로 긴 경우가 많다. 그럴 경우 td 태그를 inline으로 처리하여 줄넘김을 할 수도 있지만 자주 사용하지 않는다. 긴 표의 경우에도 가로 스크롤 박스를 만들어 텍스트가 아래 이미지처럼 가독성 떨어지게 쪼개지지않은 상태에서 볼 수 있게 해준다. See the Pen Untitled by nah (@wimmwell) .. 2022. 12. 23. [HTML/CSS] CSS로 마름모 모양 텍스트박스 만들기 마름모 이미지를 불러와서 사용하는게 제일 간단하지만 나처럼 굳이 CSS로 만들고싶다!하는 경우 CSS border, ::after 속성 등을 이용해서 마름모 모양을 만들 수 있음 See the Pen pure CSS diamond-shaped text box by nah (@wimmwell) on CodePen. 마름모 크기를 변경하고싶다면, 50px이 들어간 값들을 다른 숫자로 바꾸면 된다. 내가 마름모 이미지를 안불러오고 굳이 CSS로 구현한 이유는 텍스트가 들어간 이미지를 불러오면 반응형으로 크기 변동 시 글씨가 다소 깨져보이고 이미지를 최소한으로 사용하고싶기때문이다. 2022. 12. 23. [HTML/CSS] background-clip으로 배경이미지 텍스트 만들기 HTML 삽입 미리보기할 수 없는 소스 이걸 뭐라고 설명해야하지? 아무튼 배경 이미지로부터 텍스트 모양대로 클립해서 배경은 감추고 텍스트에만 이미지가 들어가는 코드이다. background-clip:text 속성으로 구현 가능하며, 나는 애니메이션 CSS와 제이쿼리를 이용해 마우스오버시 배경이미지와 텍스트가 바뀌게 응용해봤다. 2022. 11. 29. [HTML/CSS] float:left 속성 없이 각 요소를 양측 끝에 정렬하기 - flex display:flex 속성을 이용하면 요소에 복잡하게 float:left, float:right을 각각 적용 후 부모 태그에 clear:both를 적용하는 등 수고를 하지않아도 된다. 특정 태그 내에 좌측, 우측으로 요소를 배치할 경우 float 대신 display:flex; justify-content:space-between;을 이용하면 간편하다. 주의할 점: justify-content:space-between;는 태그 내의 자식요소들을 양쪽 끝을 기준으로 동일한 여백으로 정렬하기때문에 아래 코드펜 예시처럼 한쪽에 여러 요소가 들어가는 경우에는 하나의 요소로 감싸야한다. 감싸지않는 경우에는 각 태그가 개별적으로 정렬됨 HTML 삽입 미리보기할 수 없는 소스 display:flex 속성을 사용해도 .. 2022. 11. 28. [HTML/CSS] 웹접근성 인증 홈페이지 퍼블리싱 하기 공공기관이나 규모가 큰 사이트는 웹접근성 인증을 받는 경우가 많다. 이번에 처음으로 웹접근성 심사가 필요한 프로젝트(PC 웹)를 하였는데 웹접근성 받는 것이 생각보다 많이 까다롭더라. 다음에 또 웹접근성 인증이 필요한 프로젝트를 진행할 경우 같은 혼란을 반복하지 않기 위해 기록용으로 자료를 남겨두려한다. 웹접근성이란? 웹접근성 인증 홈페이지 참고 웹접근성 심사 항목 웹접근성 작업 Tip 👀 정보통신접근성(웹접근성) 인증이란? 장애인, 고령자 등 정보접근약자가 웹 사이트 이용에 불편이 없도록 「지능정보화기본법」 제47조 및 동법 시행규칙 제5조에 의거 ‘국가표준 한국형 웹 콘텐츠 접근성 지침 2.1’을 준수한 웹사이트에 대해 정보통신접근성(웹접근성) 수준을 인정하고 이를 상징하는 정보통신접근성(웹접근성) .. 2022. 11. 25. 이전 1 2 3 4 5 6 다음 728x90
