Qui fert pondus coronae velit

아직까지 Flex 사용법이 익숙하지 않습니다. 이전부터 계속 Block 사용으로 웹 디자인을 해 오고, 큰 문제가 없었기에 신경을 쓰지 않았습니다.

이번 페이지는 CSS에서 사용할 Flex 입니다. 다른 구독자 분들에게는 작은 가이드도 되었으면 하네요.

<style>
hr{border:0;margin:20px 0;}
.view-data{margin:0;padding:1%;width:98%;list-style:none;background-color:#ddd;}
.view-data li{width:100px;height:100px;line-height:100px;color:#fff;font-size:50px;text-align:center;text-shadow:1px 1px 1px gray;}
.view-data li:nth-child(1){background-color:red;}
.view-data li:nth-child(2){background-color:orange;}
.view-data li:nth-child(3){background-color:yellow;}
.view-data li:nth-child(4){background-color:green;}
.view-data li:nth-child(5){background-color:blue;}
</style>

위 스타일은 이 페이지에서 기본으로 지정하고 사용할 스타일입니다.

flow-direction

카테고리: CSS

0개의 댓글

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다