'CSS' 태그의 글 목록

width, height >> 100% 에서 마이너스 값으로 설정하기

WEB/CSS / 2014. 4. 10. 19:47

화면을 구성하다보니 width 나 height 를 100%에서 몇 픽셀을 뺀 값으로 설정해야 하는데, 자바스크립트에서 설정하는 것도 좀 부담스럽고 해서 검색을 해봤더니 역시나 있었다!!!

CSS3 에서는 calc 라는 함수가 지원되는데 사용법은 아래와 같다.

/* Firefox */

height: -moz-calc(100% - 18px);

/* WebKit */

height: -webkit-calc(100% - 18px);

/* Opera */

height: -o-calc(100% - 18px);

/* Standard */

height: calc(100% - 18px);

IE 하고 Chrome 에서는 표준 함수가 먹는데, ~~다른 브라우저는 아직 확인 못해봄...~~ (파폭은 calc 함수가 먹는다.)

참고자료: http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels

저작자표시

Posted by 자수씨

, |

[CSS] 화면에 보이는 것과 인쇄하는 화면의 폰트 크기가 다를 경우...

WEB/CSS / 2010. 12. 28. 00:18

HTML 에서 텍스트가 있는 DIV 영역들을 출력하게 될 경우 예상했던 사이즈를 초과하여 인쇄화면이 깨지는 현상을 겪고 있었습니다.

CSS 를 이용하여 문제를 어느정도 해결할 수 있었습니다.

@media screen {
.div_layer { font-size: 10pt; }
}
@media print {
.div_layer { font-size: 9.6pt; }
}

인쇄 시에는 대략 0.96 배로 설정을 하면 얼추 비슷한 결과를 얻을 수 있네요...

역시 인생은 꼼수입니다.

저작자표시

Posted by 자수씨

, |

정규 표현식 놀이 #3 - CSS

JAVA/Regular Expression / 2010. 3. 24. 22:14

HTML 의 style 속성을 가지고 이리저리 만져볼 일이 생겨서 StyleSheet 라는 클래스를 만들어 보았습니다.

package com.idstrust.wiseone.egov.xml.filter.util;

import java.util.Iterator;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class StyleSheet {

private static Pattern stylePattern;

static {
		stylePattern = Pattern.compile("([^ :]+):([^;]+)[;]?");
	}
	
	private Map<String, String> styleMap;

private StyleSheet() {
		super();
	}
	
	public StyleSheet(String style) {
		super();
		this.styleMap = parseStyleSheet(style);
	}
	
	/**
	 * style 속성을 파싱하여 Map 으로 반환합니다.
	 * 
	 * @param style
	 * @return
	 */
	private Map<String, String> parseStyleSheet(String style) {
		Map<String, String> styleMap = new LinkedHashMap<String, String>();
		
		Matcher matcher = stylePattern.matcher(style);
		while (matcher.find()) {
			String name = matcher.group(1);
			String value = removeQuotation(matcher.group(2));
			styleMap.put(name, value);
		}
		
		return styleMap;
	}
	
	/**
	 * style 값의 따옴표를 제거합니다.
	 * 
	 * @param str
	 * @return
	 */
	private String removeQuotation(String str) {
		if (str != null) {
			str = str.replaceAll("\\\"", "");
		}
		
		return str;
	}
	
	/**
	 * StyleSheet 속성을 합칩니다.
	 * 
	 * @param styleSheet
	 */
	public void merge(StyleSheet styleSheet) {
		this.styleMap.putAll(styleSheet.styleMap);
	}
	
	/**
	 * style 속성 값으로 반환합니다.
	 * 
	 */
	public String toString() {
		StringBuffer buffer = new StringBuffer();
		
		for (Iterator<String> iter = this.styleMap.keySet().iterator(); iter.hasNext(); ) {
			String name = iter.next();
			String value = this.styleMap.get(name);
			
			buffer.append(name).append(": ").append(value).append("; ");
		}
		
		return buffer.toString();
	}

/**
	 * style 을 파싱하여 Map 으로 반환합니다.
	 * 
	 * @param style
	 * @return
	 */
	public static StyleSheet parse(String style) {
		StyleSheet styleSheet = new StyleSheet(style);
		return styleSheet;
	}

}

정규식을 이용하여 style 속성을 분리하여 Map 에 담아서 슥삭슥삭 합니다.

[테스트 코드]

[출력 결과]

style-name: 바탕글; margin-left: 0.0pt; margin-right: 0.0pt; margin-top: 0.0pt; margin-bottom: 0.0pt; text-align: justify; text-indent: 0.0pt; line-height: 160%; font-size: 10.0pt; font-family: 굴림; letter-spacing: -1.5pt; font-weight: normal; font-style: normal; color: #000000;

쓰면서 슬슬 고쳐나가야 할 듯 합니다.

저작자표시

Posted by 자수씨

, |

정규 표현식 놀이 #2

JAVA/Regular Expression / 2010. 3. 24. 11:16

아래와 같은 문서가 있습니다.

P.HStyle0, LI.HStyle0, DIV.HStyle0
{style-name:"바탕글"; margin-left:0.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle1, LI.HStyle1, DIV.HStyle1
{style-name:"본문"; margin-left:15.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle2, LI.HStyle2, DIV.HStyle2
{style-name:"개요 1"; margin-left:10.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle3, LI.HStyle3, DIV.HStyle3
{style-name:"개요 2"; margin-left:20.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle4, LI.HStyle4, DIV.HStyle4
{style-name:"개요 3"; margin-left:30.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle5, LI.HStyle5, DIV.HStyle5
{style-name:"개요 4"; margin-left:40.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle6, LI.HStyle6, DIV.HStyle6
{style-name:"개요 5"; margin-left:50.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle7, LI.HStyle7, DIV.HStyle7
{style-name:"개요 6"; margin-left:60.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle8, LI.HStyle8, DIV.HStyle8
{style-name:"개요 7"; margin-left:70.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle9, LI.HStyle9, DIV.HStyle9
{style-name:"쪽 번호"; margin-left:0.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:굴림; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle10, LI.HStyle10, DIV.HStyle10
{style-name:"머리말"; margin-left:0.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:150%; font-size:9.0pt; font-family:굴림; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle11, LI.HStyle11, DIV.HStyle11
{style-name:"각주"; margin-left:13.1pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:-13.1pt; line-height:130%; font-size:9.0pt; font-family:바탕; letter-spacing:0.5pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle12, LI.HStyle12, DIV.HStyle12
{style-name:"미주"; margin-left:13.1pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:-13.1pt; line-height:130%; font-size:9.0pt; font-family:바탕; letter-spacing:0.5pt; font-weight:"normal"; font-style:"normal"; color:#000000;}
P.HStyle13, LI.HStyle13, DIV.HStyle13
{style-name:"메모"; margin-left:0.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:9.0pt; font-family:굴림; letter-spacing:0.5pt; font-weight:"normal"; font-style:"normal"; color:#000000;}

여기에서 P 스타일의 이름과 속성들을 개별적으로 뽑으려면 어떻게 할까요?

P.HStyle0, LI.HStyle0, DIV.HStyle0
{style-name:"바탕글"; margin-left:0.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:"normal"; color:#000000;}

예를 들면, 위의 내용으로 아래의 데이터를 뽑아내는 것 입니다.

{ styleName: "HStyle0", style: "style-name:\"바탕글\"; margin-left:0.0pt; margin-right:0.0pt; margin-top:0.0pt; margin-bottom:0.0pt; text-align:justify; text-indent:0.0pt; line-height:160%; font-size:10.0pt; font-family:바탕; letter-spacing:0.0pt; font-weight:"normal"; font-style:\"normal\"; color:#000000;" }

정규식만 잘 이용하면 CSS 파서 만드는 것도 어렵지 않을 것 같네요~
그 잘 이용하는게 어려울 뿐이죠...

저작자표시

Posted by 자수씨

, |

[Eclipse Plug-in] CSS Sprites Plug-in update...

Eclipse/Plug-ins / 2008. 11. 14. 18:33

CSS 로 큰 이미지를 쪼각내주는 CSS Sprites 가 간만에 업데이트 하였습니다.

[업데이트 내역]
ㅁ CSS Sprites Viewer 제공
- 해당 css 에 어떤 이미지 아이콘을 사용할 수 있는지 확인해주는 Viewer

딸랑 한개 바꿨습니다. ㅋㅋㅋㅋ

Posted by 자수씨

, |

CSS Sprites 활용 ~

WEB/CSS / 2008. 3. 18. 17:42

파이어준 아저씨 블로그를 둘러보다가 찾은 CSS Sprites...

하지만 합쳐진 png 파일을 만들려고 했는데 라이센스 때문에 포토샵 CS3 는 깔면 안되는 상황이라...

GWT 의 ImageBundleBuilder 를 베껴서 해당 폴더의 이미지를 하나의 png 파일로 만들어주고

style sheet 에 들어갈 내용도 만들어 주는 것을 만들긴 했는데;;;;;;

그냥 급하게 쓸려고 만든거라 하하핫;;;;