디자인과 개발 그 사이

1. 뒷번호 password로 지정 See the Pen 주민번호(input password) input 배경처리 만들기 by 김보라 (@etbeatbh-the-bashful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 저는 특수문자 ●로 배경을 깔았지만 다른 배경이미지로 password 글자 크기에 맞추어 사용하셔도 좋을것 같습니다.  2. 뒷번호 한자리만 노출 text input 으로 지정 See the Pen 주민번호(input password) input 배경처리 만들기2 by 김보라 (@etbeatbh-the-bashful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 뒷자리 ..

이번에는 이미지수정없이 css으로 필터를 적용하는 방법을 기록합니다.  blur(): 이미지나 요소에 블러(흐리게) 효과를 줍니다.brightness(): 이미지나 요소의 밝기를 조정합니다.contrast(): 이미지나 요소의 대비를 조정합니다.grayscale(): 이미지를 흑백으로 변환합니다.sepia(): 이미지에 세피아(갈색 톤) 효과를 줍니다.hue-rotate(): 이미지의 색상을 회전시킵니다.saturate(): 이미지의 채도를 조정합니다.invert(): 이미지의 색상을 반전시킵니다.drop-shadow(): 이미지나 요소에 그림자를 추가합니다.opacity(): 요소의 투명도를 조정합니다. See the Pen Untitled by 김보라 (@etbeatbh-the-bashful) ..

모바일 입력페이지를 작업 하던 중input type="text"사이에 비슷한 스타일의 select가 들어가는데, select만 placeholder 적용이 안되서 초기 글자색이 안맞더라구요. 그래서 이번에도 폭풍 검색을 하고 적용한 코드를 기록합니다. html 음식을 골라주세요. 떡볶이 피자 햄버거 치킨 마라탕 cssselect {padding: 10px;}select:invalid {color: skyblue;}option {color: #000;}  See the Pen select placeholder by 김보라 (@etbeatbh-the-bashful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 required: 이 속성은 ..

이번에 검색창 placeholder에 아이콘을 넣어진 기획과 디자인이 나와서 폭풍 인터넷 검색을 했습니다.제가 이번 프로젝트에 적용한 코드를 여기에 짧게 기록 할려고 합니다. 요청한 형태는 위의 사진과 같습니다. html cssinput.search::-webkit-input-placeholder{ background-image: url(이미지주소); background-size: 17px; background-position: 3px 0; background-repeat: no-repeat; text-indent: 25px; color: #ccc;} input::-webkit-input-placeholder : Chrome input:-ms-input-placehold..

생각 보다 자주쓰는데 외워지지 않는 속성선택자를 기록하려고 합니다. 속성 선택자는 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다. 선택자 예시 의미 [attr] [disabled] { ... } 속성 attr ( disabled )을 포함한 요소 선택 [attr=val] [type=“text"] { ... } 속성 attr ( type )을 포함하며 속성 값이 정확하게 val( text ) 인 요소 선택 (공백으로 분리된 값이 있으면 안됨) [attr~="val"] [ class ~=" small "] 'val' 이 포함 ( 공백으로 분리된 값이 정확히 일치 ) ex) class=" small btn..

CSS(Cascading Style Sheets)에서 스타일 규칙의 우선순위는 선택자의 구체성과 충돌 해결 규칙에 따라 결정됩니다. 스타일 규칙 간에 충돌이 발생할 때 어떤 스타일이 우선되는지를 결정하는 규칙이 있습니다. 1. 중요도 (Importance): !important 키워드가 지정된 스타일은 다른 모든 규칙보다 우선합니다. 그러나 !important는 되도록 사용을 피하고 유지보수를 어렵게 만들 수 있으므로 신중하게 사용해야 합니다. 2. 인라인 스타일 (Inline Styles): HTML 요소의 style 속성에 직접 지정된 스타일은 다른 모든 스타일 규칙보다 우선합니다. 3. ID 선택자 (ID Selectors): #을 이용하여 지정된 ID 선택자에 의해 스타일링된 규칙은 클래스 선택자..

선형 그라데이션 만들기 linear-gradient( direction, color1, color2, …, color3 ) to bottom : 위에서 아래로 (기본값) to top : 아래에서 위로 to left : 오른쪽에서 왼쪽으로 to right : 왼쪽에서 오른쪽으로 ndeg : n도의 방향으로 css 예시 background: linear-gradient( to left, yellow, red ); css 결과 HTML 삽입 미리보기할 수 없는 소스 ➡️ 편하게 그라데이션 색 입력시 css로 만들어주는 사이트 https://cssgradient.io/

접근성을 고려해 대체 텍스트 CSS가 필요한 경우가 있습니다. IR 기법으로 표현 1. 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길 때 2. CSS background 속성을 사용하여 처리한 의미 있는 이미지 일 때 마크업으로 대체 텍스트 제공 IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다. text-indent: -9999px; ❌ : 들여쓰기 기능, form 또는 link와같은 요소에 포커싱 되었을때 정확한 위치를 표시 할 수 없음 opacity: 0; ❌ : position을 이용하여 영역을 없애도, 일부 스크린리더의 경우 해당 요소를 무시할 수 있음 display: none; ❌ : 화면에 보이지 않고,..