본문 바로가기

CSS13

text-overflow 이용한 텍스트 길이 제한하기 게시판 리스트의 경우 제목이 길어지는 경우 특정 길이 이상은 자르고 "..." 붙이는거 많이 보셨을겁니다. 보통 php의 경우 substr() 함수를 이용하거나 left() 함수등 언어에 따라 다양하게 활용하는데 style로 간단하게 적용할 수 있습니다. text-overflow 옵션을 활용하는 것입니다. ellipsis 내용 ellipsis-word 내용 clip 내용 inherit 내용 링크에적용1 내용 링크에적용2 내용 테이블에 적용 내용 ------------------------------------------------------------------------------------ #example1 {text-overflow-mode: clip; width: 200px; overflow:hi.. 2009. 10. 31.
[style] 세이박스 메인 탑메뉴 처럼 메뉴 텍스트(text)에 그림자 효과 주기 텍스트 메뉴에 그림자 스타일 효과 주기 filter:shadow() 를 이용하면 됩니다. 예) 흰색 메뉴 글자에 검정색 그림자 1px 효과 입니다. 메뉴1 위 예제의 shadow 옵션 설명 color : 그림자 색상 direction : 그림자 각도 strength : 그림자 길이 세이박스 메인 탑메뉴에 그림자 효과를 주기위해 옵션을 여기 저기 찾아 보니 원하는 효과가 없었습니다. 1픽셀만큰 그림자 효과를 주고 싶었는데 알고보니 세이박스 게시글에 strength 옵션에 대해 제가 과거에 올려 놨었더군요. http://www.saybox.co.kr/bbs/board.php?bo_table=board06&wr_id=21 먼곳에서 찾는다고 고생했다는 ㅋㅋ ^^; [출처] 세이박스 - http://www.say.. 2009. 10. 21.
IE 8.0에서 iframe 스크롤 생기는 문제 body style로 스크롤바 없애기 iframe으로 광고 페이지를 삽입할 때 스크롤바 없애기 IE 8.0 에서는 위처럼 하더라도 iframe src 페이지 내용이 100*200을 넘어 버리면 스크롤이 생겨버립니다. 해결 방법은 src 페이지의 body style을 변경 해야합니다. [옵션 설명] - hidden : 스크롤 없애기 - auto : 내용이 지정된 사이즈 이상일때 자동으로 스크롤 생성 - visible : 사이즈에 관계 없이 내용 모두 보여준다 - scroll : 시작부터 스크롤바 생김 위 글은 세이박스(http://www.saybox.co.kr) 에서 작성한 글입니다. 퍼가실땐 출처를 남겨 주세요! 2009. 9. 25.
CSS 이미지 테두리를 액자처럼 라인 넣어 주기 이미지만 출력시 다소 허전한 느낌을 줄때 테두리에 연한 회색으로 그려 주면 다소 깔끔하게 보입니다. 스타일 적용은 다음과 같습니다. 위처럼 Div 로 이미지 소스를 감싸 주시면 되며 width : 이미지의 폭 픽셀 값을 넣어 주시구요 height : 이미지의 높이 픽셀 값을 넣어 주세요 border : 라인 두께 인데 적절히 조절해서 이용하세요 solid #color : color 값은 이미지에 어울리는 색으로 넣어 주시면 됩니다. padding : 이미지와 라인 사이 공백으로써 적절히 띄워주시면 깔끔하게 보입니다. 큰 이미지 일수록 많이 띄워야 겠죠..^^ [출처] 유포유 - http://www.uforu.net/bbs/board.php?bo_table=css&wr_id=13 2009. 5. 4.