css 수직중앙정렬 외 팁8

말자 전체게시물 작성일13-05-02 05:47 조회3,869회

본문

"가장 간단한게 최고의 방법이다."라는 말이 있습니다.
아래는 단 하나의 CSS속성으로 문제를 해결하는 경우 입니다.

2. 플로트된 고정폭 레이아웃의 컨텐츠가 더 클 경우 처리하기
 
  1. #main{ overflow:hidden; }  
#main{ overflow:hidden; }
  1. 플로트된 고정폭 컨테이너 요소의 폭보다 컨텐츠 요소의 폭이 더 클 경우(예.와이드 이미지) 레이아웃이 깨지는것을 방지하려면 해당 컨텐츠 요소에 overlfow를 hidden처리하면 레이아웃이 깨지지 않습니다.

    3. 링크값 줄바꿈 안되게 하기
     
    1. a { white-space:nowrap; }  
    a { white-space:nowrap; }
    링크 텍스트를 한 줄로 처리해야 할 경우 white-space속성을 nowrap처리하면 컨테이너 요소에 상관없이 한 줄로 처리 할 수 있습니다.

    4. 파이어폭스의 스크롤바보이게 하기
     
    1. html { overflow:-moz-scrollbars-vertical; }  
    html { overflow:-moz-scrollbars-vertical; }
    IE와 다르게 FF에서는 기본적으로 스크롤바가 나타나지 않습니다. 해당 CSS를 추가하면 FF에서 스크롤바를 나타나게 할 수 있습니다.

    5. 블록 레벨 요소 수평 중앙정렬 하기
     
    1. margin:0 auto;  
    margin:0 auto;
    대부분의 브라우저에서는 블록 레벨 요소는 위와 같은 CSS처리를 하면 수평 중앙정렬 됩니다.

    6. IE의 textarea에서 스크롤바 감추기
     
    1. textarea { overflow:auto; }  
    textarea { overflow:auto; }
    IE에서는 기본적으로 textarea요소에 스크롤바가 보여집니다. 해당 CSS를 추가하면 스크롤바를 감출 수 있습니다.

    7. 출력시 페이지 넘김 처리하기
     
    1. h2 { page-break-before:always; }  
    h2 { page-break-before:always; }
    출력시 해당 요소가 위치한 곳에서 페이지 넘김을 할 수 있습니다.

    8. anchor요소의 기본 보더 없애기
     
    1. a:active, a:focus { outline:none; }  
    a:active, a:focus { outline:none; }
    IE를 제외한 브라우저에서 사용가능하나 접근성 및 사용성면에서 추천하지 않습니다.
    IE를 포함한 브라우저에서는 다음과 같이 처리할 수 있습니다.
     
    a:active, a:focus {
    -moz-outline: none;
    outline: none;
    ie-dummy: expression(this.hideFocus=true);
    }
     
    1. a:active, a:focus {   
    2. -moz-outline: none;   
    3. outline: none;   
    4. ie-dummy: expression(this.hideFocus=true);   
    5. }  

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 2 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 134 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 134 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 161 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 148 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 161 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 202 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 117 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 437 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 150 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 107 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 233 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1622 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1906 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1211 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4730 추천: 15
게시물 검색