Rev. 2.73

윈도폰7 기기에 탑재된 인터넷 익스플로러에만 적용되어 작동하는 트릭에 대하여 알고 있나요? 다음은 css-tricks에 제보된 윈도폰7의 IE에 적용되는 조건부 코멘트 사용방법입니다.

<!--[if IEMobile]>
   Displayed only on Internet Explorer Mobile on Windows Phone 7
<![endif]--> 

<![if !IEMobile]>
  Anything else
<![endif]>

물론 미디어 쿼리를 이용하여 처리하는 것이 유행이긴 하지만, 상황에 따라서는(브라우저 종속적인 기능을 조율해야 할 필요가 있다면) 위와 같은 방법이 나아 보이기도 합니다. 효율적인 측면에서는 미디어 쿼리와 혼용하는 것이 좋겠습니다.

Comments

float 속성을 가진 컨테이너는 자식 요소의 높이를 무시하여 예상치 못한 결과를 출력하는 문제를 가지고 있습니다. 이 문제를 해결하기 위해 추가적인 요소에 clear 속성을 이용하는 방법이 있지만 overflow 속성을 이용한 해결 방법에 대하여 Web Designer Wall의 Nick La씨가 정리했습니다.

Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.

Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla.


위 예제처럼 float 속성을 가진 컨테이너 요소가 높이를 무시하는 문제입니다.

Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.

Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla.

<div style="clear:both"></div>

위 예제는 자식 요소의 마지막에 clear 속성을 가진 추가 요소를 사용한 것입니다. 이 밖에도 clearfix하는 방법을 이용하여 일반적으로 이 문제를 해결할 수 있었습니다.

Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.

Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla.

그러나 overflow 속성을 이용하여 이 문제를 해결할 수 있다는 사실을 알고 있었나요? 이것은 새로운 CSS 트릭이 아니라 오래전 부터 알려져 있던 것입니다. 위 데모는 overflow: auto를 지정함으로써 문제를 해결한 것입니다.

.container {
	overflow: auto;
}

그리고 overflow는 float 요소를 둘러싸는 효과를 제거하기 위해 사용할 수 있습니다. 여기에 overflow: hidden을 추가하면 아래와 같이 별다른 추가작업 없이 일렬로 배치할 수 있습니다.

overflow-auto-2.png

단, overflow를 이용한 float 클리어 트릭은 문제점을 가지고 있습니다. overflow: auto를 사용한 경우 자식 요소의 내용이 컨테이너의 폭을 넘어버리면 가로 스크롤이 표시되는 문제입니다. URL이나 줄 바꿈이 없는 긴 텍스트 또는 큰 그림 등을 배치할 때 아래와 같은 현상이 발생합니다.

drawbacks.png

이 문제는 ward-wrap 속성을 이용하여 해결할 수 있습니다.

.container {
	word-wrap: break-word;
}

큰 그림은 max-width 속성을 이용하여 해결할 수 있습니다.

.container img {
	max-width: 100%;
	height: auto;
}

drawbacks-solutiion.png

이같은 스타일시트를 추가하면 가로 스크롤 막대가 생기는 것을 방지할 수 있습니다.

Comments

firejune.png

2005년에 적용해서 지금까지 고집해해 오던 블로그 레이아웃을 버리고 새로운 디자인을 야심차게 준비하고 있습니다. 24ways.org에서 디자인 영감을 얻었으며 기존 디자인의 가지는 아이덴티티를 병합하려고 시도하였습니다. 원래 컨셉을 살려 레이아웃에 사용되는 이미지는 최소화 하고 CSS를 적극 활용합니다. 현재 기반이 되는 자바스크립트 라이브러리인 Prototype을 걷어내고 jQuery로 변환하는 스크립팅 작업을 진행중인데 분량이 만만찮네요. 다음 방문때 디자인이 변경되었어도 깜놀하지 말아주세요. :)

Comments