티스토리 뷰

728x90
반응형
웹표준에 맞게 문서와 표현을 분리하여 작업을 하게 되면

내가 스타일 정의를 하지 않은 엘리먼트는 없는지 내가 작성한 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가 어떻게 보이는지 한눈에 볼수 있습니다.
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/04   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함