css 팁

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 9년 전 · 조회 2415 2415

간단한 한줄짜리 CSS 설정으로 웹페이지 구성요소들의 디자인 속성을 원하는데로 편집할 수 있는 몇가지 팁을 소개해 드립니다.

높이 100% 레이어 (테이블 만들기)

<html>

<body>

</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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
557	HTML	[질문] HTML5 를 익스에서 문제없이 사용하게 하려면? [5]	늘푸른세상 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3110
556	HTML	메뉴네비게이션 소스가 잘못되었나요? [4]	ReeJang 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3547
555	HTML	css3 이미지 원형만들기 등등 참고자료 [3]	헌이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	8469
554	HTML	말씀듣고.. [10]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2783
553	HTML	쉬우나 쉽지않은, 오래되었으나 그리 오래되지 않았던... [2]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2827
552	HTML	웹표준.... [2]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2741
551	HTML	html 익스에서는 가운데 정렬이 안되네요.. [5]	도토리과자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2933
550	HTML	대인배 님들 재발봐주세요 진짜 부탁드립니다 [5]	우리까미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2597
549	HTML	레이어팝업 제어 질문좀드려도 될까요?? [6]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3586
548	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 완성 예제	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3372
547	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 광고 영역(?) [1]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2962
546	HTML	[질문] absolute 또는 relative 자식div 투명처리 [4]	샤이니아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4296
545	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 열과 height	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2984
544	HTML	CSS 속성 적용의 우선 순위 [7]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	10679
543	HTML	ㅋㅋㅋ죄송합니다;;; [6]	우리까미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3174
542	HTML	연습 TABLE vs DIV	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3202
541	HTML	날나리 강좌. ㅋ 레이아웃 짜기, 열(column) 그리고 clear (부록포함)	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3004
540	HTML	중국어 일본어 홈페이지 만들때 글자 들쑥날쑥한거요... [1]	soing 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3715
539	HTML	날나리 강좌. ㅋ 레이아웃 짜기, float의 이해 [1]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2841
538	HTML	날나리 강좌. ㅋ 레이아웃 짜기 footer 밑에 놓기 [4]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4176
537	HTML	[질문이 있습니다.] css코드 앞에~ [5]	2번호랑이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2212
536	HTML	날나리 강좌. ㅋ 레이아웃 짜기, height 연습	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3541
535	HTML	고수님들께 도움좀.. 메인로고와 탑메뉴의 가로크기가 안맞아서요.. [4]	메탈포스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2965
534	HTML	날나리 강좌. ㅋ 레이아웃 짜기 Row편 [3]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3162
533	HTML	날나리 강좌. ㅋ 기본 속성? display	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3096
532	HTML	날나리 강좌. ㅋ HTML DTD [1]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2748
531	HTML	SGML에서 HTML까지 마크업언어에 관한 간략한 이해	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4024
530	HTML	[css] width, height의 이해	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4550
529	HTML	[css] 마진 병합 [2]	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3887
528	HTML	[css] z-index 초기값 auto 사용 주의	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4458