오늘 배운 내용
position, Float, Flex 등
1. Flex
컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합
flex 컨테이너
문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부릅니다. flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정합니다. 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 됩니다. display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.
- 항목은 행으로 나열됩니다. (flex-direction 속성의 기본값은 row입니다).
- 항목은 주축의 시작 선에서 시작합니다.
- 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.
- 항목은 교차축의 크기를 채우기 위해 늘어납니다.
- flex-basis 속성은 auto로 지정됩니다.
- flex-wrap 속성은 nowrap으로 지정됩니다.
이렇게되면 flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 됩니다. 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 됩니다.
네이버 로그인 화면 만들기
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네이버 로그인</title>
<link rel="stylesheet" href="reset.css">
<style>
.cont {
width: 350px;
padding: 16px 16px 12px 17px;
border: 1px solid #dae1e6;
box-sizing: border-box;
}
.cont::after {
display: block;
content: '';
clear: both;
}
.cont p {
font-size: 12px;
color: grey;
margin-bottom: 10px;
}
.link-login {
display: block;
padding: 15px 0;
background: #19ce60;
text-decoration: none;
color: #fff;
font-size: 13px;
margin-bottom: 10px;
text-align: center;
}
.link-login img {
display: inline-block;
width: 60px;
height: 12px;
margin-right: 5px;
vertical-align: -1px;
}
.find {
float: left;
}
.find img {
width: 10px;
height: 14px;
}
.find img,
.find a {
float: left;
}
.find a {
margin: 3px;
}
.link-find::after {
display: inline-block;
content: '';
width: 3px;
height: 3px;
background: #d7dce0;
border-radius: 10px;
vertical-align: 3px;
margin-left: 5px;
}
.find a,
.join a {
text-decoration: none;
color: #404040;
font-size: 12px;
}
.join {
float: right;
}
.join img {
width: 11px;
height: 11px;
vertical-align: -1px;
}
</style>
</head>
<body>
<div class="cont">
<p>네이버를 더 안전하고 편리하게 이용하세요</p>
<a href="" class="link-login"><img src="./src/images/title.png" alt="네이버">로그인</a>
<div class="find">
<img src="./src/images/lock.png" alt="">
<a href="" class="link-find">아이디</a>
<a href="">비밀번호찾기</a>
</div>
<div class="join">
<img src="images/user.png" alt="">
<a href="">회원가입</a>
</div>
</div>
</body>
</html>
프론트엔드 개발자가 되기 위해 전진하고 있습니다~