-webkit-text-size-adjust: 160%;
CSS
- 아이폰 모바일웹에서 Content영역 잘보이게 하기 2011.01.02 (2)
- 모바일 브라우저의 디버깅 콘솔 2010.02.11
- ie8 beta2 포기합니다. 2009.01.08 (6)
- CSS 작업 2008.12.14 (10)
- HTML 개발 좀 깐깐해져볼까요. 2008.05.31 (2)
- [shopgallery] 컨텐츠 동적으로 바꾸기 2008.01.02
- [shopgallery] 개발 구조 2008.01.01
- me2day css가 변했나 2007.11.06 (2)
- 파이어버그 CSS 레이아웃 2007.09.27
아이폰 모바일웹에서 Content영역 잘보이게 하기
모바일 브라우저의 디버깅 콘솔
설정에서 브라우저 정보에 보면 개발자용이라고 표시됩니다.
콘솔 디버그 옵션을 활성화하면 됩니다.
오류가 생긴 경우 더 자세한 정보를 볼 수 있습니다.
HTML/JavaScript/CSS 의 오류가 보여집니다.
모바일웹 개발시 유용하게 쓰일 것 같습니다.
ie8 beta2 포기합니다.
설치할 때 추천 사이트 옵션을 켜놓았습니다.
빠른 설정 사용이라고 해서 Live 시리즈로 묶어놓는 옵션을 선택할 수 있습니다.
브라우저의 연결 표시줄에 추천 사이트 항목이 생겼습니다. https://ieonline.microsoft.com/slice.aspx 라고 나옵니다.
그러나 오늘은 작업중인가 봅니다. 제대로 동작하지 않는군요.
사실 CSS 렌더링이 생각과 너무 다르게 작동하기 때문에 불편을 느끼고, 언인스톨한 다음에 ie7으로 갔습니다. ie6는 hungapp 다운 때문에 못쓰겠구요.
-
-
중스 2009.01.09 16:20
안녕하세요, 먼저 새해 좋은일 많으시길 바랍니다.
포스팅하신 내용 중에 WebSlice에 추천사이트가 나오지 않는 경우는 저는 경험은 못 해봤는데, 현재 있는 사이트로 비슷한 사이트들을 추천해 주는 기능입니다.
그리고CSS 랜더링이 다르게 되는 부분은 예를 들면 어떤 사이트에서 문제가 있으셨는지 알려주시면 IE8의 문제라기 보다는 CSS 2.1 표준에 맞도록 되었는데 잘 표시가 되지 않는 것인지 확인을 해볼 수 있을 것 같습니다.
끝으로 아시겠지만 IE8의 주소창 옆의 IE7 호환성 버튼을 클릭하시면, 그 사이트는 구버전의 IE 호환 모드로 동작을 해서 불편없이 사용할 수 있다는...
CSS 작업
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
남들은 쉽다고 하던데 저같은 경우는 html, css, javascript가 가장 어렵더군요..
명확하지 않다고 느껴지는데 몰라서 그런건지... -
일하면서 윗분들이 가장 쉽고 단순하니 그런건 나중에 후딱 처리하자고하구선..
다른것부터 시키다가.. 막상 할때되서 시간이 지연되면...개발자들을 이해 못해주는..
부분이기도 하지요.... ;;; 화면만 보구서 이거하나만 해주면되는데..왜못해?...
ㅋㅋㅋㅋㅋㅋ 이건 모..설득을 시킬거리두 안되구... 답답하죠..^^ -
-
써니 2008.12.15 16:21
충분히 믿어 의심치 않습니다.
웹에이전시나 포털에서는 그래서 HTML 표준화 전담팀이 있죠~.
문제는 일반인(?)들은 이게 얼마나 힘든지 전혀 모른다는 것이고... -
lovedev 2008.12.17 00:54
음...저 옆에 두고 모하신거에요....^^;; 도와드렸을 텐데.. 물론 과장님이 몸으로 느끼신게 더 큰 수확이겠죠 :)
HTML 개발 좀 깐깐해져볼까요.
때문에 웹 개발자들은 프로그래머 취급도 못받고 허드렛일꾼으로 대하던 시절이 있었습니다.
하지만 그런 유약한 개발습관에서 벗어나 조금 깐깐해질 필요가 있는 것 같습니다.
자바원의 북스토어에서 본 책 중 인상적인 것 하나가 Refactoring HTML이었습니다.
IBM DW에도 비슷한 류의 글이 올라왔군요.
from: http://www.ibm.com/developerworks/kr/library/wa-inherit1/
프로그래머들의 애매한 결과에 대한 삽질은 누구나 겪는 일이지만 HTML 개발자들이 가장 심하다고 말하면 지나친 생각일까요?
유지보수하는 입장에서 HTML을 다루는 자세와 기법에 대해서 도움이 되는 내용이었습니다.
좋아하는 기획자 중 한 부류는 기획서가 깐깐해서 처음에 답답해 보이지만 프로젝트 후반에 말바꾸지 않고 신뢰감있게 독려하는 분들입니다. 웹개발도 깐깐하게 바꿔보는 것이 어떨까요.
[shopgallery] 컨텐츠 동적으로 바꾸기
[shopgallery] 개발 구조에서 일단 화면에 보이는 것을 만들었습니다. 이렇게 만들어진 화면에 컨텐츠를 자유롭게 바꾸기 위해서는 동적으로 html 태그가 만들어져야 합니다.
데이터가 들어가는 부분 외의 style영역은 따로 파일을 만들어도 좋을 듯 합니다.
다음과 같이 코드가 분리됩니다.
style.css
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
<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
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
[shopgallery] 개발 구조
WoC를 통해서 멘토 역할을 합니다만, 한 번도 이런 것은 해 본 적이 없어서 정확히 무엇을 해야하는지 모르겠습니다. 그냥 옆에서 감 놔라 배 놔라 훈수 두는 것도 멘토링이라고 할 수 있겠지만, 맘에 안듭니다.
각설하고, 애플리케이션의 구조는 3가지로 나눌 수 있습니다.
- 화면 (UI)
- 엔진 (비즈니스 로직)
- 데이터 (DB)
두 명 이상 개발하는 경우, 화면과 데이터로 나눠서 개발하는 방법과 업무별로 나눠서 개발합니다. 요즘같이 서버와 클라이언트로 각기 특화된 기술을 필요로 하는 경우 데이터 인터페이스를 맞춘 뒤에 나뉘어서 개발합니다. 즉 openAPI로 데이터를 빼오는 작업과 그렇게 만들어진 데이터를 화면에 보여주는 작업으로 양분할 수 있습니다.
엔진은 화면과 데이터를 연결해주는 역할을 합니다. 엔진을 역할에 따라 세분화할 수도 있는데, 그것은 애플리케이션의 규모나 개발자의 역량에 따라 달라집니다.
shopgallery의 기본데이터
이 애플리케이션의 목적은 상품을 블로그의 위젯에 보여주고 지름신이 발동하도록 길을 열어주는 것입니다. 즉 다음과 같은 데이터가 필요합니다.
- 상품이미지
- 상품명
- 가격
- 링크
이 데이터를 복수개로 가져갈 것이냐 하는 것은 확장된 개념으로 보겠습니다.
일단 하나의 상품이라도 보이게 되면 가장 기본적인 지름도구로서의 자격은 갖춘 것입니다.
CSS를 이용해서 레이아웃도 코딩하고 싶지만, 위젯 특성상 얹혀지는 페이지의 DOCTYPE 에 따라 예상치 못한 결과가 올 수 있기에 테이블구조의 형식으로 일단 만들어 봅니다.
<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>

<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와 오페라에서 잘 보이는 것이겠죠. 아, 제 숙제입니다. ^^;
me2day css가 변했나
어제는 일찍 자고 지금 일어나서 서핑을 하다가 즐겨사용하는 사이트인 me2day에 들어갔습니다.
뭔가 어색해서, ie6불러봤죠.(이놈은 MS가 오늘 대대적으로 업데이트 한다던데, 조용하군요.)
역시나 변한 게 있는 듯 하군요. 글과 글 사이의 CSS가 ie와 opera사이에 차이가 생긴 듯 합니다.


3자 대면시켜 봅니다. 파폭 나와요.

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

빨간색으로 표기된 부분이 1.5em 으로 마진을 잡았는데, 오페라에서 다르게 해석한 것 같습니다.
여하튼 어색해요. 어색해요.
파이어버그 CSS 레이아웃

firebug css layout tab
간만에 올리는 firebug 관련 글입니다. 우측의 Style , Layout , DOM 에서 Layout 으로 했을 경우 좌측 html 태그 선택에 따라서 상단 view 영역의 색상이 표시가 됩니다. 그리고 pixel 단위의 화면 자(screen ruler)도 보이고, 마진margin은 노란색으로 패딩padding은 보라색으로 표시됩니다.
Layout 에 해당 숫자는 변경할 수 있고, 라이브로 위에 변경내용이 보입니다. 물론 서버에서 돌아가는 코드는 여기서 얻어진 수치를 바탕으로 직접 수정해야겠죠. ^^;
조사하면 다 나와 버튼 아시죠. 개똥벌레(firebug) 이미지 옆에 Inspect , 이거 클릭하고 상단에 마우스를 움직일 때마다 해당영역의 코드와 Layout을 볼 수 있습니다.
간만에 UI 작업하면서 짧게 포스팅합니다.