겐도사마의 재림 ::

'Safari'에 해당되는 글 2건

2008/03/18 Safari 3.1 updates
2008/03/10 p안에 div를 넣으면 (4)

Safari 3.1 updates

개발&Development/웹 2008/03/18 23:56 posted by 겐도

집으로 퇴근하는 사이 3.1 업데이트가 나왔군요.

소프트웨어 업데이트 기능을 사용하거나 http://www.apple.com/safari/download/ 에서 다운로드 가능합니다.

변경점은 http://docs.info.apple.com/article.html?artnum=307467-ko 에서 확인가능합니다.

JS 빨라졌다라... 뭐 체감하긴 힘들겠습니다만.

CSS 3 web fonts 지원에 HTML 5의 video/audio 태그 지원이라... 그보다는 개발자 기능이 강화된게 맘에 드는군요.

업데이트를 하니 재부팅 하라고 해서 재부팅 하고 이래저래 뜯어봐야 겠습니다.

개발자용 업데이트.
환경설정에서 "개발자용 메뉴보기" 추가

이런 메뉴가 추가됩니다.

웹속성(Web Inspector) 화면

여기서 FF의 FireBug처럼 엘라먼트의 스타일을 바로 수정할 수 있습니다.

웹최적화를 위한 Timeline기능도 이쁘군요.

사용자 Agent 스트링을 지원한다고는 합니다만 메뉴명 번역이 글쎄요... --?

아무튼 "다른 위치"를 누르면

그외 기능으로 패스워드창에 CapsLock 상태 아이콘이 나옵니다.

사파리에서 깨지는 티스토리 로긴창이긴 합니다만(언제 고칠건데 박군!) 아무튼 패스워드창에 포커스가 있을 때 CapsLock이 켜져 있는 경우 느낌표가 나옵니다.

윈도우 버전의 경우 한국어, 일어, 중국어 입력 처리부분을 강화했다는데 요즘 윈도우를 안써서 모르겠습니다. (맥 한글 입력기는 언제고칠껀데?)

추가:
패스워드 입력란에 한번 포커스가 가면 이후 한글을 입력할 수 없는 버그가 있습니다. 쿨럭.

TAG HTML, Safari, 사파리, 웹폰트

받은 트랙백이 없고 , 댓글이 없습니다.

p안에 div를 넣으면

개발&Development/웹 2008/03/10 14:25 posted by 겐도

리퍼러 중에 이런 문제로 고심하는 분들을 위해 왜 p안에 div를 넣으면 안되는지를 간략히 살펴보자.

우선 W3의 HTML 4.01 스펙부터 보자. 9.3.1 Paragraphs : the p element를 보면 p 태그는 inline 요소만을 자식으로 가질 수 있다고 한다. div는 block 그룹에 속한다. 따라서 p안에 div를 쓰면 잘못된 것이다. 헌데 다들 잘 쓰고 있지 않은가? 심지어 텍스트큐브나 티스토리 에디터도 이런 식으로 html을 생성하기도 한다(정확히는 각 브라우저의 위지윅 에디팅 모듈의 버그라고 할 수 있지만). 많은 웹사이트 코더들이 이 부분을 묵과한다.

아래의 코드를 보자.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
p { border:black thick solid; }
div { border:red thin solid; }
</style>
</head>
<body>
<p>
<div>
테스트문장
</div>
</p>
<p>
정상적인 문단
</p>
</body>
</html>

"테스트문장"이 전형적으로 실수한 부분이고 아래는 정상적이다. p 영역이 정확히 어딘지 알기 위해 보더를 주었다.

IE 7 on Windows XP Korean

우선 IE7. p의 보더가 두번 보인다. 이는 사파리도 비슷하다.

Safari 3 on Mac OS X Leopard

단란이 정확히 "테스트문장"을 감싸지 못하고 있다.

파이어폭스는 약간 다르다.

FireFox 2 on Mac OS X Leopard

아래쪽이 없다. 이는 부정확한 태그에 대한 핸들링 차이이다. 브라우저 입장에서 표준 좀 어겼다고 해서 "이거 해석 못하겠임"이라고 할 수 없는거 아닌가.

배째라 브라우저라면?

그래서 대부분의 브라우저가 에러 핸들링을 하는데 이것이 브라우저마다 약간씩 다르다. 물론 표준 밖의 내용이라 개발자 마음대로(?) 처리할 수 있다. 새로운 브라우저가 나올때 마다 어떻게 처리될지는 아무도 모른다.

IE와 Safari의 경우 p안에서 div를 만나는 순간 </p> 태그를 빼먹었다고 판단한다. 단락이 끝난다. 그리고 div가 시작되며 다시 </p>를 만나는 순간 이번엔 시작 태그<p>가 없다고 판단 빈 단락을 만든다. "테스트문장" 아래의 줄이 생기는 이유이다. 허나 FF는 뒷부분의 </p>를 엄하게 들어온 것으로 보고 discard 한다.

IE, Safari는

<body>
<p></p>
<div>
테스트문장
</div>
<p></p>
<p>
정상적인 문단
</p>
</body>

Firefox는

<body>
<p></p>
<div>
테스트문장
</div>

<p>
정상적인 문단
</p>
</body>

이런식으로 변환된다고 보면 되겠다.

이런걸 보고 브라우저가 좋네 마네 이야기 해서는 안되는 것이다. 표준을 벗어났을 때의 이야기기 때문이다. 이런 문제들이 쌓이고 쌓이면 복잡한 페이지에선 브라우저별로 정확히 렌더링 결과를 같게 만드는 것이 어려워 진다. HTML 구조가 다른 셈인데 같은 CSS로 어떻게 처리하리오.

표준을 지키는 것은 매우 중요하다. 표준을 제대로 이해하지 못하고 사용하게 되면 저련 문제에 당하는 것이다. HTML로 밥먹고 살고 있다면 HTML 스펙은 한번쯤은 정독하자. CSS를 먼저 공부할 것이 아니라 HTML부터다.

덧. Safari의 핸들링이 확실치는 않습니다. 제가 잘못 분석한 것이라면 코멘트 주세요. FF와 IE는 DOM을 통해 확인하였습니다.

TAG div, Firefox, HTML, IE, p, Safari, 브라우저, 웹표준

받은 트랙백이 없고 , 댓글 4개가 달렸습니다.