<style>
#fx{
top: 5px;
right: 5px;
width: 50px;
height: 50px;
background: #ff6a00;
/* 지정한 위치에 고정해서 배치 */
/* 스크롤 움직여도 고정해서 표시됨 */
position: fixed;
}
#content{
width: 400px;
}
p{
line-height: 30px;
}
</style>
</head>
<body>
<div id="fx"></div>
<div id="content"></div>
<p>
fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
기준이 됩니다.
(이하생략)
</p>
<p>
fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
(생략)
</p>
</body>
<style>
.multi{
/* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
column-width: 120px;
}
</style>
</head>
<body>
<div>
<h2>건강에 좋은 식품 - Super Food</h2>
</div>
<div class="multi">
<p>
<b>코코넛 오일</b>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
<p>
<b>블루베리</b>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
<p>
<b>아몬드</b>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
</div>
</body>
col-count
<style>
.multi{
/* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
/* column-width: 120px; */
/* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
column-count: 3;
}
</style>
</head>
<body>
<div>
<h2>건강에 좋은 식품 - Super Food</h2>
</div>
<div class="multi">
<p>
<b>코코넛 오일</b>
남미 파나마에서는
(생략)
</p>
<p>
<b>블루베리</b>
남미 파나마에서는
(생략)
</p>
<p>
<b>아몬드</b>
남미 파나마에서는
(생략)
</p>
</div>
</body>
col-rule
<style>
.multi{
/* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
/* column-width: 120px; */
/* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
column-count: 3;
/* column-rule: 단의 경계선 스타일 */
column-rule: 2px dotted #000;
/* column-gap: 단 사이의 여백 */
column-gap: 50px;
}
</style>
</head>
<body>
<div>
<h2>건강에 좋은 식품 - Super Food</h2>
</div>
<div class="multi">
<p>
<b>코코넛 오일</b>
남미 파나마에서는
(생략)
</p>
<p>
<b>블루베리</b>
남미 파나마에서는
(생략)
</p>
<p>
<b>아몬드</b>
남미 파나마에서는
(생략)
</p>
</div>
</body>
col-break
<style>
.multi{
/* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
/* column-width: 120px; */
/* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
column-count: 4;
/* column-rule: 단의 경계선 스타일 */
column-rule: 2px dotted #000;
/* column-gap: 단 사이의 여백 */
column-gap: 50px;
margin: 20px auto;
padding: 20px;
}
.multi h3{
/* 이 기준 다음으로 담이 넘어감 */
/* break-after: column; */
/* 이 기준 이전으로 단이 넘어감 */
break-before: column;
}
section{
width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
</style>
</head>
<h3ody>
<section>
<div>
<h2>건강에 좋은 식품 - Super Food</h2>
</div>
<div class="multi">
<p>
<h3>코코넛 오일</h3>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
<p>
<h3>블루베리</h3>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
<p>
<h3>아몬드</h3>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
</div>
</section>
</body>
col-span
<style>
.multi{
/* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
/* column-width: 120px; */
/* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
column-count: 4;
/* column-rule: 단의 경계선 스타일 */
column-rule: 2px dotted #000;
/* column-gap: 단 사이의 여백 */
column-gap: 50px;
margin: 20px auto;
padding: 20px;
}
.multi h3{
/* 이 기준 다음으로 담이 넘어감 */
/* break-after: column; */
/* 이 기준 이전으로 단이 넘어감 */
break-before: column;
}
section{
width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
.no-col{
background: #f0f0f0;
margin: 10px 3px;
padding: 20px;
border-radius: 5px;
/* all : 전체단을 하나로 합침 */
column-span: all;
}
</style>
</head>
<h3ody>
<section>
<div>
<h2>건강에 좋은 식품 - Super Food</h2>
</div>
<div class="multi">
<p>
<h3>코코넛 오일</h3>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
<p>
<h3>블루베리</h3>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
<p>
<h3>아몬드</h3>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
<div class="no-col">
<p>
<h3>케일</h3>
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
남미 파나마에서는
"코코넛 오일 한컴이면 모든 병이 낫는다"라고 이야기할
정도로 그 효능이 뛰어나다.
</p>
</div>
</div>
</section>
</body>
