728x90
안녕하세요!
오늘은 간단한 로그인 UI 화면을 만들어보겠습니다.
결과물
결과물 설명
: form 요소를 사용하여 간단한 로그인 UI 화면을 만들어보았습니다. 특히 CSS3에서 새롭게 추가된 ::placeholder 가상클래스를 사용하여 placeholder에 focus 시 opacity를 주어 편리한 UI 디자인 작업을 진행했습니다.
< html >
form 태그 안에 input, label, button태그 등을 넣었습니다.
< 기본 css >
전체적으로 콘텐츠를 가운데 정렬하고 기본 color를 #222를 주었습니다.
< 기본 셋팅 화면 >
콘텐츠를 담고있는 form 태그에 width, border, box-shadow 등을 넣어 UI 디자인을 작업했으며,
span 태그에는 display : block을 주어 세로 배치를 했습니다.
속성선택자를 사용하여 input태그에 width, border, border-radius 등을 주어 디자인 작업을 했습니다.
따로 height를 주지 않고 padding으로 높이 조정을 하고,
box-sizing : border-box로 크기가 변하지 않도록 하였습니다.
input태그에 준비해둔 아이콘을 각각 넣고,
padding-left를 따로 주어 placeholder 글씨와 아이콘이 겹치지 않도록 하였습니다.
input[type=email]::placeholder,
input[type=password]::placeholder{
opacity: 1;
transition: 0.3s;
}
=> placeholder에 css를 줄 때는 반드시 :를 두번 붙여줍니다.
기존 상태에서 opacity : 1과 transition : 0.3s를 줍니다.
input[type=email]:focus::placeholder,
input[type=password]:focus::placeholder{
opacity: 0;
}
=> placeholder에 focus할 시 opacity가 0으로 안보이게 처리합니다.
p태그의 label과 a태그가 각각 왼쪽, 오른쪽에 배치 하도록 float : left와 right를 주었습니다.
float을 주면 label과 a태그를 담고있는 p태그가 높이값을 잃어서
p태그에 overflow : hidden을 주었습니다.
button과 button:hover을 자유롭게 디자인하면
로그인 UI 화면 완성 ! :)
728x90
'[프론트엔드] > css' 카테고리의 다른 글
| [CSS] 접두어 --webkit 사용하여 그라디언트 텍스트 만들기 (0) | 2022.05.24 |
|---|---|
| [CSS] CSS에서 변수 var() 사용하기 / 순수 CSS (0) | 2022.05.24 |
| [CSS] fontawesome과 before 가상선택자로 input 체크박스 디자인 하기 (7) | 2022.04.05 |
| [CSS] input폼, 인접 선택자로 css만으로 opacity를 활용한 tab버튼 slide형태 만들기 (6) | 2022.03.29 |
| [CSS] before,after 가상선택자, data 속성, hover로 다음 네비게이션 쉽게 만들기 (2) | 2022.03.27 |