[강좌] XHTML과 CSS - 6

분류없음 2009.09.20 10:17

아, 기다리고 기다리던 대망의 여섯 번째 시간입니다. 이 글은 2009년 9월 13일 일요일 새벽에 작성을 시작했습니다. 이미지 분량이 상당히 많기 때문에, 업로드 하는 것만해도 큰 일이 될 듯 합니다만, 일단 한 번 시작해 보도록 하겠습니다.

지난 글에서 살짝 공지해 드렸다시피, 저는 애지 중지 잘 사용중이던 노트북을 망가뜨리고야 말았습니다. 그게 벌써 3주전이군요. 어쨌거나 집에와서 간단한 오피스 문서 작업이나, 메일 확인은 꼭 해야했기에 꽤 오래된 사양의 컴퓨터를 하나 업어와서 리눅스를 설치해서 쓰고 있습니다. 그래서 이전 글들과는 조금 그림이 다를 수 있습니다. 게다가 지금 화면 해상도는 1024x768이기 때문에, 그림들이 다들 좀 짧아도 이해해 주시길... (저, 이 소스 새로 타이핑 했단 말예요 엉엉. 아 그런데 리눅스에 기본으로 들어가있는 편집기는 정말 좋군요! 아래 스샷들은 기본 텍스트 편집기임)

우리는 지난 시간까지, 간단한 블로그 페이지의 모양새를 살펴보았고 이를 편집기를 통해 코딩하는 것까지 진행해보았습니다. 그리고 간단히 레이아웃만 잡아서, 아래 위로만 나열되던 글들이 어떻게 자리를 잡아가는 지 그 과정을 지켜보았습니다. 그렇게 작성된 것이 아래의 코드라는 (너무 길어서 footer가 짤렸습니다;) 것이죠


좀 정성스럽게 코드부분만 잘라서 넣었으면 좋았을 것을... 하는 생각도 듭니다. 아무튼 이렇게 레이아웃만 잡아서 확인할 수 있던 HTML페이지의 모양새는 아래와 같았습니다. (오페라는 너무 무거워서 그냥 크롬으로 확인했습니다.)


이제, 레이아웃은 다 잡아 놓았으니 CSS를 통해 모양새를 조금 정리해보도록 하겠습니다.

먼저 헤더 부분입니다. 위쪽으로 여백을 좀 주고 모양을 정리하기 위해 아래와 같은 코드를 css 파일에 추가합니다.


위쪽으로 여백을 좀 준다음, 테두리를 굵게 그려서 박스가 덧 그려지는 효과를 연출합니다. 제목 아래 description은 역시 여백을 많이 주어 들여쓴 것처럼 보이게 합니다. 이 결과는 아래에서 확인하세요


이번에는 왼쪽 네비게이션 영역입니다. 왼쪽 간격을 띄우고, 리스트 아이템들의 불릿 표시를 없애겠습니다.


그런 다음 각각 아래 위로 공간을 두겠습니다. 위에서도 알 수 있듯이 ul li라고만 정의하면 ul의 밑에 있는 li가 모두 포함이 되기 때문에 1차 리스트와 2차 리스트가 같이 적용을 받습니다. 간격이 동일하게 커져버리니, 아래쪽에 다시 2차 리스트 (ul > li > ul > li)에 대해서는 위쪽 공백을 없애서 그룹들간의 간격만 남겨둡니다..


이 후에 각 그룹의 제목에 해당하는 녀석들은 위의 헤더와 마찬가지로 약간의 효과 추가.


이제, 문서는 이런 모양이 됩니다. (물론 여러분들은 제가 안 시켜도 하나 하나 추가하면서 모양들을 확인해 보고, 또 값이나 속성들을 바꿔보면서 계속 확인하고 있으실거라 믿어 의심치 않습니다.)


자, 이번에는 드디어 본문입니다. 왼쪽 여백을 살짝 띄우고, 각 문단의 상단에 여백을 주어, 한 편의 포스팅마다 여백으로 구분이 되도록 해보겠습니다. 그리고 한 페이지에 포스팅은 여러 개가 등장하기 때문에 이번에는 아이디(#)가 아닌 클래스(.)로 정의 하는 점도 눈여겨 볼 대목입니다.


그런데, 이렇게 해 두면 브라우저에서 확인해보면 첫 번째 포스팅도 여백이 붕 떠버립니다. 좀 보기가 이상하죠. 그래서 맨 첫 문단만 여백을 줄이겠습니다. 이는 유사 선택자라고 하는 부분인데요, 마치 링크에서 a:hover 라고 하면 마우스 오버가 되었을 때만 적용되는 스타일이 되는 것처럼 (*CSS2에서는 거의 모든 객체에 대해 :hover 스타일의 지정이 허용됩니다. IE6만 안됩니다;;;) 특정한 속성을 가진 녀석들만 따로 지정할 수가 있습니다. 괜히 본문의 마크업에 따로 class="first" 등과 같은 속성을 넣는 뻘 짓거리가 더 이상 필요 없다는 말이지요.


이제 아래쪽 아티클 메타데이터 영역만 손을 봅니다. ul 태그를 박스 모양으로 렌더링되게 display:block으로 정의하고, 폭을 100%로 줍니다. 그런 다음 li를 float:left로 정의하면 list 가 가로모양으로 나열될 수 있습니다. 굳이 ul을 블럭으로 다시 정의하는 것은, 이렇게 안하면 본문이 오른쪽으로 올라오기 때문입니다. (ul도 같이 float:left를 적용해 줘야 합니다. 이유가 궁금하시면 ul에 border를 줘서 눈으로 확인해보시면 좋아요)


자, 이제 각각의 포스팅 본문 영역의 모양새를 잡아 보겠습니다. 아무래도 문단과 문단은 조금 간격이 있는 것이 눈에도 잘 들어오겠죠? 근데, 이걸 하기 전에 잠깐 언급할 것이 있는데요. CSS표준에는 '마진 붕괴'라는 이상한 특성이 있습니다.

뭐냐면 위 아래로 박스가 계속 배열되는 경우에 (지금 우리가 공부하는 케이스에서 p 태그가 연속적으로 나오고 있는 것처럼요), 각 박스가 위쪽 마진 10px, 아래쪽 마진 10px씩을 가지고 있다면, p와 p 태그 사이의 간격은 20px이 되어야 마땅할 것인데, 이처럼 상/하로 붙어있는 박스들의 마진은 서로 먹어 들어가버려서 둘 중의 큰 쪽으로만 표현됩니다. (이 경우에는 10px로만 보임)

(궁금하시면 직접 실험해보시면 딱 좋을 듯. 먼저 p 태그의 아래 여백만 20px을 준 다음 화면을 확인하고, 위쪽 여백의 값을 점차 늘려가면서 화면의 모양이 어떻게 변하는지 보면 금새 이해가실 겁니다.) 그림으로 표현하면 한결 쉬운데, 김프가 너무 익숙치가 않아서요.. 죄송합니다. 대신 이 곳을 보시면 대충 그림이 있습니다. 영어로 되어 있기는 하지만 아래 위 10px씩 주면 20px이 될 것 같지만 사실은 그림과 같이 보인다... (픽셀 세보라는 거냐...)

아무튼 포스팅 내용의 문단에 대해서는 아래와 같이 살짝만 효과를 줍니다. 이곳에 쓰인 p:first-letter는 역시 유사 선택자로서, 문단의 첫 글자만 지정하는 녀석입니다. 영문으로 된 글의 경우에는 산뜻해 보일 수 있는데, 한글은 자칫 위험한 선택일 수도 있겠군요.


이제, 풋터 영역만 손을 봅니다. 그냥 가운데 정렬만 했음.


이제 다 했습니다. a 태그나 이미지에 대한 내용도 좀 쓰려고 했는데, 이 부분은 또 나중에 기회가 있을거라 믿어 의심치 않습니다. 이제 최종적인 문서의 모양을 보도록 하지요.


어떤가요? 지지난 글에서보다, 그리고 지난글/이번글의 맨 처음보다 그래도 한 결 나아진 느낌입니다. 이미지가 없어서 좀 썰렁할 수도 있겠지만, 뭐 어때요 이런게 미니멀리즘이라고 우기면 장땡이죠. 이렇게 페이지 하나를 완성했다고 해서 강좌가 끝나는 건 아니니 너무 아쉬워하진 마세요 ㅋㅋㅋ. (뭥미 아무도 아쉬워한 사람 없잖아 ㅠㅠ)

이렇게 css를 가지고 단순히 글꼴 색이나 모양새만 다룬 것이 아니라 레이아웃을 잡아보았으니, 첨에 말씀 드린 것처럼 CSS만 가지고 레이아웃을 바꾸는 것이 가능하다는 걸 여러분들에게 보여드려야 할 것 같네요. 자, 그럼 다음 시간까지 아마도 또 적지 않은 공백이 있겠습니다만 다들 잘 지내시기 바랍니다. 왠지 떡밥만 옛다 던져주고 도망가는 기분이네요. 그럼 모두들 감기 조심하세요~~~



html &css 소스 내려 받기 :



신고
Trackback 0 : Comments 2
◀ PREV : [1] : [2] : [3] : [4] : [5] : ... [7] : NEXT ▶

티스토리 툴바