css 팁
간단한 한줄짜리 CSS 설정으로 웹페이지 구성요소들의 디자인 속성을 원하는데로 편집할 수 있는 몇가지 팁을 소개해 드립니다.
높이 100% 레이어 (테이블 만들기)
<html>
<body>
<div>높이 100%</div>
</body>
</html>
위의 경우 DIV {height:100%;} 로 높이 지정을 했을 때, 경우에 따라 적용되지 않을 수 있습니다. 이때는 DIV의 상위객체를 전부 높이 지정을 해줍니다.
BODY {height:100%;}
DIV {height:100%;}
레이어 중앙정렬 가운데로 맞추기
테이블의 경우 TD {vertical-align:middle;} 속성으로 수직 중앙정렬을 할 수 있지만, 레이어는 힘들죠. 하지만, DIV 요소가 고정된 높이를 가질 경우 line-height의 값을 높이와 동일하게 설정하면, 수직 중앙정렬효과를 줄 수 있습니다.
.middle {height:150px; line-height:150px;}
줄바꿈 금지
특정 요소에 포함된 텍스트가, 요소의 고정된 가로폭때문에 의도하지 않게 줄바꿈되는 것을 막을 수 있습니다.
.nobr {white-space:nowrap;}
.nobr {white-space:nowrap; overflow:hidden;}
파이어폭스의 스크롤바 보이게 하기
IE와 다르게 FF에서는 기본적으로 스크롤바가 나타나지 않습니다. 해당 CSS를 추가하면 FF에서 스크롤바를 나타나게 할 수 있습니다.
html {overflow:-moz-scrollbars-vertical;}
블록 엘리먼트 수평 중앙정렬 하기
요소가 500px 의 가로크기를 가지고, 자신의 상위 엘리멘트객체를 기준으로 수평 중앙정렬을 시킬 수 있습니다.
.div {width:500px; margin:0 auto;}
IE의 textarea에서 스크롤바 감추기
IE에서는 기본적으로 TEXTAREA 엘리먼트나, BODY 에 스크롤바가 보여집니다. 해당 CSS를 추가하면 스크롤바를 감출 수 있습니다.
BODY {overflow:auto;}
TEXTAREA {overflow:auto;}
출력시 페이지 넘김 처리하기
웹페이지 출력시, h2 엘리먼트가 있는 위치를 기준으로 다음페이지에 출력하게 할 수 있습니다.
h2 {page-break-before:always;}
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1217 | 반응형 | 4년 전 | 3108 | ||
| 1216 | 웹접근성 | 4년 전 | 2505 | ||
| 1215 | CSS | 4년 전 | 4910 | ||
| 1214 | 기타 | 4년 전 | 8366 | ||
| 1213 | CSS | 4년 전 | 3257 | ||
| 1212 | 웹접근성 | 4년 전 | 3645 | ||
| 1211 | CSS |
|
5년 전 | 4123 | |
| 1210 | 기타 | 5년 전 | 3348 | ||
| 1209 | CSS | 5년 전 | 3596 | ||
| 1208 | 기타 | 5년 전 | 3155 | ||
| 1207 | 기타 | 5년 전 | 2896 | ||
| 1206 | CSS |
moviepd
|
5년 전 | 3725 | |
| 1205 | HTML |
moviepd
|
5년 전 | 4389 | |
| 1204 | 기타 | 6년 전 | 7840 | ||
| 1203 | 웹접근성 | 6년 전 | 3017 | ||
| 1202 | 기타 | 6년 전 | 2992 | ||
| 1201 | 기타 | 6년 전 | 4332 | ||
| 1200 | 기타 | 6년 전 | 4127 | ||
| 1199 | 기타 | 6년 전 | 4137 | ||
| 1198 | 기타 | 6년 전 | 2618 | ||
| 1197 | 기타 | 6년 전 | 2691 | ||
| 1196 | 기타 | 6년 전 | 2474 | ||
| 1195 | 기타 | 6년 전 | 2463 | ||
| 1194 | 기타 | 6년 전 | 3052 | ||
| 1193 | 기타 | 6년 전 | 9240 | ||
| 1192 | 기타 | 6년 전 | 3892 | ||
| 1191 | 기타 | 6년 전 | 6226 | ||
| 1190 | 기타 | 6년 전 | 2447 | ||
| 1189 | 기타 | 6년 전 | 2347 | ||
| 1188 | 기타 | 6년 전 | 1829 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기