[Way to PM] 프론트엔드 - 로그인 화면 구현
2024. 1. 19. 16:36ㆍ[Way to PM] 프론트 엔드
0. 레퍼런스
1. 우선 순위 설정
1) HTMP로 의미 구현
2) CSS로 스타일 구현
2. WHY? 이 과제를 통해 얻고자 하는 목적
1) form태그에서 get방식을 통해 브라우저로 정보 받기
2) input태그를 스크린리더를 고려해 label로 항목 만들기
3) br태그 쓰지 않고 css를 이용해 위치 구현
3. HOW? 목적 달성을 위한 과정
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>[과제]로그인</title>
</head>
<style>
.loginBox {
width: 400px;
}
/*text-align의 기준점*/
:not(.loginBox) {
text-align: center;
margin: 0;
padding: 0;
}
/*불필요한 마진, 패딩값을 덜어내고 요소들을 가운데로 정렬시키기 위함*/
button {
color: white;
background-color: blue;
border: none;
width: 400px;
height: 60px;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
}
input.id {
height: 40px;
width: 280px;
border-radius: 5px;
border-color: whitesmoke;
box-shadow: none;
}
/* JS가 들어간게 아니라서 그냥 하나로 지정 */
label {
display: flex;
align-items: center;
justify-content: space-between;
}
.idsave {
margin-right: 295px;
/*justify-content: space-between를 피하기 위함 */
}
</style>
<body>
<section>
<div class="loginBox">
<h1>로그인</h1>
<p>아이디와 비밀번호를 입력하고 로그인하세요</p>
<form method="get">
<label>
아이디
<input type="text" class="id">
</label>
<label>
비밀번호
<input type="password" class="id">
</label>
<label class = idsave>
<input type="checkbox" name="idsave" id="idsave">
아이디 저장
</label>
<button>로그인</button>
</form>
</div>
</section>
</body>
</html>4. WHAT? 구현 결과
로그인
아이디와 비밀번호를 입력하고 로그인하세요
*마진 값은 따로 주지 않음
5. 배운 점 및 자기평가
1) text-align의 기준점
-text-align의 기준은 부모요소의 영역이 그 기준이 되며, 블록 요소 내의 텍스트들을 정렬시킨다.
2) label내 텍스트 지정
<label class = idsave>
<input type="checkbox" name="idsave" id="idsave">
아이디 저장
</label>이처럼 label 값이 되는 '아이디 저장'을 css에서 지정하려면 p태그나 span태그로 감싸야 한다.
-> 스타일일 주는 것이 목적이니 span이 적합할 수 있다. 금번 과제 같은 경우는 그냥 마진으로 label값 자체를 밀어서 조정했다. label에 자체적으로 width크기를 설정해도 정렬 된다.
적용할 점:
생각보다 쉬울 줄 알았는데 오래 걸렸다. 텍스트 정렬부터해서 인풋 크기를 지정하고 다시 flex 박스를 설정한 후 가로축 정렬을 했어야 했다. 고민하지 말고 일단 코드를 쳐보면서 중간중간 찾아보고, 또 바로 적용해보는게 가장 시간대비 효율이 좋은 것 같다.
'[Way to PM] 프론트 엔드' 카테고리의 다른 글
| [Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Main) (1) | 2024.01.28 |
|---|---|
| [Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Header) (0) | 2024.01.24 |
| [Way to PM] 프론트엔드 - 회원가입 구현 (0) | 2024.01.20 |
| [Way to PM] 프론트엔드 - 반응형 Input 요소 만들기 (0) | 2024.01.19 |
| [Way to PM] 프론트 엔드 - HTML, CSS를 이용한 단순 게시판 모습 구현 (0) | 2024.01.19 |