디자인과 개발 그 사이

오늘은 input password 필드의 기본 모양을 어떻게 변경할 수 있는지에 대해 기록해보려 합니다.우선, input password 대신 input text를 사용합니다. 그 위에 position absolute로 설정한 박스를 덮어, 사용자가 입력할 때마다 원하는 문자나 이미지를 나타나게 설정해 보았습니다. 1. input password 입력 모양 바꾸기 (문자로) See the Pen input password 입력 모양 바꾸기 by 김보라 (@etbeatbh-the-bashful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스inputField: 실제 비밀번호가 입력되는 input 요소를 가져옵니다.passwordDisplay: 비밀번..

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 삽입미리보기할 수 없는 소스 뒷자리 ..

더 깔끔하고 효율적인 작업 환경을 위해 새로운 키보드와 마우스를 구매하게 되었습니다. Microsoft Designer Compact Keyboard & Mouse는 컴팩트한 크기와 세련된 디자인으로 큰 인기를 끌고 있는 제품입니다. 사무용으로 특히 추천받는 이 제품을 1년간 사용해본 후기를 전해드리겠습니다.  디자인과 크기 Microsoft Designer Compact 키보드는 매우 슬림하고 컴팩트한 크기가 특징입니다. 키보드와 마우스 모두 미니멀리즘을 추구하는 세련된 디자인이 매력적입니다. 키보드는 전반적으로 매끈한 플라스틱 표면에, 마우스는 손에 착 감기는 부드러운 표면 처리가 돋보입니다. 또한, 키보드와 마우스 모두 저소음 설계로 사무실에서 사용하기 좋습니다.    타건감과 소음 이 키보드는 기..

한국방송통신대학교🎓저는 전공과 다른 분야에서 웹퍼블리셔로 일하게 되면서, 더 전문적인 지식을 쌓고자 하는 필요성을 느끼게 되었습니다. 또한 초대졸 학위로는 커리어 발전에 한계가 있다는 생각이 들어, 학사 학위를 취득하기로 결심했습니다. 일과 학업을 병행해야 하는 상황에서 한국방송통신대의 유연한 학습 환경이 제게 적합하다고 판단했고, 그래서 컴퓨터과학과 3학년으로 편입하여 학업을 시작하게 되었습니다. 이 글에서는 제가 한국방송통신대에서 직장 생활을 병행하며 학사 학위를 취득한 경험을 나누고자 합니다.  🏫 방통대 입학 경쟁률최근 IT 분야의 인기가 높아지면서, 컴퓨터과학과와 통계·데이터과학과의 경쟁률도 크게 상승하고 있습니다. 특히 편입 과정에서 이러한 변화가 두드러졌는데, 매번 정원 미달이었던 컴퓨터..

이번에는 이미지수정없이 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..