728x90 퍼블리싱7 [HTML/CSS] :has() selector를 활용한 투명 카드 CSS Codepen에서 :has 챌린지가 뜨길래 :has 셀렉터를 이용한 코드를 만들어봤다. 요소:has() 셀렉터는 그 요소에 특정 하위 요소가 있는지를 찾는다. 태그로 찾을 수도 있고 ex) :has(+p) 클래스 이름으로 찾을 수도 있다 ex) :has(.inner__text) MDN에 좋은 예제가 있으니 참고하면 좋다. https://developer.mozilla.org/en-US/docs/Web/CSS/:has :has() - CSS: Cascading Style Sheets | MDN The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argu.. 2023. 1. 11. [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/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] 웹접근성 인증 홈페이지 퍼블리싱 하기 공공기관이나 규모가 큰 사이트는 웹접근성 인증을 받는 경우가 많다. 이번에 처음으로 웹접근성 심사가 필요한 프로젝트(PC 웹)를 하였는데 웹접근성 받는 것이 생각보다 많이 까다롭더라. 다음에 또 웹접근성 인증이 필요한 프로젝트를 진행할 경우 같은 혼란을 반복하지 않기 위해 기록용으로 자료를 남겨두려한다. 웹접근성이란? 웹접근성 인증 홈페이지 참고 웹접근성 심사 항목 웹접근성 작업 Tip 👀 정보통신접근성(웹접근성) 인증이란? 장애인, 고령자 등 정보접근약자가 웹 사이트 이용에 불편이 없도록 「지능정보화기본법」 제47조 및 동법 시행규칙 제5조에 의거 ‘국가표준 한국형 웹 콘텐츠 접근성 지침 2.1’을 준수한 웹사이트에 대해 정보통신접근성(웹접근성) 수준을 인정하고 이를 상징하는 정보통신접근성(웹접근성) .. 2022. 11. 25. 이전 1 다음 728x90
