[ CSS ] form 디자인을 해보자
2024. 4. 3. 19:54ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
기본적인 폼의 모양을 깔끔하게 만드는 형태로 진행.
추가적인 디자인은 각자의 몫.
[ 배치 방향 ]
- inline : 좌 → 우로 배치. 크기 지정 불가
- block : 상 ↓ 하로 배치. 크기 지정 가능
- inline-block은 혼합된 형식. 방향은 inline 크기는 block
- display 속성으로 설정. 태그마다 고유한 배치 방향 존재
[ 크기 설정 ]
- border-box : 테두리를 기준으로 크기 결정
- content-box : 내용을 기준으로 크기 결정
- + box-sizing 속성으로 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 디자인</title>
<style>
input {
display: block;
width: 300px;
box-sizing: border-box;
font-family: 빙그레 메로나체, sans-serif;
font-size: 24px;
padding: 0.5em;
/* margin-top: 10px;
margin-bottom: 10px; */
margin: 10px 0px; /*상하, 좌우*/
}
button {
display: block;
width: 300px;
font-family: 빙그레 메로나체, sans-serif;
font-size: 24px;
padding: 0.5em;
margin: 10px 0px;
background-color: rgb(204, 231, 255);
color: rgb(179, 177, 177);
border-color: aliceblue;
}
</style>
</head>
<body>
<div align="center">
<h1>로그인</h1>
<form action="#" method="post">
<input type="text" name="memberId">
<input type="password" name="memberPw">
<button>Login</button>
</form>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
| [ CSS / HTML ] 테꾸. 테이블 태그 꾸미기 (0) | 2024.04.11 |
|---|---|
| [ CSS ] 미리 정해두고 꺼내 먹기 (0) | 2024.04.04 |
| [ CSS ] form 디자인을 해보자 - 인스타그램 로그인 화면 디자인 해보기 (0) | 2024.04.03 |
| [ CSS ] <Style> 태그를 활용해 디자인 해보자 (+ <input> 태그) (0) | 2024.04.02 |
| [ CSS ] 인라인 스타일 이해(Inline Style) (0) | 2024.04.01 |