HTML 46

인쇄시 다음 페이지로 넘길 수 있는 page-break-before 속성

page-break-before 속성은 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 Property입니다. block-level element 사이를 경계로 페이지를 나누기 때문에 반드시 block-level element에 지정해 주어야 합니다. P, DIV와 같은 block-level element가 아닌 요소에 적용하면 다음 페이지로 넘어가지 않습니다. page-break-before 속성 auto : 기본값 always : 항상 페이지 넘김 avoid : 페이지 넘김을 하지 못하게 강제 left : 제본을 위한 값이라고 하나 always와 차이점을 발견하기 힘듭니다. right : 제본을 위한 값이라고 하나 always와 차이점을 발견하기 힘듭니다. 올바른 사용예가나다라마바사A..

Web 2017.12.06

[XML] 특수문자 표시

HTML 특수문자코드표표현문자숫자표현문자표현설명-�--사용하지 않음space -수평탭space -줄 삽입- --사용하지 않음space -여백!!-느낌표"""따옴표##-숫자기호$$-달러%%-백분율 기호&&&Ampersand''-작은 따옴표((-왼쪽 괄호))-오른쪽 괄호**-아스트릭++-더하기 기호,,-쉼표---Hyphen..-마침표//-Solidus (slash)0 - 90-9-0부터 9까지::-콜론;;-세미콜론>>보다 큰??-물음표@@-Commercial atA - ZA-Z-A부터 Z까지[[-왼쪽 대괄호\\-역슬래쉬]]-오른쪽 대괄호^^-탈자부호__-수평선``-Acute accenta - za-z-a부터 z까지{{-왼쪽 중괄호||-수직선}}-오른쪽 중괄호~~-꼬리표..

Web 2017.12.05

형광펜 효과 - Highlighters

형광펜을 영어로 하일라이터(Highlighter) 라고 하는데요, 웹페이지에 형광펜 효과를 내는 CSS입니다. 형광펜 예제 코드 아파트에는 인적이 없었지만 어떤 아파트의 입구 앞에서 대여섯 명의 주부들이 모여 한 곳을 바라보고 있었다. 나도 고개를 들어 보니, 아파트 바로 맞은편의 언덕에서 불이 나고 있었다. 70도에 가까운 가파른 경사면의 높은 곳에서 연기가 피어오르고 있었다. 사람이 가까스로 올라갈 수 있을까 말까 한, 경사의 언덕에서 모닥불 크기의 불이 나고 있었다. 그것을 보는 주부들은 발을 동동 구르고 있었다. 브라우저 출력 결과 아파트에는 인적이 없었지만 어떤 아파트의 입구 앞에서 대여섯 명의 주부들이 모여 한 곳을 바라보고 있었다. 나도 고개를 들어 보니, 아파트 바로 맞은편의 언덕에서 불이..

Web 2017.11.29

마우스 커서 변경 방법, 모래시계, 십자가; Mouse Cursor Change

cursor 라는 CSS 속성에 다음의 값을 지정해 주면, HTML 웹페이지의 마우스 커서 모양이, 십자가나 모래 시계 등으로 변경됩니다. all-scroll: 좌, 우측 스크롤이 가능할때 나타나는 커서 (24x24) (FF : move와 커서 동일) auto : 기본값, 브라우저가 마우스 커서 자동 지정 (12x21) col-resize : 테이블의 세로폭을 리사이즈 할때 나타나는 커서 (21x17) crosshair : 십자가 (17x17) default : OS에서 설정한 마우스의 기본 커서 (대부분 화살표) (12x21) hand : 링크나 개체를 이동할때 나타나는 손 모양의 커서 (17x22) (IE 전용) move : 이동용 커서 (19x19) no-drop : 접근 불가나 Drop 불가를 나..

Web 2017.11.10

div 고정폭 + 가변폭

왼쪽은 130px로 고정 오른쪽은 그 나머지를 지정하고자 하고자 할때 CSS3의 calc() 함수를 이용하면 해결이 가능합니다. calc() 함수 사용시 유의사항 -. 모든 계산은 왼쪽에서 오른쪽으로 진행 -. 사칙연산과 마찬가지로 곱하기, 나누기 먼저 계산 -. 호환성을 위해 -moz, -webkit과 같은 vendor-prefix를 먼저 작성 -. calc(100% - 10px)과 같이 더하기(+). 빼기(-) 연산자의 경우 앞뒤 공백 -. 곱하기(x), 나누기(/)는 공백 불필요 지원브라우저 IE 9+ , Firefox 4+(모바일 19+), Chrome 19+(모바일 25+), Safari 6+(모바일 6+), Blackberry 10+ 왼쪽 오른쪽 참고자료 http://fils.tistory.c..

Web 2017.07.03

[모바일] 해상도를 고려한 레이아웃

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요. 국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는 최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다. ※ 국내 출시된 주요 모바일 기기 해상도 1. 스마트폰 계열 iPhone 3GS : 320 x 480 iPhone 4 : 640 x 960 iP..

Web 2017.06.15