MaKeYOurOwN mkyoon

스타플 모바일 서비스(http://m.starpl.com)는 꽤 오래전부터 있었습니다만,

Posted by mkyoon

오늘 크롬을 켰다가 놀랐습니다.




보이십니까?
보이지 말아야 할 legend가 나오는 바람에 화면이 깨지는 모습을..
(예를 Daum으로 들었을 뿐, Daum에 악감정은 없습니다 ㅠㅠ)

이건 Webkit에서 잠시 보였던 현상과 동일합니다.



동일하죠?

Chrome이 Webkit 엔진을 쓰면서
Webkit 에 있었던 문제를 Chrome이 그대로 가져오게 되는군요.

Webkit의 최신 버전에선 이미 고쳐졌습니다.
이제 Chrome이 어서 고쳐지기만을 바래야죠.


위와 같은 현상은 Webkit이 기본적으로 적용하고 있는 User Agent Stylesheet에서
신기한 속성을 적용하면서 부터 시작됐습니다.

legend  { display: block !important; }

User Agent 의 스타일 시트에서 !important 속성을 넣다니요-_-
CSS 2.1 Spec 에서 명시하고 있는 스타일시트의 적용 순서는 다음과 같습니다.

1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations

스타플에도 같은 문제가 있었기에
제가 만든 CSS에서 다음과 같이 넣어주었습니다.  (3. author important declarations)

 legend { display: none !important; }

그런데도 아주 정확히 legend가 나타나네요. 하하-_-;

결국

 legend { 
    display: none;
    position: absolute; 
    visibility: hidden; }

요렇게 꼼수로 넣어주고 급한 불은 껐습니다. 하하-_-;

Posted by mkyoon

구글의 Chrome 브라우저가 3일 새벽 4시에 공개되었습니다.

웹퍼블리셔에게는 과제 하나 던져진 셈이지만
그렇게 두려워할 필요는 없는 것 같습니다.+_+

크롬의 생김새는 이렇습니다.


처음 설치할 때부터 북마크와 주소목록을 읽어오기 때문에 따로 설정할 필요가 없었습니다.
첫인상 깔끔하고 좋습니다.

제일 먼저 확인 했던 부분은 "개발자 정보" 메뉴였습니다.
CSS확인은 다음과 같이 할 수 있습니다.


크롬의 Inspector 입니다.

Element 탭에서는 해당 문서의 HTML소스와 그에 관련된 CSS 목록을 보여줍니다.
HTML소스 중에 한 Element에 마우스를 올리면
위 그림에도 보여지듯이 해당 위치에 노란 색으로 표시가 됩니다.

역시+_+ Webkit 기반이라 그런지 Safari와 상당히 비슷한 모습을 보여줍니다.
Safari에서는 아래와 같았죠.


오른쪽 style 목록 중에 자세히 보시면 수정 가능한 항목이 보입니다.
그렇담 크롬 Inspector도 수정 가능할까요?


역시~ 안될리가 없죠.

다음엔 Resources 탭을 확인해보았습니다.


역시 Safari의 Network 부분과 마찬가지로
다운로드한 모든 파일의 크기와 시간을 보여줍니다.

거의 Safari와 비슷한 수준으로 웹페이지를 만드는데 어려움은 없을 것 같습니다.
아직 많은 버그들이 속속 보여지고 있지만
오픈 소스의 강력한 이점+_+으로 차차 많이 나아지리라 예상됩니다.

앞으로 많은 발전이 있길 기대합니다.

Posted by mkyoon