이렇게 <div>태그에 display 속성으로 table 과 유사하게 만들어 보았다 하지만 이렇게 만들면 유사하긴 하지만 완전히 똑같은건 아니라고 한다
<body>
<divclass="display-table">
<divclass="display-td-header">
<divclass="display-td-row">
<divclass="display-td-cell">A</div>
<divclass="display-td-cell">B</div>
<divclass="display-td-cell">C</div>
</div>
</div>
<divclass="display-td-body">
<divclass="display-td-row">
<divclass="display-td-cell">A1</div>
<divclass="display-td-cell">B1</div>
<divclass="display-td-cell">C1</div>
</div>
<divclass="display-td-row">
<divclass="display-td-cell">A2</div>
<divclass="display-td-cell">B2</div>
<divclass="display-td-cell">C2</div>
</div>
<divclass="display-td-row">
<divclass="display-td-cell">A3</div>
<divclass="display-td-cell">B3</div>
<divclass="display-td-cell">C3</div>
</div>
</div>
</div>
이렇게 컨텐츠를 주고 만들어 보자
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
밑에도 <table> 태그로 <div>태그와 똑같은 형식의 표를 만들었다
그러면 이렇게 표가 만들어진걸 볼 수 있다 위에가 <div> 태그에 display 속성으로 만든표 밑에가 <table> 태그로 만든 표이다 유사하지만 다른걸 볼 수 있다
하지만 display: table 로는 사용자의 해상도에 따라(스마트폰으로 접속 등) 해당 콘텐츠의 크기를 맞출수가 없다고 한다(반응형 웹) 그래서 flex 값을 실무에서 많이 쓴다고 한다
flex 값으로 레아이웃을 만들떄 flexbox라고 부른다고 한다 flexbox는 주축과 교차축 기준으로 레이아웃을 정의한다고 하는데
이렇게 오른쪽 상단에 가로로 된 콘텐츠와 오른쪽 하단에 세로로 된 콘텐츠가 있는데 이두개의 컨텐츠의 코드는 왼쪽의 코드처럼 똑같다 오른쪽 상단의 콘텐츠는 x축(가로)가 주축이고 y축(세로)가 교차축이고 오른쪽 하단의 콘텐츠는 y축(세로)가 주축이고 x축(가로)가 교차축이다
<style>
.container {
display: flex;
flex-direction: row; /* x축 : 좌에서 우로(가로)*/
border: 3pxdottedblack;
}
.item {
background-color: greenyellow;
}
<body>
<divclass="container">
<divclass="item">A</div>
<divclass="item">B</div>
<divclass="item">C</div>
</div>
</body>
container 이름으로 클래스 선택자를 만들고 flex-direction: row 값이 x축(가로, 좌에서 우로)을 뜻하는 속성값이다 item 클래스 선택자는 보기 편하게 백그라운드 색을 greenyellow로 줬다
그러면 콘텐츠가 x축(가로)을 주축으로 형성된다
<style>
.container {
display: flex;
/* flex-direction: row; x축 : 좌에서 우로(가로) */
flex-direction: column; /* y축 : 위에서 아래로(세로) */
border: 3pxdottedblack;
}
y축(세로)을 주축으로 만들려면 flex-direction: column 값을 주면 된다
그럼 이렇게 y축(세로)을 주축으로 콘텐츠가 나열된다
<style>
.container {
display: flex;
/* flex-direction: row; x축 : 좌에서 우로(가로) */
flex-direction: row-reverse; /* x축 : 우에서 좌로(가로)*/
/*flex-direction: column; /* y축 : 위에서 아래로(세로) */
border: 3pxdottedblack;
}
row-reverse 란 값도 있다 이건 기본 row 값은 좌에서 우 였다면 reverse는 반대로 우에서 좌이다
이렇게 C > B > A 순서대로 반대로 나열된걸 볼 수 있다
column 값도 reverse가 있다
<style>
.container {
display: flex;
/* flex-direction: row; x축 : 좌에서 우로(가로) */
/*flex-direction: row-reverse; x축 : 우에서 좌로(가로)*/
/*flex-direction: column; /* y축 : 위에서 아래로(세로) */
flex-direction: column-reverse; /*y축 : 아래에서 위로(세로) */
border: 3pxdottedblack;
}
column-reverse는 아래에서 위로 나열되게 된다
이렇게 아래 A부터 순서대로 B > C 순이 된다
reverse 값은 잘 쓰지는 않는다고 한다
<style>
.container {
display: flex;
/* 좌에서 우로(가로) */
flex-direction: row;
/* x축 : 우에서 좌로(가로) */
/* flex-direction: row-reverse; */
/* y축 : 위에서 아래로(세로) */
/* flex-direction: column; */
/* y축 : 아래에서 위로(세로) */
/* flex-direction: column-reverse; */
border: 3pxdottedblack;
flex-wrap: wrap;
}
flex-wrap: wrap 이라는 값도 있다 wrap은 정해진 칸을 벗어나면 밑으로 내려준다 위의 코드 처럼 flex-direction: row 값이다 x축(가로)로 콘텐츠가 정렬되야 한다 근데 요기서 해상도나 크기를 줄여보면
이렇게 밑으로 내려간걸 볼 수 있다
/* 시작점으로 정렬 row인 경우는 왼쪽, row-reverse인 경우는 오른쪽 */
/* column인 경우는 위쪽 column-reverse인 경우는 아래쪽 */
justify-content: flex-start;
/* 끝점으로 정렬, row인 경우는 오른쪽, coulmn인 경우는 아래쪽 */
justify-content: flex-end;
justify-content: center;
}
justify-content 속성도 있다 flex-start 속성값은 시작점을 기준으로 정렬한다 row인 경우 왼쪽부터 정렬 column인 경우 위쪽부터 정렬 식이다
flex-end 속성값은 끝점을 기준으로 정렬한다 row인 경우 오른쪽부터 정렬 column인 경우는 아래쪽부터 정렬이다
center 속성값은 당연히 가운데 정렬이다
여러가지 justify-content 속성값들이다
grid 레이아웃이다 grid는 나온지 얼마 안되서 실무에선 많이 쓰지않고 현직 개발자들도 조심스러워 한다고 많이 쓰진 않는다고 한다 알아만 두자
