line-height
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
line-height
는 줄간격을 조절합니다.
예제 1
px 단위로 조절하는 예제
보기
CSS 공작소
CSS 공작소
CSS 공작소
line-height : 30px
CSS 공작소
CSS 공작소
CSS 공작소
line-height : 60px
소스
<style type="text/css">
.css_test {
border
: 3px solid gray;
box-shadow
: 0 0 5px silver inset;
border-radius
: 5px;
}
</style>
<div class="css_test" style="line-height:30px;">
CSS 공작소<br>
CSS 공작소<br>
CSS 공작소<br>
<b>line-height : 30px</b>
</div>
<div class="css_test" style="line-height:60px;">
CSS 공작소<br>
CSS 공작소<br>
CSS 공작소<br>
<b>line-height : 60px</b>
</div>
사용된 CSS (클릭시 보기) :
border
border-radius
box-shadow
line-height
예제 2
실습 - px 단위로 조절해 보기
보기
CSS 공작소
CSS 공작소
CSS 공작소
line-height :
20px
CSS 공작소
예제 3
실습 - % 단위로 조절해 보기
보기
CSS 공작소
CSS 공작소
CSS 공작소
line-height :
20px
CSS 공작소
연구 1
실습 - px 단위일때 폰트크기에 따라 어떻게 변하는지 보기
보기
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
line-height :
10px
CSS 공작소
설명
- px 단위로 입력하면 폰트크기에 상관없이 일정하게 줄간격이 설정됩니다.
연구 2
실습 - % 단위일때 폰트크기에 따라 어떻게 변하는지 보기
보기
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
line-height :
100%
CSS 공작소
설명
- % 단위로 입력하면 폰트크기에 맞춰서 상대적으로 줄간격이 설정됩니다.
☞ 목록으로 가기