'Programming/HTML/CSS'에 해당되는 글 24건
NOTICE
CSS 초기화
모든 브라우저에서 초기값을 동일하게 해 주기 위해서 CSS 초기화(reset)를 한다. 아무래도 엘리먼트들을 0(0이라고 해서 수치를 생각하는 것보단 깨끗하다? 아무 것도 없다? 이런 식으로 생각하는 게 좋을 듯)의 상태로 만들어 주고 시작하기 때문에 비슷한 화면이 나온다고 보면 된다. 그런데 *(Asterisk, 애스터리스크)로 초기화를 시키는 경우가 있는데 그러지 않길 바란다. 모든 엘리먼트들을 전부 padding, margin을 0으로 하는데 하지 말아야 할 애들까지 그렇게 하기 때문이다. 가장 많이 쓰이는 [에릭 마이어의 reset] 그리고 [YUI reset] 링크를 따라 가서 보면 된다. 문제는 게을러서(-_-) 모든 페이지에 모두 저런 초기화 파일을 삽입하는 경우가 있는데 귀찮더라도 지양하자..
padding, margin 축약형
TOP, RIGHT, BOTTOM, LEFT의 값이 모두 다르다면 padding:1px 2px 3px 4px; 이런 식으로 가능하다. padding:TOP RIGHT BOTTOM LEFT; TOP, BOTTOM의 값이 같고 RIGHT, LEFT의 값이 같다면 padding:10px 20px; 이런 식으로 가능하다. padding:TOP/BOTTOM RIGHT/LEFT RIGHT, LEFT의 값이 같다면 padding:10px 20px 5px; 이런 식으로 가능하다. padding:TOP RIGHT/LEFT BOTTOM; * '/'는 단어 구분을 위해 넣은 것이니 혼동하면 안 됨 참고로 px이 0인 경우엔 px 단위를 안 써도 되지만 1 이상일 경우은 반드시 px를 붙여 주자.
[IE 전용]CSS로 문자열 자른 후 ... 넣기
제목에서도 밝혔듯이 IE 전용이다. FF 같은 데에서는 저어어얼대로 안 된다. 요즘은 크로스 브라우징을 원해서 크게 필요는 없겠지만 아직도 우리 회사처럼 절대 크로스 브라우징에 관심을 안 가지는 업체들에게는 졸라 필요할 듯하다. testtesttest * 다시 한 번 말하지만 절대 IE(6에서도 됨) 전용!!! 문제점은 ...으로 표시된 부분을 드래그 하면 다 보인다. 구글링을 해 보면 FF에서도 되는 게 나오긴 하지만 좀 귀찮다. 만약 클라이언트가 크로스 브라우징을 요구하면 그냥 귀찮겠지만 각 언어별로 문자열 자르기로 처리하는 게 생각할 것도 없이 편할 듯하다.
프린트 할 때 페이지 나누기
p.page { page-break-before:always; } 페이지 1 페이지 2 페이지 3 페이지 4 프린트 할 때 페이징을 해야 하는 경우가 있다. 뭐 많진 않겠지만 가끔 우리 클라이언트 샛퀴들처럼 300개 가까이 되는 신청서 한꺼번에 인쇄되게 해 달라고 하는 찐따들이 있다. 그런 찐따들을 달래기 위한 게 아닌가 싶다. 사설은 닥치고 코드만 봐도 충분히 이해가 갈 듯하다. 그냥 css 한 줄이면 충분하다. 위 코드를 html 페이지에서 그냥 보면 페이지 1 페이지 2 페이지 3 페이지 4 이렇게만 보이지만 '인쇄 미리 보기'를 하게 되면 페이지가 정상적으로 나누어져 나온다. FF, IE6에선 정상적으로 확인했지만 IE7에선 아래와 같은 버그(?)가 있습니다. 지금 위처럼 텍스트만 있을 경우엔 페..