| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 프로그래머스 #파이썬 #코딩테스트 #알고리즘
- 백준 #알고리즘 #파이썬 #코딩테스트
- 프로그래머스
- BFS
- 코딩테스트
- react #리액트 #동빈나 #나동빈 #유튜브강의
- Dijkstra
- css #생활코딩 #웹
- DFS
- java #자바 #동빈나
- java #자바 #생활코딩
- css #웹 #생활코딩
- dp
- java #자바
- 파이썬 #백준 #알고리즘 #코딩테스트
- 파이썬 #알고리즘 #코딩테스트 #프로그래머스
- react #리액트 #동빈나
- 투포인터
- 백트랙킹
- 백준 #파이썬 #알고리즘 #코딩테스트
- 알고리즘
- 자바 #java
- java #자바 #나동빈
- 다이나믹프로그래밍
- 다익스트라
- 백준
- PYTHON
- 프로그래머스 #파이썬 #알고리즘 #코딩테스트
- 재귀
- 파이썬
Archives
- Today
- Total
커리까지
CSS 수업 - Multi column 본문
728x90
SMALL
<!doctype>
<html>
<head>
<meta charset="UTF-8">
<style>
.column{
text-align: justify;
column-count: 2;
column-width: 200px;
column-gap: 100px;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: red;
}
h1{
column-span: all;
}
</style>
</head>
<body>
<div class="column">
<h1>초월</h1>
lllllllllllllllllllllll
</div>
</body>
</html>column-count- 컬럼의 개수를 지정한다.
column-width- 크기를 지정한 후 이 크기를 유지할 수 있는 만큼 컬럼이 생긴다.
- 200px이하면 한 개의 컬럼만 그 이상이 되었을때 2개, 3개, 등등 생겨난다.
column-gap- 컬럼과 컬럼 사이의 간격
column-rule-style- 컬럼과 컬럼사이의 간선이 생긴다.
column-rule-width- 간선의 넓이
column-rule-color- 간선의 색상
column-span- 컬럼에 상관없이 본인의 위치를 찾을 수 있다.
728x90
LIST
'CSS' 카테고리의 다른 글
| CSS 수업 - float 1 (0) | 2021.03.26 |
|---|---|
| CSS 수업 : mediaquery 1 - 기본 (0) | 2021.03.25 |
| CSS 수업 - flex 5 : 기타 속성 들 (0) | 2021.03.23 |
| CSS 수업 - flex 4 : holy grail layout (0) | 2021.03.22 |
| CSS 수업 - flex 3 : basis & grow & shrink (0) | 2021.03.19 |
'CSS' Related Articles
more
Comments