word-break:break-all;
테이블 만들고 박스 크기에 맞춰 다음줄로 넘길때 사용
화면 가운데 배치하기 위해
1) 전체 테이블을 클래스 하나로 덮어 쓴다.
2) 그 안에 컨테이너로 감싼다.
3) 그 안에다 아이템으로 열거한다.
<div class="outer">
<div class="container">
<div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div class="item">BB</div>
<div class="item">CC</div>
<div class="item">DD</div>
<div class="item">EE</div>
<div class="item">FF</div>
<div class="item">GG</div>
<div class="item">HH</div>
</div>
</div>.outer{
display : flex;
justify-content: center;
height : 100vh; // 화면 세로 방향 스크린 다 채우기
align-items: center;
}height : 100vh; // 화면 세로 방향 스크린 다 채우기
// 화면 가운데 배치
.container{
display : grid;
grid-template-columns : 1fr 2fr 1fr;
grid-auto-rows : minmax(100px, auto);
word-break:break-all;
}word-break:break-all; :텍스트 다음 줄로 내리기
텍스트 가로방향 가운데 정렬은 text-align : center;
텍스트 세로방향 정렬은 margin과 padding으로 적절히 준다.
.item{
display : flex;
justify-content: center;
align-items: center;
}아이템도 마찬가지로 위와 같은 방법으로 가운데 배치
Front-Dev