안녕하세요 오늘은 간단한 로그인 폼을 만들어보도록 하겠습니다 기능적인 부분은 하나도 없이 HTML과 CSS만 사용하였기 때문에 디자인만 참고해보시면 좋을것 같습니다 로그인 폼따로 크기를 정해놓지 않은 중요한 부분- 위치선정 -display: flex; align-items: center; justify-content: center; flex-direction : column; -디자인 -outline : none; background : linear-gradient() border-radius : --px; box-shadow : -px -px -px color; letter-spacing : -px; SNS 버튼부에서 봐야할 점 box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(0, 0, 0, 0.1); 제 코드에서는 이렇게 주었구요 색상을 지정하실때는 뒷 배경색보다 좀 더 연한색을 위주로 주시면 자연스러운것 같습니다 지정된 위치보다 -3px -3px 위로 올려서 색상을 좀 더 연하게 주시면 더욱 입체감이 있습니다 Email, Pw 부분에서 보아야 할 점 outline : none; 처음 input 박스를 만드신 후 박스 안쪽을 클릭하시면 박스 테두리가 쳐집니다 outline : none 이 없는 경우이런 문제를 해결하기 위해서, outline : none; 을 주게 되면 더 이상 클릭해도 엉성한 테두리가 생기지 않는걸 보실 수 있습니다 <input placehorder:email></input> placehorder 을 이용하여 input 박스안에 텍스트를 적을 수도 있습니다 위 사진 처럼 Email을 적어라고 알려줘야할때 placehorder 이 사용됩니다 submit 부분에서 보아야할 점 background: linear-gradient(to left, rgb(255, 77, 46), rgb(255, 155, 47)); 단색을 줘도 예쁜색이면 잘 나오지만 아무래도 그라데이션 효과를 주면 조금더 이쁜 박스가 나오는것 같습니다 또한 letter-spacing : 2px 를 주어서 submit 이라는 글자 사이사이마다 공간을 주었습니다 See the Pen ExgOvWW by Kang Byeongcheol (@Devcheol) on CodePen. 로그인 페이지 만들기※중요) 기억해야 될 태그
01 예제 디자인로그인 예제 디자인02 예제 속 필요한 태그 알아보기
03 마크업 해보기 마크업 적용된 로그인 화면1. <form> 부모 태그 안에 <input> 태그를 자식으로 넣어 마크업 한다. 2. placeholder는 입력 필드에 사용자가 어떤 값을 입력해야 하는지를 간략하게 알려주는 역할을 한다. 단어 혹은 짧은 문구가 들어가며 사용자가 입력하는 즉시 사라진다. 3. <label> 태그의 for=""와 <input> 태그의 id=""를 동일하게 적어 연결시켜주면, checkbox 혹은 '아이디 저장하기' 둘 중 아무거나 클릭해도 체크가 자동으로 활성화된다. 04 CSS 적용하기
먼저 기본적으로 걸려있는 모든 속성을 reset 시켜주세요.
기존의 checkbox를 없애고 label를 이용하여 디자인 시안과 동일하게 변경시켜줍니다.
checkbox 커스터마이징은 여러가지 방법이 사용되는데, 위 방법이 가장 쉬워서 종종 사용하는 편입니다. 완성된 이미지간단한 로그인 페이지 완성! |