실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 5건의 글
CSS의 fit-content 속성을 활용해 박스 크기를 콘텐츠에 맞추는 CodePen 예제다. width나 height에 fit-content를 적용하면 요소가 내용물 크기만큼만 공간을 차지하도록 자동 조절된다. 버튼·배지·레이블 등 유연한 크기의 레이아웃을 만들 때 유용하다.
See the Pen fit-content by H J (@H-J-the-typescripter) on CodePen.
요소의 너비를 콘텐츠 크기에 맞게 자동으로 지정하는 CSS 기법을 보여주는 CodePen 예제다. width: fit-content를 사용하면 블록 요소가 화면 전체가 아닌 내용만큼만 너비를 차지하도록 줄어들며, 인라인 요소나 버튼처럼 자연스러운 크기를 만들 때 유용하다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
이미지 주변으로 텍스트가 자연스럽게 흐르도록 배치하는 CSS float 예제다. 이미지에 float: left나 right를 적용하고 margin으로 여백을 조절하면, 본문 텍스트가 이미지 옆과 아래를 감싸는 신문 기사 형태의 레이아웃이 만들어진다. 동작을 확인할 수 있는 CodePen 데모를 포함한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
JavaScript 없이 순수 CSS만으로 3단 폭포수(벽돌형) 레이아웃을 구현하는 방법이다. column-count: 3으로 콘텐츠를 3개 열로 나누고 break-inside: avoid를 적용해 항목이 잘리지 않게 하거나, grid 템플릿과 함께 사용해 높이가 서로 다른 이미지·카드가 자연스럽게 채워지도록 배치하는 HTML·CSS 예제를 제공한다.
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* 容器必须有固定高度
* 且高度大于最高的列高 */
height: 660px;
/* 非必须 */
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
width: 60%;
margin: 40px auto;
counter-reset: items;
}
.item {
width: 32%;
/* 非必须 */
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}
/* 仅用于打印数字 */
.item::before {
counter-increment: items;
content: counter(items);
}
/* 将内容块重排为3列 */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* 强制换列 */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}<div class="container">
<div class="item" style="height: 140px">1</div>
<div class="item" style="height: 190px">2</div>
<div class="item" style="height: 170px">3</div>
<div class="item" style="height: 120px">4</div>
<div class="item" style="height: 160px">5</div>
<div class="item" style="height: 180px">6</div>
<div class="item" style="height: 140px">7</div>
<div class="item" style="height: 150px">8</div>
<div class="item" style="height: 170px">9</div>
<div class="item" style="height: 170px">10</div>
</div>CSS3의 calc() 함수를 이용해 JavaScript 없이 스타일 시트 안에서 사칙연산을 수행하는 방법을 소개한다. width: calc(100% - 100px) 같은 기본 사용법과 3단 등폭 레이아웃 예제, + · - · * · / 연산 규칙, px·em·rem·% 단위 혼용 계산, 브라우저별 지원 현황, 그리고 연산자 앞뒤에 공백이 없으면 적용되지 않는 주의사항까지 정리했다.
多好的东西啊，不用js，一个css就解决了。
.box{
border:1px solid #ddd;
width:calc(100% - 100px);
background:#9AC8EB;
}3栏等宽布局
.box{
margin-left:20px;
width:calc(100%/3 - 20px);
}
.box:nth-child(3n){
margin-left:0;
}运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”“-”“*”“/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算。
浏览器支持
firefox 4.0+已经开支支持calc()功能，不过要使用-moz-calc()私有属性，chrome从19 dev版，也开始支持私有的-webkit-calc()写法，IE9这次则牛逼了一次，原生支持标准的不带前缀的写法了。Opera貌似还不支持～～
注意：
프로젝트 문의 및 견적 요청은 언제든 환영합니다.