css 팁

컴프

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

· 9년 전 · 조회 2411 2411

간단한 한줄짜리 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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
617	HTML	CSS Font-Size Comparative Table [4]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3424
616	HTML	IE 5,6,7,8 대응해주는 .js [2]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3224
615	HTML	하단에 딱붙어있는 레이어는 어떻게 만들어야 할지? [6]	클럽매냐 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4146
614	HTML	(소스)마우스오버시 힌트창 css만으로 작동 [6]	크라이스트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5449
613	HTML	드림위버에서 특정 파일들의 코드 검색이 안됩니다.ㅜㅜ	오십원 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2593
612	HTML	반응형 레이아웃 와이어프레임 [7]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3873
611	HTML	실전 HTML5 GUIDE PDF [14]	동구라미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4090
610	HTML	가변형 레이아웃 관련 [3]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4856
609	HTML	익스플로러에서만 깨지는 이유가 도무지... [8]	아이18 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3838
608	HTML	반응형 이미지 기법들 [8]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5312
607	HTML	UI 관련 유용한 사이트 추천 [3]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3198
606	HTML	또 질문드립니다. [2]	웹라이프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3102
605	HTML	HTML5 CSS3 애니메이션 롤오버메뉴 [2]	techer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5380
604	HTML	HTML5를 지원하지 않는 웹브라우저에 비디오,오디오 재생해주는 html5media [5]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4368
603	HTML	css 표그리는법좀 문의 드립니다. 아무리 찾아도..ㅠㅜ [6]	클럽매냐 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3086
602	HTML	ie6 이게 더블 마진이면 해결을 어떻게 해야하나요? [7]	웹라이프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3283
601	HTML	드림위버 롤오버요~ [1]	성민꼬르꼬 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3961
600	HTML	요걸우째설명해야될지;;; [7]	팡야 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3348
599	HTML	li 가로정렬 [3]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4656
598	HTML	반응형 웹 디자인 (Responsive Web Design) [15]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6548
597	HTML	HTML5의 요소들에 대한 여러 웹브라우저의 지원여부를 확인할 수 있는 사이트 [1]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2758
596	HTML	님들은 html5공부 어떻게 하셨나요? [5]	웹승부사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3764
595	HTML	CSS를 이용한 DIV 레이아웃 문의드립니다. [13]	Black 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6374
594	HTML	HTML5 API Vocabulary [1]	techer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2560
593	HTML	css 로 레이아웃 컨트롤 [9]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4066
592	HTML	백그라운드 이미지위에 swf파일이 안겹쳐져요. [5]	성민꼬르꼬 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3783
591	HTML	HTML5 기능들을 테스트해볼수 있는 데모 사이트 [1]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3483
590	HTML	웹표준 권고사항에 CSS 작성시, 대소문자 구분도 있나요? [9]	오리위즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	9215
589	HTML	submit 버튼 안 보이게 하면 이상할까요? [2]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2855
588	HTML	이미지에 들어가는 여백없애는 방법.. 이거 고민이네요;; [6]	크라운엠버서더 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4723