본문 바로가기

Programming/HTML/CSS37

[이미지맵] 이미지맵 이용해서 쉽게 링크걸기 ​링크는 이렇게걸수도있고이미지맵으로 걸 수도 있습니다. 이미지맵 1. 이미지 준비 (더보기 부분을 클릭하면 naver 로 가게 만들어보겠습니다.) 2. 먼저 이미지를 넣어줍니다. 3.이미지맵을 넣습니다. ​ 링크모양 : rect 네모 / circle 동그라미 / poly 다각형target : _blank 새창 / _self 자기자신 창에서 링크로 변환 / _top / _parent 4.coords 구하는법그림판으로 이미지를 불러온 후 링크될 곳의 시작부분과 끝부분의 좌표를 마우스를 이동해서 알아냅니다.(왼쪽 밑에좌표가나타납니다.)1번좌표를 먼저 입력하고 그 다음에 2번좌표를 입력합니다. 5. 고럼 요렇게 완료! [출처] [이미지맵] 이미지맵 이용해서 쉽게 링크걸기|작성자 lovelyh [출처] [이미지맵.. 2014. 10. 23.
text-overflow - 긴 문장 줄여주는 CSS 스타일링 예전엔 프로그램단에서 str_cut() 등의 함수를 만들어 긴 제목등의 문장을 줄인 뒤에 "..."를 붙여 구현했던 기능. 현재는 CSS의 text-overflow 속성으로 처리를 합니다. - 지원 브라우저 IE6~9를 필두로 거의 모든 브라우저가 이 속성을 지원합니다. (파이어폭스는 7 버전 이후부터 지원) - Syntax (구문) text-overflow: clip; text-overflow: ellipsis; text-overflow: string; clip 은 잘라내고, ellipsis 는 문자열 뒤에 "..."를 붙여줍니다. string 은 text-overflow:"..."; 형식으로 커스텀 대체문자를 붙여줍니다. B.U.T 3가지 속성값이 존재하지만 string 값 지정 (ex "...")과.. 2014. 9. 1.
HTML STYLE CSS 인쇄시 페이지 기본 여백 설정하기. 이전 포스트에서 크롬과 익스플로러에서 각각 인쇄 미리보기 페이지가 팝업 되게 하는 자바스크립트 소스를 봤었습니다. 각각 띄워놓고 보니 여백이 달라서 다른 페이지 처럼 보입니다. 인쇄가 될때 문서의 기본 여백을 설정해 줘야 겠습니다. 간단 하네요. 인쇄하고자 하는 페이지에서 아래와 같이 style 태그를 추가해 줍니다. 1 2 @page{ size:auto; margin : 15mm; }3크롬 인쇄 미리보기에서 여백이 '기본값' 일때 저 값이 적용 되네요. 익스플로러에서 여백이 제대로 들어가나 확인해보니 19mm가 되있더군요. 적용이 안되나 싶어서 여백 설정 창에서 확인을 눌러보니 문서 내 여백이 커집니다. 이미 15mm로 적용이 되어 있었던 겁니다. 여백값은 margin 값을 변경해 주면 됩니다. 꿀같은.. 2014. 4. 3.
테이블 틀 고정 고정셀1 고정셀2 고정셀3 고정셀4 2014. 3. 5.