웹 사이트에 목적에 맞게 화면을 만드는 작업, 콘텐츠를 원하는 위치에 배치해 웹사이트의 본질을 추구하자!
JS의 변수를 이용하지않고 HTML에 하나하나 입력해보는 것
// JavaScript 어딘가에는 tweet 내용이 담긴 객체가 존재
let tweet = { user: '김코딩', content: 'SNS는 인생의...' }
=
<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어감 -->
<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>
고수들은 와이어프레임과 목업을 작성하는 단계를 건너뛰고, JavaScript로 동작하는 애플리케이션을 만들어도 된다.
그래서 초보는 와이어프레임과 목업을 작성하는 단계를 반드시 진행해 HTML 문서를 통해 화면을 다 그려야 한다.
그러지 않으면 JS를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵다. 마치 설계도 없이 건물을 짓는 것과 같다.
보통 웹은 좌 ➡️ 우, 위 ➡️ 아래로 콘텐츠가 흐르기 때문에 수직, 수평분할을 적용해 흐름 따라가자!
1. 수직 분할: 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
2. 수평 분할: 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치 수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있습니다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
display: flex;
를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해flex-direction
을 이용하여 요소를 정렬할 방향을 결정justify-content
와 align-items
를 이용하여 수평-수직 정렬을 결정flex-grow
를 이용하여 요소를 얼마나 늘릴 것인지 결정flex-basis
를 이용하여 요소의 기본 크기를 결정부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면
자식 요소에게 적용해야 하는 속성인flex
는 요소가 차지하는 공간과 관련
display: flex;
display: flex;
를 부모요소에 도입, 자식 박스의 방향과 크기를 결정<main>
<div>box1</div>
<div>box2</div>
<div>box3</div>
</main>
main {
display: flex;
border: 1px dotted red;
}
div {
border: 1px solid green;
}
* {
margin: 10px;
padding: 10px;
}
flex-direction
row
기본값row
, column
, r,c-reverse
main {
display: flex;
flex-direction : column;
} /* 수직으로 정렬 */
flex-wrap
nowrap
기본값justify-content
, align-items
flex-direction
가 row
인지 column
인지 나뉨justify-content
의 설명align-items
의 설명 자식 요소에 적용해야 하는 속성 flex
flex
- flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기: px, em...)>
grow
와shrink
는 배수를 나타냄 위 사진은 growth가 6:3:1이므로 box1은 부모 박스의 10분의 6을 차지한다는 의미grow
와shrink
는 같이 안쓰는 것이 좋음- basis : 자식 박스가 늘어나거나 줄어들기 전에 가지는 기본 크기, 즉, grow가 0이라면 basis의 크기만큼 유지됨
- 개구리를 이동시켜주세요 ㅠㅠ 게임!
- flex는 basis, shrink, grow부터 시작임, 이 개념들을 빠삭하게 익혀 진짜배기 flex를 활용하자!
- 아래는 vsc의 와이어프레임이다. flex를 통해 이렇게 만들어보자
정답(대충한거임)
<div id="container">
<div class="i_container">
<div class="icon">아이콘 1</div>
<div class="icon">아이콘 2</div>
<div class="icon">아이콘 3</div>
</div>
<div class="s1">
<div class="row1-1">영역1</div>
<div class="row1-2">영역2</div>
<div class="row1-3">영역3</div>
</div>
<div class="s2">
<div class="row2-1">영역4</div>
<div class="row2-2">영역5</div>
</div>
</div>
#container {
width: 100%;
height: 100vh;
margin: 10px;
display: flex;
}
.i_container {
width: 10%;
border: 2px solid red;
flex-direction: column;
}
.icon {
width: 60px;
height: 60px;
border: 1px dotted red;
margin: 20px auto;
}
.s1 {
width: 20%;
border: 1.5px solid red;
display: flex;
flex-direction: column;
padding: 10px;
margin: 0 5px;
}
.s1 > * {
border: 1px dotted blue;
}
.row1-1 {
flex: 4;
}
.row1-2 {
flex: 4;
margin: 5px 0;
}
.row1-3 {
flex: 2;
}
.s2 {
width: 70%;
border: 1.5px solid red;
display: flex;
flex-direction: column;
padding: 10px;
}
.s2 > * {
border: 1px dotted blue;
}
.row2-1 {
flex: 4;
margin-bottom: 5px;
}
.row2-2 {
flex: 1;
}