안녕하세요. 오늘은 input 태그를 예쁘게 꾸미는 법을 알아볼게요.
input 태그를 사용하면 굉장히 디자인이 없어서 심심해 보여요.
이거를 사람들의 눈에 잘 보일 수 있도록 예쁘게 꾸미는 법에 대해 알아봅시다.
input text 태그로 작성하게 되면 굉장히 촌스럽다? 라고 표현해야 하나?
그냥 직사각형 모양이 나와서 아쉽다고 생각하실 수 있어요.
하지만 css로 내 마음대로 input 태그를 바꿔줄 수 있습니다.
본론으로 들어가기 전에 input태그에서 type에 따라 서로 달라지는데 css로
input {} 으로 하면 모든 input 태그를 선택하니까 type에 따라 선택하는 방법을 먼저 알려드리겠습니다.
input[type=text] {
}위와 같은 선택자를 사용하면 input 태그에 type 속성이 text인 친구들을 선택하는 방법입니다.
그럼 본론으로 들어와서 가로와 세로의 길이를 수정해주도록 하겠습니다.
가로는 width, 세로는 height 속성명으로 수정해주시면 됩니다.
input[type=text] {
width: ;
height: ;
}이 속성은 원하는데로 디자인 하시면 됩니다. 뭐 디자인에 정답은 없으니까요.
그 다음으로 font의 크기를 정해야 합니다.
font-size를 통해서 font의 크기를 정해주실 수 있습니다.
input[type=text] {
width: ;
height: ;
font-size: ;
}모서리를 없애보도록 하겠습니다. border: 0; 으로 주시게 되면 모서리를 없앨 수 있습니다.
그 다음으로 모서리에 굴곡을 줘 보도록 하겠습니다. 굴곡은 border-radius를 통해 줄 수 있습니다.
디자인이 사각형처럼 각지게 디자인을 하실거면 추가하지 않아도 됩니다.
모서리에 굴곡을 주게되면 원래 직사각형 테두리가 input 태그에 나타나게 됩니다.
이 테두리를 삭제하시려면 outline: none; 으로 주시면 됩니다.
글자를 입력하는 부분이 왼쪽에 붙어있으면, 조금 떨어뜨리기 위해 padding-left를 주시면 됩니다.
그리고 background-color로 input 태그에 배경색도 추가해주실 수 있습니다.
background-color 뿐만 아니라 background-image로 배경사진을 추가해주실 수 있습니다.
한 번 다 합쳐보면 아래와 같이 완성되는 것을 알 수 있습니다.
See the Pen input text 디자인 by Xsop-sop (@xsop-sop) on CodePen.
제가 알려드린 이 방법을 통해서 자신에 웹 디자인에 맞게 input text를 예쁘게 디자인 해보면 좋겠습니다.
지금까지 읽어주셔서 감사합니다.
지금까지 input text를 디자인 하는 방법에 대해 알아보았습니다.