웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다.
와이어프레임의 가장 큰 목적은, 화면의 영역을 구분하는 일입니다.
Flex(Flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.
부모 요소에 적용해야하는 Flexbox 속성들
- flex-direction : 정렬 축 정하기
flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.
- flex-wrap : 줄 바꿈 설정하기
flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.
- justify-content : 축 수평 방향 정렬
justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
- align-items : 축 수직 방향 정렬
align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Unbounded&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<div class="res">
<div class="result">0</div>
</div>
<div class="buttons">
<div class="button__">
<div class="button color1">AC</div>
<div class="button color1">+/-</div>
<div class="button color1">%</div>
<div class="button color2">/</div>
</div>
<div class="button__">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button color2">*</div>
</div>
<div class="button__">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button color2">-</div>
</div>
<div class="button__">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button color2">+</div>
</div>
<div class="button__">
<div class="button number">0</div>
<div class="button number">00</div>
<div class="button number">,</div>
<div class="button color2">=</div>
</div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
}
body {
font-family: "Unbounded", cursive;
font-size: 20px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 350px;
background-color: black;
color: midnightblue;
height: 550px;
border-radius: 30px;
}
.res {
margin: 15px;
background-color: azure;
height: 100px;
display: flex;
align-items: flex-end;
flex-direction: row;
justify-content: flex-end;
font-size: 200%;
border-radius: 20px;
}
.result {
margin-right: 20px;
margin-bottom: 10px;
}
.button {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: lightgray;
align-items: center;
display: flex;
justify-content: center;
margin: 5px;
color: midnightblue;
}
.buttons {
display: flex;
flex-direction: column;
align-items: center;
}
.button__ {
display: flex;
flex-direction: row;
}
신입 개발자의 독고다이 개발일지