<div class="container">
<div class="child-div" id="child-div-title">
<h1>회원 가입을 위해 <br> 정보를 입력해주세요</h1>
</div>
<div class="child-div">
<label for="email">* 이메일</label>
<input class="em" type="text" name="email">
</div>
<div class="child-div">
<label for="name">* 이름</label>
<input class="nm"type="text" name="name">
</div>
<div class="child-div">
<label for="password">* 비밀번호</label>
<input class="pw" type="password" name="password">
</div>
<div class="child-div">
<label for="password_ok">* 비밀번호 확인</label>
<input class="pw" type="password" name="password_ok">
</div>
<div class="radio-container">
<div id="radio1">
<input type="radio" id="female" name="gender-female" value="여성">
<label for="gender-female">여성</label>
</div>
<div id="radio2">
<input type="radio" id="male" name="gender-male" value="남성">
<label for="gender-male">남성</label>
</div>
</div>
<div class="checkbox-container">
<input type="checkbox" id="signin" name="signin" value="이용약관 개인정보 수집 및 동의">
<label for="signin">이용약관 개인정보 수집 및 동의</label>
</div>
<div class="child-div">
<hr/>
</div>
<div>
<button>가입하기</button>
</div>
</div>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
}
.container {
width: 670px;
height: 980px;
margin-top: 60px;
margin-left: 625px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
border: 1px solid #AACDFF;
background-color: #FFFFFF;
border-radius: 20px;
box-shadow: 7px 7px 7px 7px #0068FF40;
}
.child-div {
width: 466px;
height: 80px;
/* border: 1px solid red; */
display: flex;
align-items: center;
}
전체 소스코드:
https://github.com/meeyoungchoi-front-dev/pre-codecamp/tree/main/class
결과화면
flex 적용전
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.item {
width: 80px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div> .
</body>
</html>
flex 적용후
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.container {
display: flex;
/*
자식 요소가 갖고있는 기본 마진 값을 무시하고
가 가로방향 (행 방향)으로 요소를 배치한다
*/
}
.item {
width: 80px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
주축
요소의 진행 방향 (가로 방향)교차 축
엇갈리는 방향 (세로 방향)속성값 | 의미 |
---|---|
row | 기본값 , 주축은 행이고 방향은 콘텐츠의 방향과 동일 |
row-reverse | 주축은 행이고 방향은 콘텐츠의 방향과 반대 |
column | 주축은 열이고 방향은 콘텐츠의 방향과 동일 |
column-reverse | 주축은 열이고 방향은 콘텐츠의 방향과 반대 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.container {
display: flex;
flex-direction: row;
}
.item {
width: 80px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.container {
display: flex;
flex-direction: column;
}
.item {
width: 80px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.container {
display: flex;
flex-direction: row-reverse;
}
.item {
width: 80px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.container {
display: flex;
flex-direction: column-reverse;
}
.item {
width: 80px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
https://wooncloud.tistory.com/10
https://iamdaeyun.tistory.com/entry/CSS-display-flex-수직정렬-중앙정렬-span에도-먹힐까-먹힌다