Rev. 2.73
Roman Cortes씨는 자바스크립트를 사용하지 않고 CSS와 HTML만으로 3차원 패럴랙스(시차) 효과를 만들어 냈습니다. 좌측 회화에 마우스 포인터를 올리고 움직여 보세요. 그저 놀라울 따름입니다.
소스코드를 열어보니 엄청난 노가다를 하셨더군요. 너비가 5픽셀 짜리인 <a> 요소를 촘촘하게 배치하고 해당 요소의 :hover액션에 의하여 상황에 맞은 이미지와 포지션을 출력한 것입니다. 참 대단하신 분입니다.
반투명 PNG 이미지 포멧을 사용하므로 이를 지원하지 않는 브라우저에서(IE 8 이하)는 정상적으로 보이지 않을 것입니다.
Web Designer Wall의 Nick La씨는 잘 사용되지 않지만 유용한 5가지 CSS2 속성들에 대한 포스팅 다음으로 <div> HTML 요소가 남용되고 있는 상황에 대하여 지적하고 말끔하면서도 시맨틱한 HTML 마크업을 할 수 있도록 <div> 요소를 최소화 하는데 중점을 두어 여러가지 예시를 작성하였습니다. 혹시 다른사람이 작성한 템플릿을 수정하다가 미쳐 광분해 본 경험이 있으신가요? 여러 사람이 참여하는 규모가 큰 프로젝트에서는 군더더기 없는 템플릿의 마크업은 매우 중요하며 무엇보다도 이를 지키는 본인에게 가장 큰 혜택이 돌아가게 될 것입니다.
<div> 태그는 제거하세요. <form>, <ul> 요소를 감싸는 <div> 요소를 우리는 어렵지 않게 목격할 수 있습니다. 도대체 왜 쓸데없이 추가적인 <div> 요소를 생성하는 것인가요?
이 예시는 <div> 요소를 제거하기위해 CSS 셀렉터를 조금 수정한 것입니다.
때때로 <div> 요소를 단순히 여백(margin)을 할당하기 위한 목적으로 사용하는 경우를 발견할 수 있습니다. 왼쪽 코드들 중에 <div class="box"> 요소가 바로 여백을 주기위한 것입니다. 이것은 <h4> 요소에 여백을 사용하면 됩니다.
우리는 항상 시맨틱한 마크업을 사용하여 HTML 문서의 코드를 작성해야합니다. 예를 들면 <h1> 요소에는 머릿말을, <p> 요소에는 문단 또는 단락을, <ul> 요소는 목록을 표현하는 목적을 두고 만들어진 요소들 입니다. 이러한 마크업을 준수하면 CSS가 지원되지 않는 접속환경에서도 알아볼 수 있는 HTML 문서를 제공할 수 있는 등의 혜택이 따르기 때문입니다.
<div> 요소만을 이용해서 마크업한 것과 그렇지 않은 마크업입니다. CSS가 지원되지 않는 환경에서 렌더링의 차이를 비교할 수 있습니다.
<div> 요소를 최소화하세요. <div> 요소가 무분별하게 사용된 템플릿을 보고 돌아버릴 뻔 한 적이 있나요? 조금 더 구체적인 질문을 하자면 <div> 요소의 닫는 태그가 누락되거나 시작 지점을 찾느라 고생해 본 경험이 있나요? 아마도 대부분의 개발자가 이러한 경험이 있을 것이라고 확신합니다. 그래서 우리는 항상 <div> 요소를 최소화하여 사용해야 합니다. 그리하면 디버깅이나 유지보수 작업이 훨씬 쉬워질 것입니다.
여기에 사용된 <div> 요소는 자잘한 네비게이션 링크들(예를 들면 태그)을 위해 존재합니다. 이것을 더욱 의미있는 <p> 요소로 변경했습니다.
이 예시에서는 CSS를 이용해서 두개의 <div> 요소를 덜어내고 하나의 <span> 요소를 사용해서 같은 출력 결과를 만드는 과정을 설명합니다.
HTML을 마크업할 때 들여쓰기는 꼭 지켜야 합니다. 그래야 사람이 읽기 편하고 디버깅이 쉬워지니까요. 만약 Adobe Dreamweaver를 사용하고 있다면 Commands > Apply Source Formatting 명령으로 쉽게 들여쓰기가 완성 되도록 할 수 있습니다.
</div>)에 주석을 달아 주세요. 보통 하나의 템플릿은 header, sidebar, footer 등 여러가지 구성요소로 구분되어 완성됩니다. 그래서 구성요소의 구분이 끝나는 </div> 태그에 주석을 달아두면 두번다시 찾아 해메이는 일은 없을 것입니다. 코드중에 </div><!-- /wrapper -->라는 주석을 발견했다면, 이것이 의미하는 것은 <div id="wrapper"> 요소가 이곳에서 클로즈 된 것임을 알 수 있는 것이죠.
일반적으로 구조를 종료하는 닫힌 태그(</div>)우측에 종료의 의미를 알리는 역슬래시를 표기하여 HTML 주석으로 표현합니다.
Web Designer Wall을 운영하는 Nick La씨는 평소 즐겨 사용되지 않지만 유용한 5가지 CSS 속성들의 사용방법을 소개합니다. 이 5가지 속성은 clip, min-height, white-space, cursor 그리고 display 입니다. 모두 CSS2에 명시되어 있는 속성들로 이미 모든 브라우저들이 이를 지원하고 있으며, 어떻게 응용하느냐에 따라서는 그 목적이 확연히 달라질 수 있음을 설명하고 있습니다.
"clip"속성은 마치 마스크(mask)와 같습니다. 특정한 영역에 직사각형 모양의 컨텐츠를 삽입할 수 있습니다. clip 속성은 반드시 position속성을 absolute로 지정해야합니다. 그리고 top, right, bottom, left 값을 지정합니다.
다음 예제에서는 이미지에 clip 속성을 사용하여 마스크하는 방법을 다룹니다. 일단 <div> 요소의 position 속성을 relative로 설정하고, <img> 요소의 position을 absolute로 지정합니다.
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}이 예제에서는 썸네일 갤러리에 사용하기 위해 이미지의 크기를 변경하고 불필요한 영역을 잘라내 보겠습니다. 원본 200 x 140픽셀인 직사각형 이미지의 크기를 50%로 줄이고 정사각형 모양으로 잘라낸 후 잘려나간 만큼 left값을 -15px로 지정하여 마치 클리핑 된 것처럼 했습니다.
.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
} min-height 속성으로 최소 높이를 지정할 수 있습니다. 레이아웃의 균형을 유지해야 할 때 유용하게 사용할 수 있습니다. 이 예제는 컨텐츠 영역이 항상 사이드바 보다 크게 유지되도록 조정 하는 것입니다.
.with_minheight {
min-height: 550px;
} IE6은 min-height 속성을 지원하지 않기 때문에 아래와 같이 핵을 사용해야 합니다.
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
} white-space 속성은 문자가 표시될 때 공백의 처리 방법을 정의합니다. 문자 요소에 이 속성의 값을 nowrap로 설정하면 어색하게 개행되는 문자열을 훌륭하게 처리할 수 있습니다.
em {
white-space: nowrap;
}버튼의 동작이 변하는 경우에 마우스 커서의 모양도 변경되어야 합니다. 이 예제는 버튼의 활성화(clickable), 비활성화(default), 작동 중(wait)에 대한 상태를 감지하여 커서의 모양을 변경합니다. 이것은 웹 애플리케이션을 개발 할 때 유용합니다.
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
} display 속성값들 중 block이 무엇을 의미하는지 잘 알고 있나요? block으로 설정된 요소는 구조 요소 처럼 변환됩니다. 즉 <div>, <h1> 그리고 <p> 요소가 가진 특성을 가지는 것이죠. inline은 그 반대입니다. 구조 요소를 <em>, <span> 그리고 <strong> 요소와 같은 문자 요소의 특성을 가지게 됩니다.
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}
Comments