개발도 개발 영역에 따라 쪼개면 쪼갤 수록 관리하기 쉽다고 얘기를 하듯 디자인도 분업을 할 수록 훨씬 보기 좋다.
(하지만 나는 좀 다양하게 해보고 싶을 뿐) 어쨌거나
웹표준의 준수했다고 할 만한 것은 구조(structure)와 표현(Experience) 동작(Behavior)으로 나뉘어야 된다고 한다.
div와 CSS로 구조와 표현을 나누었다면 표현 격인 CSS도 스케일이 클 수록 분리 시키는 것이 권장된다.
(1) CSS도 분업화할 수 있도록 만들어라 (큰 스케일 일때)
(html/body/table/div등의)
common.css - 공통 스타일
(a:linked/a:hover/a:actived 등의)
layout.css - 특정 레이아웃의 태그를 정의한다
(특정 div내의 class나 id등의)
이러한 파일 나눔은 제작자에 따라 다른 듯 하므로 꼭 분업화 하란 말은 아니다.
초보 입장에서는 하기 힘들기 때문에 일단 한 CSS파일에 주석처리로만 분류를 하는 것이 좋을 것 같다.
(2) 기본적으로 설정하는 선택자들
홈페이지에 골격을 만들기 위한 기본적인 선택자들은 다음과 같다.
.wrap
body
head - h1.h2.h3.h4.h5.h6
a:link a:visited a:hover a:actived
어디까지나 소스보기 것들을 기준으로 정리한 것이기 때문에 절대적으로 생각하지 마시길
4~5개의 스타일시트를 둘러보니 공통적으로 위의 선택자 및 id를 생성, 작성했다.
위의 선택자들은 기본적인 스타일이고 골격이기 때문에 전체적으로 통일을 할 수 있는 속성을 안에 작성한다.
html,body
{
margin : 0;
padding : 0;
font-family : "폰트명", san-serif(혹은 그냥 serif);
font-size : 12px;
background : #fff; 혹은 url('이미지.jpg') top left repeat-x;
color : #000;
position: relative; 혹은 absolute;
border : 0;
}
(3) h1 h2 h3 h4 h5 h6
h1부터 h6까지 쓰는 태그가 있다. 이것은 대제목 부터 소제목까지 글을 쓸 때 구분하기 위해서 쓰는 태그인데
주로 폰트, 텍스트에 관련 된 속성들을 추가한다.
h1{
font-family: "Georgia", Times, Serif;
font-weight: normal;
font-size: 19px;
font-style:italic;
color: #171717;
margin: 0 0 10px 0;
padding: 0;
}
제목에 링크가 되어있다면 링크에 대한 스타일도 같이 설정할 수 있다 이렇게
h2, h2 a:link, h2 a:visited, h2 a:hover{
font-family: "Georgia", Times, Serif;
font-weight: normal;
font-size: 19px;
font-style:italic;
color: #171717;
margin: 0 0 10px 0;
padding: 0;
}
(4) 아스테리스크? *?
모든 속성에 적용할 수 있는 아스테리스크(*)를 선택자로 해서 속성을 주는 방법이 있단다.
예를 들어
margin:0;
padding;0;
}
맨 위에 작성하는 스타일 시트를 간혹 본 적이 있다. 변동할 것이 없을만 한 속성들을 해 두면 좋을 듯 하다