CSS for iPad Orientation (화면회전)

CSS for Retina Display 에 이어 이번엔 IPad 화면 회전에 따른 CSS 적용법에 대해 간략하게 적어보겠다.
사실 화면회전에 따라 CSS를 구별해서 적용하는 경우는 드물것이나, IPad에 맞춤 웹페이지를 제작하다보면 어느순간 필요해지는 부분이다.

1. Media Query
iPad Orientation의 Media Query는

all and (orientation:portrait)
all and (orientation:landscape)

이다.
portrait는 세로화면,
landscpae는 가로화면이다.

2. 불러오기
CSS for Retina Display와 동일하다

2-1. 별도의 CSS File을 만든경우

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”/stylesheets/portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”/stylesheets/landscape.css”>

2-2. style을 구분하여 불러올 경우

<style type=”text/css” media=”all and (orientation:portrait)”>
<style type=”text/css” media=”all and (orientation:landscape)”>

2-3. 일반적인 style 안에서 불러올 경우

@media all and (orientation:portrait) {
#for portrait style codes..
}
@media all and (orientation:landscape) {
#for landscape style codes..
}

3. 예제
세로용에는 portrait, 가로용에는 landscape를 부여하고, CSS를 통해 제어해보겠다.

<style type=”text/css” media=”screen”>
@media all and (orientation:portrait) {
.portrait { display: block; }
.landscape { display: none; }
}
@media all and (orientation:landscape) {
.portrait { display: none; }
.landscape { display: block; }
}
</style>

Orientation:
<div>Portrait</div>
<div>Landscape</div>

4. 확인
4-1. Portrait(세로모드)

 

 

 

 

 

 

4-2. Landscpae(가로모드)

 

 

 

 

광고

IE7에서 text-decoration이 이상하게 나올때.

IE7에서 text-decoration: underline 이 이상하게 표현될 때가 있습니다.
조금 더 정확하게 표현을 하자면 밑줄이 제자리에 있지 않는 증상이죠.
font-family가 어떤것이냐에 따라 1px 올라가느냐 2px이 올라가느냐 정도의 차이가 있습니다.

문제의 원인은

  1. vertical-align:middle속성을 가진 DOM이
  2. text-decoration: underline 속성을 가진 DOM과
  3. 같은 레벨에 있을때

나타납니다. 아마 IE7의 Bug인것 같네요.

해결책은 아주 간단합니다. vertical-align: middle의 객체를 div같은 display:block으로 감싸주면 되죠. 만약 이 객체의 우측에 위치해야 한다면 float: left로 Positioning을 해주시면 됩니다.
그 외 세세한것들은 디자인에 맞춰서 Styling 하면 되는것이죠.


위 스크린샷의 HTML&CSS 코드 입니다.

<h2>해결</h2>
<p>vertical-align:middle 객체를 div같은 display:block으로 감싸면 해결이 됩니다. 디자인에 따라 float을 부여하고 Styling을 하시면 됩니다.</p>
<p>
<div style=”float:left”><input type=”text” style=”vertical-align:middle;width: 160px” value=”vertical-align:middle” /></div>
<div style=”float:left;padding:2px 0 0 5px”>
<span style=”text-decoration: underline”>It’s span: 이것은 span입니다.</span>
<a href=”#”>It’s a: 이것은 a입니다</a>
</div>
</p>
<p style=”clear: both”>
<div style=”float: left”><img src=”vami.gif” style=”vertical-align: middle” /></div>
<div style=”float:left;padding:15px 0 0 5px”>
<span style=”text-decoration: underline”>It’s span: 이것은 span입니다.</span>
<a href=”#”>It’s a: 이것은 a입니다</a>
</div>
</p>

 

Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기

body에다가 class를 부여하여 css selector만 이용하는 방법입니다.
가장 많이 쓰이는 IE, IE6, IE7, 그 외.. 로 예제코드 만들어 봤습니다. (실제로 저는 이렇게 해서 사용합니다.)

<!–[if lte IE 6]><body><![endif]–>
<!–[if IE 7]><body><![endif]–>
<!–[if !IE]>–><body><!–<![endif]–>

 

#content { color: red; }
.ie #content { color: blue; }
.ie6 #content { color: pink; }
.ie7 #content { color: green; }

Conditional comments에 대해서

CSS Frameworks

지극히 개인적이며, 이것들 모두 심도있게 사용하고 적은것이 아니라는 점 감안하시고 보세요~

이름 주저리
blueprintcss Grid 위주이며 class로 griding
RoR로 Grid를 재설정하여 CSS 파일을 생성할 수 있다.
Modular CSS 많이 사용되는 6개의 Grid만 지원
Grid별로 파일이 나눠져 있음
Download 버튼이 꼭꼭 숨어져 있어 찾기 힘듬
Emastic 최근에 나온 CSS Framework.
blueprintcss랑 비슷하다
Yahoo YUI 개인적으로는 별로 안좋아하는 naming sense ㅎㅎ
yaml Framework이라고 부를만한 규모
보통 Grid위주인 반면 yaml은 여러문제에 대해 고려가 되어 있고 지원을 하고 있다.
yaml 홈페이지에 나름 유용한 정보들도 좀있다.

CSS Editors Reviewed

http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/

OS에 상관없이 CSS Editor를 16개나 Review 한 것입니다.
영어의 압박이 있긴 하지만..심심풀이 땅콩으로 볼만한 것 같습니다.

세세하게 둘러보진 않았지만..지금보니.. Mac용 Editor도 많네요. 괜찮아 보이는것들도 있고…
메인 OS가 Windows여서 Windows용이 사실 좋은데..
왠지 Mac Editor가 더 이뻐보이네요.. 이뻐보여서 그런지 왠지 기능도 더 좋을거 같고;;
(Rails랑 svn용으로만 쓰는 불쌍한 내 MacBook의 활용도가 조금 더 올라갈려나;;)

둘러보니 Linux에서도 구동되는 CSS Editor(CSSED)도 있네요!!
그리고 CSS 천재라고 불리는 Eric Meyer가 CSS Editor도 만들었다는 사실도 알았습니다.
듣는순간 촌티가 확 나면서 왠지 안쓰고 싶은 느낌이 드는 이름을 가진 Editor..
그 이름하여 Eric Meyer’s CSS Sculptor…………..;;;

그래도 Eric Meyer인데!! 라는 생각으로 Eric Meyer’s CSS Sculptor 에 들어가는 순간..
순간 두 눈을 의심하게 되며, 머리속이 하얗지면서 두 손과 어깨의 힘이 쭉빠지게 됩니다.
요즘 흔히들 말하는 “멍~” 때리게 됩니다. 그리고 정확히 2.515초 후에 Scream!!! 하게 될 수 도 -ㅁ-;;
(역시 서양인들의 쎈쓰!! ㅎㅎ)

아래는 http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/ 에서 리뷰한 CSS Editors입니다.

탭메뉴는 어떻게 코딩 해야 할까?

우선 먼저 말하고 싶은것은 내가 적은 방법이 정답은 아니다.
정수 ‘2’ 라는 값을 만들기 위해서

  • 1+1
  • 2/8*((16-4)/3)*2
  • sin 5/6 pi * 4

같은 많은 식들이 존재하듯이, 아래에 나온 방법도 그중 하나 일 뿐이다.

별 내용없는 두서는 이제 접기로 하고…

  • semantic markup
  • CSS가 없을때도 제대로 보이도록
  • Javascript가 동작하지 않을때도 동작하도록

위의 사항들을 고려하며 코딩되었다.

<menu id=”tab_menus”>
<li><a href=”#Menu_01″>Menu 01</a></li>
<li><a href=”#Menu_02″>Menu 02</a></li>
<li><a href=”#Menu_03″>Menu 03</a></li>
</menu>
<div></div>

<div id=”Menu_01″>
<h3>Menu 01</h3>
<p>Menu 01…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>
<div id=”Menu_02″>
<h3>Menu 02</h3>
<p>Menu 02…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>
<div id=”Menu_03″>
<h3>Menu 03</h3>
<p>Menu 03…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>

tab menu 의 링크를 각각의 content에 걸어줌으로 인해 quick link의 역활을 수행하여 접근성을 높였고, 각 content 하단에 tab menu로 바로 가는 quick link도 제공함으로 더욱 완성도 높은 접근성이 보장되었다. 하지만 이렇게 보면 전혀 tab menu같지가 않다.

이제는 tab menu스럽게 꾸며보자.

body {
font:12px arial;
}
a {
text-decoration:none;
}
img {
border:0;
}

/* tab menu */
#tab_menus {
margin:0;
padding:0;
list-style:none;
}
#tab_menus li {
margin-bottom:16px;
float:left;
padding:0px;
}
#tab_menus li a {
padding:8px 10px;
color:#505050;
border-width:1px 0 1px 1px;
border-style:solid;
border-color:#ae9f96;
background-color:#eae4e0;
background-image:none;
font-weight:bold;
font-size:0.9em;
display:block;
}
#tab_menus li a:hover {
color:black;
}
#tab_menus li.selected a {
border-bottom:0 solid white;
background:white url(“blt_arrowdown.gif”) no-repeat center bottom;
color:black;
}
.tab_right {
margin-bottom:16px;
border-width:0 0 1px 1px;
border-style:solid;
border-color:#ae9f96;
width:80px;
height:31px;
float:left;
}

/* content */
.content {
clear:both;
padding-left:10px;
}
.content h3 {
margin:0;
padding:0;
font-size:1.2em;
color:#ff4800;
}

tab menu의 a를 block으로 잡고 hover를 주어 onMouse상태일때 Javascript없이도 변화를 줄 수 있게 하였다.
#Menu_02, #Menu_03에 display:none을 안 준 것을 궁금해 하는 독자가 있다면, 당신은 천재!
Javascript없이도 모든 content의 접근성을 보장하기 위해서다. 이건 조금 후 다시 설명하기로 하고..

자 이제는 마무리. Javascript로 tab menu 동작을 만들자.
mootools 1.11(Element.Event, Element.Selectors)을 이용하였다

var selected_menu = 0;
var menus = $$(‘#tab_menus li’);
var contents = $$(‘div.content’);
contents.each(function(div, i) {
if (i != 0) {
div.setStyle(‘display’, ‘none’);
}
})

menus.each(function(quick_link, i) {
quick_link.getElement(“a”).blur();
quick_link.addEvent(‘click’, function(event) {
e = new Event(event).stop();
contents[selected_menu].setStyle(‘display’, ‘none’);
menus[selected_menu].removeClass(‘selected’);

contents[i].setStyle(‘display’, ‘block’);
quick_link.addClass(‘selected’);
selected_menu = i;
});
});

#Menu_01을 제외한 다른 content들은 가려주었고, tab menu의 박스에 click 이벤트를 걸어줌으로써 toggle 기능이 완성이 되었다.
만약 content들을 CSS에서 가려주었다면(#Menu_02, #Menu_03 display:none) CSS는 render가 되었는데 Javascript가 동작이 안되는 상황이 오면 다른 content에 접근할 방법이 없어진다.
Javascript로 원하는 content를 display:block으로 바꿔줘야 하는데 Javascript가 동작이 안되니 tab을 백날눌러도 그 tab의 content는 볼 수 가 없게 되는 것이다.

결론.
결국은 content는 CSS와 Javascipt에 영향을 받지 않게 설계,코딩 되어야 하고 더불어 semantic하게 markup되어야 한다는 것이다.

다운로드
미리보기 (링크걸리는줄 알았는데 그게 아니네요. 아..이럴때 개인서버가 살아있었다면..)

 tab-menu.html

압축파일(html, js, images)

 tab-menu.zip

ps > 이거 스크롤의 압박이;;

 

WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..

일전에 적었던 CSS 에 바라는것들에서 border options에 관한것을 Tell the CSS WG what you want from CSS3에다가 남기고 왔다.
(WSP에 CSS3에 추가했으면 하는 IDEA를 접수하고 있다. 자세한것은 군우님이 Standard Magazine에 쓰신 글을 참고 http://forum.standardmag.org/viewtopic.php?id=1962)

역시 영어는 어렵다 ㅠ,.ㅠ
친한 동생한테 번역을 부탁해서, 그걸로 코멘트를 남기긴 했는데..
흠..번역한걸 읽어보니…내가 한글로 보낸거랑 조금 내용이 틀린것 같기도 하고 ㅠ,.ㅠ
뭐 WSP에서 알아서 듣겠지 -ㅅ-;; 난 동생을 믿는다!

아참. CSS 에 바라는것들에 적었던 parent selector 가 추가가 되었다. 물런 사용법은 틀리지만 ㅎㅎ
round에 관련된것은 이미 많은 분들이 코멘트를 남겨 놓으셧다.
reset도 번역해서 올리고 싶은데..역시 짧은 영어실력으론..크흑;