CSS, iphone, reader, webkit
okjsp사이트를 아이폰으로 볼 때마다 한 가지 아쉬운 점이 있었습니다. 제목이나 다른 링크들은 잘 보이는데, 항상 콘텐츠 영역이 너무 작게 표현되는 것입니다.


확대를 해도 마찬가지였습니다.

그나마 아이팟터치4에서는 조금 더 나았지만, 그래도 아쉬움이 많이 남았습니다

구글신에게 따졌더니 방법을 알려주더군요. 아래처럼 나아졌습니다

-webkit-text-size-adjust 라는 CSS 속성을 통해서 변경했습니다.

-webkit-text-size-adjust: 160%;


내용 부분에 위와같은 CSS 속성을 주어서 아이폰에서 봐도 무리없게 되었습니다.

추론:
Safari 브라우저의 "읽기 도구" 기능이 비활성화 된 것으로 봐서는 브라우저 콘텐츠 파싱 기술이 적용이 되어서 아이폰에서 다르게 보이지 않았나 생각됩니다.
소회:
브라우저에서는 멀쩡하게 보이는 것이라 원인을 찾는 것과 작업하는 것이 수월하지 않았습니다. 아이폰 시뮬레이터를 사용할 수 없었던 상황이라서 더 그랬죠. 

참고:
http://css-infos.net/property/-webkit-text-size-adjust : CSS Property : -webkit-text-size-adjust
http://ajju.textcube.com/16 iphone safari 회전시 폰트 사이즈 변경 버그



저작자표시비영리변경금지
  1. 익명 2011.01.04 21:38

    비밀댓글입니다

    # Delete Reply
console, CSS, Debug, HTML, JavaScript, mobileweb, Safari, 디버그, 모바일 브라우저, 모바일웹, 사파리, 콘솔
아이폰엔 있습니다. 이런 괴물... 이미지 상단에 "콘솔 디버그 오류 없음" 이라고 보입니다.

설정에서 브라우저 정보에 보면 개발자용이라고 표시됩니다.

콘솔 디버그 옵션을 활성화하면 됩니다.

오류가 생긴 경우 더 자세한 정보를 볼 수 있습니다.

HTML/JavaScript/CSS 의 오류가 보여집니다.

모바일웹 개발시 유용하게 쓰일 것 같습니다.



저작자표시비영리변경금지
CSS, hungapp, IE6, IE7, IE8
브라우저로 표시할 때 생략되는 부분이 많군요. 보여야 될 것이 안 보이는 현상과 레이어 영역의 해석이 ie7과 많이 다르네요.

설치할 때 추천 사이트 옵션을 켜놓았습니다.

빠른 설정 사용이라고 해서 Live 시리즈로 묶어놓는 옵션을 선택할 수 있습니다.

브라우저의 연결 표시줄에 추천 사이트 항목이 생겼습니다. https://ieonline.microsoft.com/slice.aspx 라고 나옵니다.

그러나 오늘은 작업중인가 봅니다. 제대로 동작하지 않는군요.

사실 CSS 렌더링이 생각과 너무 다르게 작동하기 때문에 불편을 느끼고, 언인스톨한 다음에 ie7으로 갔습니다. ie6는 hungapp 다운 때문에 못쓰겠구요.
저작자표시비영리변경금지
  1. 익명 2009.01.09 10:26

    비밀댓글입니다

    # Delete Reply
  2. 중스 2009.01.09 16:20

    안녕하세요, 먼저 새해 좋은일 많으시길 바랍니다.

    포스팅하신 내용 중에 WebSlice에 추천사이트가 나오지 않는 경우는 저는 경험은 못 해봤는데, 현재 있는 사이트로 비슷한 사이트들을 추천해 주는 기능입니다.

    그리고CSS 랜더링이 다르게 되는 부분은 예를 들면 어떤 사이트에서 문제가 있으셨는지 알려주시면 IE8의 문제라기 보다는 CSS 2.1 표준에 맞도록 되었는데 잘 표시가 되지 않는 것인지 확인을 해볼 수 있을 것 같습니다.

    끝으로 아시겠지만 IE8의 주소창 옆의 IE7 호환성 버튼을 클릭하시면, 그 사이트는 구버전의 IE 호환 모드로 동작을 해서 불편없이 사용할 수 있다는...

    # Delete Reply
    • kenu허광남 2009.01.09 16:43 신고

      먼저 안녕하세요. 세미나 부탁도 드려야되는데.. ^^;
      ie8 beta1은 ie7 emulate 모드로 오래 썼었는데, 다시 설치하고 찾아봐야겠네요.
      스크린샷 잡아서 다시 포스팅해보겠습니다. ^^

      새해 복 많이 받으세요.

      # Delete
    • kenu허광남 2009.01.09 17:46 신고

      http://okjsp.tistory.com/1165643685
      버그 리포팅 올렸습니다. 행복하세요. ^^

      # Delete
    • jamespa 2009.01.12 21:31 신고

      버그리포팅 글에 답변 달았습니다. :)
      http://okjsp.tistory.com/1165643685#comment3297716

      # Delete
CSS, DOCTYPE, okjsp
okjsp 상단을 바꾸었습니다. 이렇게 말이죠.

이것 바꾸는 데 2시간 걸렸다면 여러분들은 믿으시겠습니까? 그런데, CSS작업하면서 벌어진 틈새 때문에 한참 헤맸다면 여러분들은 과연 믿으시겠습니까? 이 벌어진 틈새가 DOCTYPE 선언 때문이었다면 과연 믿으시겠습니까?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
위에서 아래처럼 바뀌었습니다.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
차이가 크더군요.
저작자표시비영리변경금지
  1. 무혹 2008.12.15 08:02 신고

    남들은 쉽다고 하던데 저같은 경우는 html, css, javascript가 가장 어렵더군요..
    명확하지 않다고 느껴지는데 몰라서 그런건지...

    # Delete Reply
  2. 냥길동 2008.12.15 10:27 신고

    일하면서 윗분들이 가장 쉽고 단순하니 그런건 나중에 후딱 처리하자고하구선..
    다른것부터 시키다가.. 막상 할때되서 시간이 지연되면...개발자들을 이해 못해주는..
    부분이기도 하지요.... ;;; 화면만 보구서 이거하나만 해주면되는데..왜못해?...
    ㅋㅋㅋㅋㅋㅋ 이건 모..설득을 시킬거리두 안되구... 답답하죠..^^

    # Delete Reply
  3. 참◈서빈 2008.12.15 13:23

    2시간이라는 말에 Comment 를 달지 않을수가 없네요...
    너무하십니다. ㅎㅎㅎㅎㅎ

    # Delete Reply
    • kenu허광남 2008.12.15 16:17 신고

      ^^; 크로스 브라우징 적용하고 있습니다.
      DOCTYPE 부터 잡고 시작해야겠더군요. ^^

      # Delete
  4. 써니 2008.12.15 16:21

    충분히 믿어 의심치 않습니다.
    웹에이전시나 포털에서는 그래서 HTML 표준화 전담팀이 있죠~.
    문제는 일반인(?)들은 이게 얼마나 힘든지 전혀 모른다는 것이고...

    # Delete Reply
  5. lovedev 2008.12.17 00:54

    음...저 옆에 두고 모하신거에요....^^;; 도와드렸을 텐데.. 물론 과장님이 몸으로 느끼신게 더 큰 수확이겠죠 :)

    # Delete Reply
CSS, developerworks, DW, HTML, IBM, Refactoring, validation, XHTML
온실에서 키운 화초는 약하다고 합니다. 프로그램 개발환경 중에서 가장 온실같다고 할까요, 그런 게 있습니다. 바로 브라우저의 HTML 렌더러입니다. 가장 마음이 넓은 실행기라서 마크업이 깨져도 알아서 대체로 잘 보여주는 편입니다.

때문에 웹 개발자들은 프로그래머 취급도 못받고 허드렛일꾼으로 대하던 시절이 있었습니다.
하지만 그런 유약한 개발습관에서 벗어나 조금 깐깐해질 필요가 있는 것 같습니다.
자바원의 북스토어에서 본 책 중 인상적인 것 하나가 Refactoring HTML이었습니다.

IBM DW에도 비슷한 류의 글이 올라왔군요.

유효성 검사는 여러분의 페이지에 "예측 가능한"이라는 도장을 찍는 방법이다. 태그를 적절히 사용하면, 페이지는 구조적으로 건전하며, 사용과 탐색도 쉽다.

from: http://www.ibm.com/developerworks/kr/library/wa-inherit1/

프로그래머들의 애매한 결과에 대한 삽질은 누구나 겪는 일이지만 HTML 개발자들이 가장 심하다고 말하면 지나친 생각일까요?

유지보수하는 입장에서 HTML을 다루는 자세와 기법에 대해서 도움이 되는 내용이었습니다.

좋아하는 기획자 중 한 부류는 기획서가 깐깐해서 처음에 답답해 보이지만 프로젝트 후반에 말바꾸지 않고 신뢰감있게 독려하는 분들입니다. 웹개발도 깐깐하게 바꿔보는 것이 어떨까요.
  1. 쇼팬하워 2008.05.31 23:34

    웹 개발자들은 프로그래머 취급도 못받고 허드렛일꾼으로 대하던 시절이 있었습니다.
    -->이말 공감합니다.
    저도..그렇게 생각햇으니깐여..ㅠ

    # Delete Reply
CSS, extract, JavaScript, openapi, variable, 변수 추출, 분리

[shopgallery] 개발 구조에서 일단 화면에 보이는 것을 만들었습니다. 이렇게 만들어진 화면에 컨텐츠를 자유롭게 바꾸기 위해서는 동적으로 html 태그가 만들어져야 합니다.

데이터가 들어가는 부분 외의 style영역은 따로 파일을 만들어도 좋을 듯 합니다.
다음과 같이 코드가 분리됩니다.

style.css

.shopg {
  border: 1px solid #88F;
  background-color: #FEE;
  padding : 1px;
}
.shopg img {
  border: 1px solid #88F;
  width : 65px;
}
.shopg td {
  font-size : 11px;
  width: 65px;
}
.shopg_name {
  height: 39px;
  overflow: hidden;
}

simple.html

<link rel="stylesheet" type="text/css" href="style.css" />

<table class="shopg"><tr>
<td rowspan="2"><a
href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"><img
src="http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif"></a></td>
<td><div class="shopg_name">1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</div></td>
</tr>
<tr>
<td>8,900원</td>
</tr></table>


이제 simple.html 을 javascript를 이용해서 출력하도록 바꿔보겠습니다.
html에서는 모두 큰따옴표를 썼기 때문에 자바스크립트에서 문자열은 작은따옴표를 이용해서 둘러싸도록 하겠습니다.

자바스크립트 문자열의 특징은 자바와 다르게 줄 끝에 \ 를 붙여서 이어쓰기 할 수 있습니다. 때문에 이렇게 문자열을 만들 수 있습니다.
simple.html

<script type="text/javascript">
  var htmlCode =
'<link rel="stylesheet" type="text/css" href="style.css" />\
\
<table class="shopg"><tr>\
<td rowspan="2"><a \
href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"><img \
src="/'>http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif"></a></td>\
<td><div class="shopg_name">1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</div></td>\
</tr>\
<tr>\
<td>8,900원</td>\
</tr></table>\
';

  document.write(htmlCode);
</script>

일단 프로그램화 시키는 것은 성공했습니다. 이제 변수를 뽑아야죠.
'... href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"> ...'
위 코드가 다음과 같이 나눠집니다.
'... href="'+'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503'+'"> ...'
동적으로 변하는 부분의 양쪽을 문자열 덧셈표시로 바꾼 것이죠. ' 로 막고 + 붙이고 ' 로 다시 문자열 시작을 합니다. 이것을 변수처리해주면 됩니다.
var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503';
...
'... href="'+shopg_link+'"> ...'

코드를 바꾸면 다음과 같습니다.
simple.html

<script type="text/javascript">
  var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503';
  var shopg_image = 'http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif';
  var shopg_name = '1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불';
  var shopg_price = '8,900원';
  var htmlCode =
'<link rel="stylesheet" type="text/css" href="style.css" />\
\
<table class="shopg"><tr>\
<td rowspan="2"><a \
href="'+shopg_link+'"><img \
src="'+shopg_image+'"></a></td>\
<td><div class="shopg_name">'+shopg_name+'</div></td>\
</tr>\
<tr>\
<td>'+shopg_price+'</td>\
</tr></table>\
';

  document.write(htmlCode);
</script>

데이터의 1차 분리가 끝났습니다. 점점 프로그램 짜는 듯 느껴지십니까.

관련글: http://okjsp.tistory.com/tag/openapi


 

CSS, openapi, woc
일단 시작한 프로젝트라 고민이 많이 됩니다.
WoC를 통해서 멘토 역할을 합니다만, 한 번도 이런 것은 해 본 적이 없어서 정확히 무엇을 해야하는지 모르겠습니다. 그냥 옆에서 감 놔라 배 놔라 훈수 두는 것도 멘토링이라고 할 수 있겠지만, 맘에 안듭니다.

각설하고, 애플리케이션의 구조는 3가지로 나눌 수 있습니다.
  1. 화면 (UI)
  2. 엔진 (비즈니스 로직)
  3. 데이터 (DB)

두 명 이상 개발하는 경우, 화면과 데이터로 나눠서 개발하는 방법과 업무별로 나눠서 개발합니다. 요즘같이 서버와 클라이언트로 각기 특화된 기술을 필요로 하는 경우 데이터 인터페이스를 맞춘 뒤에 나뉘어서 개발합니다. 즉 openAPI로 데이터를 빼오는 작업과 그렇게 만들어진 데이터를 화면에 보여주는 작업으로 양분할 수 있습니다.

엔진은 화면과 데이터를 연결해주는 역할을 합니다. 엔진을 역할에 따라 세분화할 수도 있는데, 그것은 애플리케이션의 규모나 개발자의 역량에 따라 달라집니다.

shopgallery의 기본데이터
이 애플리케이션의 목적은 상품을 블로그의 위젯에 보여주고 지름신이 발동하도록 길을 열어주는 것입니다. 즉 다음과 같은 데이터가 필요합니다.

  1. 상품이미지
  2. 상품명
  3. 가격
  4. 링크

이 데이터를 복수개로 가져갈 것이냐 하는 것은 확장된 개념으로 보겠습니다.
일단 하나의 상품이라도 보이게 되면 가장 기본적인 지름도구로서의 자격은 갖춘 것입니다.

CSS를 이용해서 레이아웃도 코딩하고 싶지만, 위젯 특성상 얹혀지는 페이지의 DOCTYPE 에 따라 예상치 못한 결과가 올 수 있기에 테이블구조의 형식으로 일단 만들어 봅니다.

<table class="shopg"><tr>
<td><a href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503">
<img src="http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif">
</a></td>
<td>1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</td>
<td>8,900원</td>
</tr></table>

사용자 삽입 이미지
이렇게 나옵니다. ^^; 좀 다듬어야겠죠.

<table class="shopg"><tr>
<td rowspan="2"><a href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503">
<img src="http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif">
</a></td>
<td><div class="shopg_name">1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</div></td>
</tr>
<tr>
<td>8,900원</td>
</tr></table>
<style type="text/css">
 .shopg {
    border: 1px solid #88F;
   background-color: #FEE;
   padding : 1px;
 }
  .shopg img {
    border: 1px solid #88F;
    width : 65px;
  }
  .shopg td {
    font-size : 11px;
    width: 65px;
    overflow: hidden;
  }
  .shopg_name {
    height: 40px;
  }
</style>

많이 길어졌습니다. ^^;
그나마 이것도 파이어폭스2.0만 제대로 보입니다.

사용자 삽입 이미지

일단 요기까지 올립니다.
숙제는 ie와 오페라에서 잘 보이는 것이겠죠. 아, 제 숙제입니다. ^^;


 

CSS, EM, Firebug, Firefox, IE, me2day, opera왕따, 욜라 힘든 웹, 웹표준 아무나 하나, 자꾸 이상하게 렌더링할거지
즐겨쓰는 브라우저는 오페라입니다.
어제는 일찍 자고 지금 일어나서 서핑을 하다가 즐겨사용하는 사이트인 me2day에 들어갔습니다.
뭔가 어색해서, ie6불러봤죠.(이놈은 MS가 오늘 대대적으로 업데이트 한다던데, 조용하군요.)
역시나 변한 게 있는 듯 하군요. 글과 글 사이의 CSS가 ie와 opera사이에 차이가 생긴 듯 합니다.
사용자 삽입 이미지
사용자 삽입 이미지


3자 대면시켜 봅니다. 파폭 나와요.
사용자 삽입 이미지


역시나 따로 노는 오페라인 듯 합니다. 얘가 좀 예민합니다.
불여우랑 친한 개똥벌레(http://www.getfirebug.com/)를 불러다가 진상조사를 시켰습니다.
사용자 삽입 이미지

빨간색으로 표기된 부분이 1.5em 으로 마진을 잡았는데, 오페라에서 다르게 해석한 것 같습니다.

여하튼 어색해요. 어색해요.
  1. miriya 2007.11.06 15:12

    오페라가 살짜코롬 좁은거죠?

    # Delete Reply
    • kenu허광남 2007.11.07 08:48 신고

      눈에 띄게 좁아졌어요.
      갑자기 어제. ^^;
      그 전엔 오페라랑 익스랑 파폭이랑 같았는데요. ㅠㅠ;

      # Delete
CSS, Firebug, layout, live edit, 개똥벌레, 반딧불, 파이어버그
firebug CSS Layout
firebug css layout tab

firebug css layout tab


간만에 올리는 firebug 관련 글입니다. 우측의 Style , Layout , DOM 에서 Layout 으로 했을 경우 좌측 html 태그 선택에 따라서 상단 view 영역의 색상이 표시가 됩니다. 그리고 pixel 단위의 화면 자(screen ruler)도 보이고, 마진margin은 노란색으로 패딩padding은 보라색으로 표시됩니다.
Layout 에 해당 숫자는 변경할 수 있고, 라이브로 위에 변경내용이 보입니다. 물론 서버에서 돌아가는 코드는 여기서 얻어진 수치를 바탕으로 직접 수정해야겠죠. ^^;

조사하면 다 나와 버튼 아시죠. 개똥벌레(firebug) 이미지 옆에 Inspect , 이거 클릭하고 상단에 마우스를 움직일 때마다 해당영역의 코드와 Layout을 볼 수 있습니다.

간만에 UI 작업하면서 짧게 포스팅합니다. 

+ Recent posts