나를 찾는 아이 ::

HTML과 XHTML에서 내가 작성한 CSS가 잘 적용되었는지 테스트해보기

분류없음 2008/09/02 16:44

웹표준에 맞게 문서와 표현을 분리하여 작업을 하게 되면

내가 스타일 정의를 하지 않은 엘리먼트는 없는지 내가 작성한 CSS 파일을 테스트 해볼 필요가 있습니다.

특히나 이 작업은 블로그 콘텐츠에서 더욱 두드러집니다.

블로그 콘텐츠에서 ul, ol 엘리먼트는 어떻게 나타나는지, q, quote 는 어떻게 나타나는지, 여러 다른 엘리먼트들은

내 블로그에서 어떻게 보일지 테스트가 필요하죠.

티스토리 글쓰기 에디터 역시 에디터에서 보는것과 실제 블로그 콘텐츠로 보이는 것이 다릅니다.

글쓰기 에디터에서 ul 엘리먼트를 사용하여 마크업을 하면

기본 모양의 불릿이 나타나지만 실제로 블로그에 포스팅이 보일때는

블로그에 정의된 ul 스타일로 보여집니다.

이렇듯 콘텐츠에 대한 모든 엘리먼트들에 대한 CSS 적용 테스트를 할때

이 방법을 쓰면 아주 유용합니다.

http://www.sitefromscratch.com/content/html-xhtml-css-testing

이곳에 방문하시면 다운로드를 통해 HTML파일을 다운로드 받으실수 있습니다.

파일을 다운받으셔서 HTML파일을 열어보시면

H1 엘리먼트부터 시작해서 table까지 모든 엘리먼트가 사용된 콘텐츠 페이지를 보실수 있습니다.

여기에 자신이 작성한 CSS파일을 적용하면 됩니다.

<head></head>에 다음과 같이 파일을 임베딩합니다.

<link style="text/css" rel="stylesheet" href="내 css 파일이 위치한 경로" />

이렇게 하면 내가 작성한 CSS가 어떻게 보이는지 한눈에 볼수 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 나를찾는아이

CSS, HTML, style, stylesheet, View, 스타일시트

Trackback 0 Comment 2

Trackback : http://trend21c.tistory.com/trackback/394

신현석 2008/09/02 17:47
아, 이거 아주 좋은데요~
- 나를찾는아이 2008/09/02 18:24
  이런거 만들기 귀찮았는데 딱이죠? ㅎㅎ

eric meyer의 reset stylesheet

분류없음 2008/01/27 23:19

웹퍼블리싱을 하시는 분들이라면 자신이 만들어 놓은 reset stylesheet는 모두들 가지고 계실겁니다.

그것을 기본으로해서 프로젝트 마다 적절하게 커스터마이징해서 사용하고들계시죠?

reset stylesheet란?
브라우저마다 해당 브라우저가 특정 엘리먼트를 브라우저를 통해서 보여지는것에 차이가 조금씩 있습니다. padding이나 margin값이 틀리기도 하고, text-style이 다르기도 합니다. 그렇기 때문에 좀더 편하게 크로스브라우징을 고려하여 웹퍼블리싱을 하기위해서는 가급적 많은 브라우저에서 비교적 동일한 VIEW를 나타낼수 있게끔 reset stylesheet를 작성하여, 엘리먼트들의 기본 표현속성값을 일치시키는 것을 말합니다.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

자세한 내용보러가기

이 reset stylesheet는 web statandard를 위해 왕성히 활동하고 계시는 eric meyer가 제시하는 것입니다.

eric meyer의 이런 포스팅이 올라올때마다 이에 대해 갑론을박하는 많은 코멘트들이 따르는 것을 보아도 알수 있듯이

reset stylesheet에 정답은 당연히 없다고 생각합니다.

웹퍼블리셔마다 자신이 프로젝트를 수행하면서 몸에 베인 자신의 마크업스타일, CSS작성 스타일에 따라 얼마든지

달라 질 수 있는 부분입니다.(물론 사내 CSS가이드 라인이 있는 회사도 있죠.)

eric meyer의 reset style에 대해 제 개인적인 경험에 비추어 말씀드리자면

제가 프로젝트를 하면서 다른분들의 reset style을 볼때

* 선택자에 line-height에 절대값(18px, 16px 등등) 을 적용하고
img 엘리먼트에 vertical-align:middle을 적용하시는 분들을 많이 보았습니다.

하지만 이런경우에는 이미지의 세로크기가 line-height보다 큰경우에 이미지가 완전히 보이지 않습니다.

그렇기 때문에 vertical-align 값을 다시 조정하거나 line-height의 수치를 조절해야 정상적으로 보이게 됩니다.

또한 글자크기가 line-height크기를 초과했을때 글자 역시 하단부분이 잘리는 현상이 나타납니다.

그래서 저는 vertical-align:middle이라는 universal한 속성을 사용하지 않고 vertical-align:baseline을 이용하고,
line-height에는 상대크기값을 (대게 1또는 그 이상의 값 1.2, 1.4)을 디자인가이드라인에 맞춰서 사용하는 편입니다. 이렇게 하면 해당 엘리먼트에 수치를 곱한 값이 line-height가 되어 글자 하단 잘림현상이 나타나지 않습니다.

야후 reset 관련 자료 : http://developer.yahoo.com/yui/reset/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 나를찾는아이

crossbrowsing, CSS, reset style, stylesheet, 크로스브라우징

Trackback 0 Comment 0

Trackback : http://trend21c.tistory.com/trackback/323

내가 사용하고 있는 브라우저에서 사용가능한 CSS 선택자가 무엇인지 확인하기

분류없음 2008/01/02 20:08

브라우저 춘추전국시대라고 해도 어색하지 않을 만큼

요즘에는 많은 브라우저들이 우리의 웹서핑을 더욱 편리하고 즐겁게 해주고 있습니다.

하지만 여러브라우저에서 쾌적한 웹서핑을 하기위해서는 해당 웹사이트가

특정 웹브라우저에 종속적인 기술을 사용하여 제작된 것이 아니어야만 합니다.

이런때일수록 웹표준을 지키면서 웹서비스를 만드는게 더더욱 중요하지 않은가 싶습니다.

또한 문서와 표현의 분리로 표현을 담당하는 CSS의 역할도 커졌습니다.

CSS는 상속이라는 본연의 기능뿐만아니라 다양한 선택자의 활용이 가능하여

아주 손쉽게 웹사이트의 표현을 만들어낼수 있습니다.

하지만 이 선택자가 어떤 브라우저에서는 사용이 가능하고

어떤 브라우저에서는 아직 지원하지 않아서 브라우저마다 체크를 해줘야 하는 번거로운점이 있죠.

앞으로 좀더 진화된 브라우저가 나타남에 따라

점점 더 많은(특히 CSS3 스펙에서는 선택자의 수가 아주 많이 늘어났습니다) 다양한 선택자를

활용하여 좀더 쉽게

웹사이트의 표현을 나타낼수 있을것입니다.

오늘 소개해 드릴 사이트는

내가 현재 사용하고 있는 브라우저가 어떤 CSS 선택자를 지원하는지 확인해주는 서비스 입니다.

http://www.css3.info/

웹사이트에 접속하여 CSS Selector Test 메뉴를 선택합니다.

그후 Start the CSS Selectors test를 클릭하시면

브라우저가 뭔가 계속 작업을 하는듯한 느낌이 들면서

페이지에 아래와 같은 화면이 차례대로 로딩되어 나타납니다.

보시면 알수 있다시피

CSS선택자를 해당 브라우저가 지원하는지 시각적으로 나타내주고 있습니다.

느낌으로도 알수 있듯이 초록색은 모두 지원하는 것이고

주황색은 일부분만 지원한다는 것이고

빨간색은 모두 지원하지 않는 다는 뜻입니다.

해당 선택자를 클릭하시면 선택자를 어떻게 사용했을때 지원이 안되는지

상세한 예제와 함께 보여줍니다.

몇몇 메이저급 벤더의 브라우저들은 이미 CSS 셀렉터 지원여부가

잘 정리된 표가 있기도 하지만

그렇지 않은 마이너한 브라우저의 CSS 선택자 지원여부를 확인하는데 아주 좋습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 나를찾는아이

CSS, selector, stylesheet, 선택자

Trackback 0 Comment 2

Trackback : http://trend21c.tistory.com/trackback/320

polarnara 2008/01/02 21:19
좋은 사이트 소개 감사합니다 :-) IE7 은 아직 여기저기 피투성이네요;;
- 나를찾는아이 2008/01/18 00:08
  그래도 IE6에 비하면 양반이죠. ㅎㅎ

인라인 스타일시트(inline stylesheet)는 무조건 사용하지 말아야 한다??

분류없음 2007/11/29 10:49

CSS를 선언하는 3가지 방법은 다음과 같다

1. external stylesheet

<link href="global.css" rel="stylesheet" type="text/css">

2. embedded stylesheet

<style type="text/css">
</style>

3. inline stylesheet

<p style=""></p>

흔히 CSS를 처음 배우게 되면 접하는 내용이다.

CSS를 사용하여 문서와 표현을 분리하는 것이 아주 좋다고 모든 웹표준 자료에서 말하고 있다.

물론 당연한것이고 모든 면에서 이점이 많다.

하지만 웹표준을 이제 막 시작하려는 사람들의 대다수의 특징이

무조건 CSS와 HTML을 어떻게 해서든 분리시키려고 하는 것이다.

마치 인라인으로 CSS를 지정하면 안된다고 누가 말한듯이 말이다.

하지만 무조건 external stylesheet 또는 embedded stylesheet가 좋은 것은 아니다.

때로는 인라인 엘리먼트를 써야할때도 있는 법이다.

나는 그런 경우를 2가지로 정하고 이 원칙에 입각해 CSS를 외부에 넣을지 인라인으로 넣을지 정한다.

1. 네이밍하기 어려운 콘텐츠

클래스명을 분명히 네이밍 하긴 해야하는데

도대체 뭐라고 네이밍 해야할지 금방 기억이 나지 않는 경우.

이렇듯 네이밍 하기 어려운 콘텐츠는 분명히 1회성 콘텐츠가 대부분이다.

네이밍이 단번에 떠오르는 콘텐츠는 그만큼 기획 또는 해당 서비스의 프로세스에서

그 중요도가 있고 빈번하게 나타나는 콘텐츠다.

물론 네이밍 하기 어렵다는 것은 그만큼 크게 중요하지 않은 컨텐츠일 확률도 크다.

이런것까지 모두 클래스 지정해서 CSS 입히려고 하면

재사용될 가능성 0%의 클래스가 계속해서 생성되어져 CSS 파일을 비대화만 가져온다.

물론 작업한 본인도 그 만큼 어렵게 네이밍해서 작업한 CSS class를 시간이 흐른뒤에 기억을 못한다.

2. 빈번하게 바뀌는 콘텐츠

예를 들어 색상이 매번 바뀌거나 background image가 너무 빈번하게 바뀌는 콘텐츠의 경우

사용자 PC에 이전 CSS가 캐쉬되어서 이전 디자인이 계속해서 보여질 우려가 있기때문에

너무 자주바뀌는 콘텐츠의 경우에도 inline stylesheet 사용하는 것이 좋다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 나를찾는아이

CSS, stylesheet

Trackback 0 Comment 0

Trackback : http://trend21c.tistory.com/trackback/298

모든 디자이너가 해야할 9가지 CSS 원칙

분류없음 2007/11/27 00:35

모든 디자이너가 해야할 9가지 CSS 원칙 이라는 나름 재미있는 포스팅이 올라와 번역하여 소개한다.

이미 웹개발 UI가이드는 국내에도 많이 소개되어있고

웹표준 강의시에도 항상 나오는 이야기이다.

또한 네이버UI가이드(http://html.nhndesign.com/)가 공개됨으로써

많은 분들이 이곳을 참고하고 있기도하다.

네이버 UI가이드 역시 100% 완벽하지 않다.

갑론을박해야할 요소도 있긴 하지만

이정도 분량의 꼼꼼한 가이드을 공개한것 역시 네이버가 한일중에서는 정말 칭찬할 만한 일이라고

생각한다.

1. 하위선택자 사용에 따른 들여쓰기

필자의 견해 :
하위선택자를 사용했을때 이에 맞춰 들여쓰기를 하면 훨씬 코드 보기가 수월해진다.
이미 대다수의 홈페이지에서 이렇게 사용하고 있는 것같다.

2. 그룹화와 CSS의 주석

필자의 견해 :
의미있는 CSS끼리 그룹화 시키고 보기 쉽게 주석처리
물론 모든 네이밍작업이 그렇지만 CSS 네이밍도 사람들마다 조금씩 다르다
어떤이는 영어를 그냥 발음나는대로 영어로 옮기는 사람이 있는 반면에
영단어를찾아서 쓰는 사람이 있고
아니면 영어동사까지 포함해서 쓰는 사람도 있고
영문네이밍은 정말 사람마다 다양하다 이때 주석으로 이 부분이 어디에 해당하는 부분임을 명시하면
좀더 보기 수월한 코드가 된다.

3. 스타일 선언은 한줄에

필자의 견해 :
물론 CSS 코드가 길어지면
한줄에 하나의 속성만 지정하는 방식은 괜한 공백을 많이 잡아먹어서
용량이 커지기 때문에 불필요하지만
확실히 한줄에 하나의 속성만 적어놓는것이 가독성이 좋을때가 많다
때에 따라 둘을 적절히 사용하는 센스가 필요하겠다.

4. css 파일의 분리

필자의 견해 :
이곳의 예제에서는 layout.css, typography.css 등으로 css 파일을 분류하였는데
물론 이런식으로 분류도 있겠지만
나는 메뉴섹션별로(우리나라의 웹사이트는 대게 섹션별로 공통되는 디자인이 많다)
CSS파일을 구분하여 사용한다

5. 엘리먼트 초기화

필자의 견해 :
브라우저마다 엘리먼트의 default style일 틀리므로 반드시 초기화 할것.

6. 사용되는 색상코드를 한곳에 모아 적어 둔다

필자의 견해 :
확실히 도움되는 정보다
해당 웹사이트에서 주로 사용되는 폰트명과 폰트사이즈 컬러셋을 모아놓고 이를 미리 정의해두면
색상 가이드라인이 확실해질수 있겠다

실제로 프로젝트 경험에 의해 특정 콘텐츠마다 각각의 색상과 폰트와 line-height, 마진을 가진 경우를 보았다.
예를 들면 A에 관한 콘텐츠는 어떤 폰트와 어떤 색상을 사용하며 하단에 마진값 얼마를 반드시 가져야 한다. 이런종류.
이럴때 해당 프로젝트에 처음 투입되는 사람은 그러한 규칙이

이미 있는지 인수인계를 못받았을 확률도 많다.
이때 이러한 규칙에 대해서 짤막하게(길게 주석으로 남긴다는 것은 절대 하지 말아야할것. 길게 주석을 적어 넣을바에야 차라리 ppt또는 문서 파일로 UI 가이드라인을 만드는게 낫다.) 적어 놓으면 갑작스럽게 관계자가 아닌사람이 UI를 수정한다거나 할때 좋은점도 있는 것 같다.

7. 의미있는 네이밍

필자의 견해 :
가장 중요하다
네이밍기법에 항상 언급되는 내용이지만
green 이라던지 left, right 등의 네이밍보다는
header, menu, nav, footer등의 의미있는 네이밍이 좋다.

8. 알파벳순서의 프로퍼티정의

필자의 견해 :
사실 나는 이부분은 찬성하지 않는다
자주쓰이는 속성 순서대로, 레이아웃에 영향을 많이 주는 순서대로 나열하는 것이
경험상 코드가독성에 아주 좋다.
알파벳순으로 나열하게 되면 정작 중요한 width같은 속성은 거의 맨뒤에 위치하게 되는데
이것보다는 중요한 순서대로 프로퍼티를 나열하는게 경험상 좋은것 같다.
필자는 display,position,float,width,height,padding,margin,border,background 순으로 사용한다
물론 이부분 역시 네이버UI가이드에서 사용빈도에 따른 프로퍼티 나열이 언급되어있다.

9. 유용한 css 클래스 유지

필자의 견해 :
유용한 css 클래스를 미리 정의하는 것은 아주 좋은 행위지만
이곳 예제에서는 width100이라던지 alignRight라던지
7번에서 언급한 의미있는 네이밍이 되어 있지 않다

필자는 clear라는 css클래스를 global css에 선언하는데
IE에서 clear:both시에 상단에 마진이 생기는 현상을 제거하기 위해

.clear {clear:both;height:0;line-height:0;font-size:0;}

이렇게 사용하고 있다.

현석님의 트랙백을 보고나니 내가 이 9번 문항에 대해서 잘못 코멘트한것 같다.
원본에서의 유용한 CSS의 클래스의 의미가 단순히 표현을 위한 width100, width75 이런 클래스가 유용한 클래스라고 말한것이라면 정말 절대 삼가해야할 것이다. 현석님 말대로 .mt10 {margin-top:10px;} 이런 클래스는 정말 삼가해야할 일이다. 이걸 클래스로 지정해서 사용하느니 인라인 스타일시트로 적용하는게 훨씬 나은 방법이다.
저는 유용한 클래스의 의미를 좀더 넓은 범위의 유용한 클래스(의미있는 네이밍이 되어있는 특정 콘텐츠 형식에 대한 클래스화)라고 잘못 해석하고 이해한것 같아서 추가 코멘트 남깁니다.

모두 아주 좋은 내용이다.

계속해서 HTML과 CSS를 사용하여 표현과 문서를 분리하는 곳이 많아졌다.

이런 중요한 개발방법론은 계속해서 공유되어져

새로 웹퍼블리셔가 되고싶은 사람들에게 많은 도움이 되었으면 좋겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 나를찾는아이

CSS, stylesheet, UI

Trackback 1 Comment 1

Trackback : http://trend21c.tistory.com/trackback/294

Subject "모든 디자이너가 해야할 9가지 CSS 원칙"에 대한 의견
Tracked from Blog of Hyeonseok 2007/11/28 11:29
"모든 디자이너가 해야할 9가지 CSS 원칙"에 대한 제 생각입니다. 전체적으로 동의할 수 없는 내용들이 많습니다. 1. 하위선택자 사용에 따른 들여쓰기 CSS의 캐스케이드를 제대로 반영하지 ...

hitchweb 2007/11/27 10:23
대부분의 항목이 css에만 적용되는 내용이 아니라 이외의 프로그래밍 코딩에도 적용되어야 할 내용 아닌가 싶네요... ^^
의미있는 네이밍, 가독성을 위한 텝처리, 초기화, 그룹화... 등등이... ^^

inline style이 아닌 다른방법으로 지정된 엘리먼트의 CSS 알아내기

분류없음 2007/11/09 10:36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>inline style이 아닌 다른 방법으로 엘리먼트에 적용된 style 알아내기</title>
<style type="text/css">
#tar {
    width:350px;
    height:50px;
    padding:50px 20px 10px 30px;
    margin:0px 5px 10px 15px;
    background:red;
}
</style>
<script type="text/javascript">
function getStyle(element, style){
    if(element.currentStyle) return element.currentStyle.getAttribute(style); // IE
    else{
        var css = document.defaultView.getComputedStyle(element, null);
        return css.getPropertyValue(style);
    }
}
</script>
</head>
<body>

<div id="tar">값을 알고자 하는 엘리먼트<br />
#tar {<br />
    width:70px;<br />
    height:50px;<br />
    padding:50px 20px 10px 30px;<br />
    margin:0px 5px 10px 15px;<br />
    background:red;<br />
}
</div>

<ul>
    <li><a href="#tar" onclick="alert(getStyle(document.getElementById('tar'), 'display'));return false;">특별한 값이 지정되어있지 않은 display</a></li>
    <li><a href="#tar" onclick="alert(getStyle(document.getElementById('tar'), 'padding'));return false;">여러개의 값이 들어있는 padding</a></li>
    <li><a href="#tar" onclick="alert(getStyle(document.getElementById('tar'), 'backgroundColor'));return false;">background-color만 지정된 background</a></li>
    <li><a href="#tar" onclick="alert(getStyle(document.getElementById('tar'), 'width'));return false;">값이 정해져있는 width</a></li>
</ul>

</body>
</html>

function getStyle(element, style){
    if(element.currentStyle) return element.currentStyle.getAttribute(style); // IE
    else{
        var css = document.defaultView.getComputedStyle(element, null);
        return css.getPropertyValue(style);
    }
}

함수는 첫번재 인자로 엘리먼트, 두번재 인자로 알고자하는 CSS 속성명입니다.

IE는 currentStyle로 판별할수 있고 그외의 브라우저는 표준인 getComputedStyle로 알아낼수 있습니다.

하지만 사용하기 좀 난감한 것은 위의 예제를 여러브라우저에서 실행보시면 알수 있듯이 브라우저마다 리턴값이 틀린 경우가 많습니다.

속편하게 인라인으로........고고싱.

관련레퍼런스 :

http://developer.mozilla.org/en/docs/DOM:window.getComputedStyle
http://msdn2.microsoft.com/en-us/library/ms535231.aspx

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.