아이폰 웹페이지 이것만 알아도 유용하다.
<head></head>사이에 아래의 한줄을 집어넣어보자.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

위의 한줄을 집어넣음으로써 아이폰의 해상도에 적절하게 화면이 표시될 것이다.
간단한 내용이지만 한부분씩 살펴보겠다.

width=device-width;
이부분은 영문 그대로 웹페이지의 너비를 기기의 너비대로 보여주라는 얘기다.
아이폰은 320 x 480의 해상도를 갖고 있으므로 320px에 맞춰주는 역할을 한다.

initial-scale=1.0;
초기화면 로딩시 몇배로 보이게 할 것인가를 지정해주는 부분이다.
당연한 얘기지만 1.0으로 지정하면 1배로 보이게 된다.

maximum-scale=1.0;  1배 까지 확대가능. 즉, 확대 불가를 의미한다.
아이폰은 멀티터치를 이용해서 화면을 맘대로 키우거나 줄일 수 있다.
그러나 때로는 웹사이트가 멀티터치로 화면크기 조절이 안되는걸 볼 수 있는데
이는 바로 이 옵션이 1로 적용되었기 때문이다.

maximum-scale=10.0; 이렇게 지정하면 10배까지 확대가 가능해진다.

user-scalable=0; 이부분은 멀티터치를 확용한 확대를 허용할 것인가의 여부를
결정하는 부분이다. 위에서 maximum-scale의 숫자를 키우면 해당 숫자 배수까지
화면이 커질 수 있다고 설명했지만 user-scalable가 0으로 되어있으면 작동하지 않는다.

반대로 user-scalable가 1이 적용되어 확대조절을 허용하더라도
maximum-scale이 1.0으로 되어있으면 화면 확대가 안된다.

 

아래에 예제 하나를 제시한다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=10.0; user-scalable=1;" />

 위의 예제의 설정은 웹페이지를

1) 아이폰 화면에 맞추며,
2) 처음 크기는 1배로,
3) 그러나 10배까지 키울 수 있다.


아이폰을 위한 웹페이지의 가장 기초적인 부분이지만, 응용해서 좋은 웹사이트를 제작하시길 바랍니다.

Posted by Ozahir
,


HTML에서 물론 자바스크립트를 이용해서 롤오버를 만들어 낼 수 있다.
포토샵에 딸려오는 이미지레디 같은 프로그램을 사용하면 코딩을 직접
하지 않더라도 손쉽게 만들어낼 수 있으나..
그래도 이 손맛이 무시 못한다. 이게 편한때는 얼마든지 많다.
롤오버를 하는데는 복잡한 코드가 필요한 것은 아니다. 얼마든지 간단하게
구현해 낼 수 있는 것이다. 다음의 코드를 참고해 보기 바란다.


<!-- 여러개의 롤오버 이미지를 간단하게 처리 -->
<script language="JavaScript">
<!--
function on(obj) {obj.src = obj.src.replace('_off.gif','_on.gif');}
function off(obj) {obj.src = obj.src.replace('_on.gif','_off.gif');}
//-->
</script>

<!-- script 부분에서 on과 off 일때를 미리 지정해주고 이미지는 뒤에 _on.확장자, _off.확장자만 붙이면 된다.
다음은 이미지 태그에 적용한 예이다.-->
<img src="./img/notice_off.gif"  border="0" onmouseover="on(this)" onmouseout="off(this)" />
<img src="./img/pds_off.gif"  border="0" onmouseover="on(this)" onmouseout="off(this)" />
<img src="./img/freetalk_off.gif"  border="0" onmouseover="on(this)" onmouseout="off(this)" />

대강 보면 감이 오겠지만. img src에서 걸린 gif가 _off로 끝난다. 예를들어 notice_off.gif에 마우스를 올리면
_off부분이 _on으로 바뀌면서 notice_off.gif가 아닌 notice_on.gif가 로드된다. 롤오버를 이렇게 간단하게 구현할 수도 있는 것이다.

Posted by Ozahir
,


나중에 스스로 보려고 정리해본 것이므로.
다른사람들에게는 도움이 될 지 모르겠다.
내나름대로 축약한 내용들이 많고.. 아주 잘 알고있는내용은
과감히 생략했으므로.. 필요한 사람만 보는것이 좋을 것 같다.


#########################################3장 블록 만들기
<ol> :  ordered list
<ul> :  unordered list
<li> : list item
* <ol>과<li>엘리먼트는 항상 같이 사용해야 한다. <li>로 항목을 식별하고 <ol>은 이들을 묶는다.
* 엘리먼트가 다른 엘리먼트 안에 들어가는 것을 중첩(nesting)이라 한다. 예를 들어 <body>안에 <p>...
<dl></dl>, <dt></dt>, <dd></dd> : 정의리스트?? (definition리스트)

#########################################4장

툴팁 <a href="링크" title="짧은 문장(스크린 리더기 쓰는 시각장애자에게 유용하다.)"></a>
<img src="" alt="설명">

목적지 앵커의 착륙지점 지정 : <a id="chai">Chai Tea, $1.85</a>
착륙지점으로 이동 : <a href="index.html#chai">See Chai Tea</a>
맨위로 이동 : <a href="#top">Back to Top</a>

#########################################5장
GIF파일에서 matte를 깔아서 투명그림이나 텍스트를 더 부드럽게 보이게 할 수 있다.
matte의 색을 배경색과 일치시켜라.

#########################################8장

class에 대한 이야기

#green클래스를 사용해서 텍스트를 다음과 같이 녹색으로 변경할 수 있다.
p.greentea{
 color: green;
}

#blockquote엘리먼트에도 적용하려면 다음과 같이 한다.
blockquote.greentea, p.greentea{
 color: green;
}

#.greentea클래스에 있는 모든 엘리먼트가 한가지 스타일을 갖도록 하려면 다음과 같이 하면 된다.
.greentea {
 color: green;
}

#사용할때는 <p class="grean tea">

#충격적인 사실!!
<p class="greentea raspberry blueberry">처럼 여러개의 클래스를 이용할 수 있다.
부가로, 만일 위의 세개의 클래스가 모두 색상을 지정하고 있다면, 마지막에 지정한 색(css에서 가장 아래에 위치하는 색)이 적용될 것이다.


#########################################9장 폰트와 색으로 장식하기(예시만 나열하겠다.)
body {
 font-family: Verdana, Genava, Arial, sans-serif;
 font-weight: bold;
 text-decoration: underline;
 background-color: rgb(80%, 40%, 0%);
 background-color: rgb(204, 102, 0);
 background-color: #cc6600;
 background-color: #c60;
}
em {
 text-decoration: none;
}
em {
 text-decoration: underline overline;
}
h1, h2 {
 font-weight: normal;
 color: #c60;
 border-bottom: thin-dotted #888888;
}
#########################################10장

# line-height: 1.6em; ←이렇게 하면 줄간격이 폰트크기의 1.6배가 된다.



#중첩된 테이블 제목을 위해 css재정의 하기
table table th {
 background-color: white;
}

#리스트의 스타일
li {
 list-style-type: disc;
}
li {
 list-style-type: circle;
}
li {
 list-style-type: square;
}
li {
 list-style-type: none;
}

#커스텀 마커
li {
 list-style-image: url(images/backpack.gif);
 padding-top: 5px;
 margin-left: 20px;
}

p#guarantee {
 font-family: "문체부 쓰기 흘림체";
 color: #444;
 line-height: 1.9em;
 border-color: white;
 border-width: 1px;
 border-style: dotted;
 background-color: #a7cece;
 padding: 25px;
 padding-right: 180;
 margin: 30px;
 margin-right: 250px;
 background-image: url(11.gif);
 background-repeat: no-repeat;
 background-position: top right;
}


p.guarantee이런거나
p#guarantee이런게 뭐가다르게?? class와 id의 차이..

#########################################11장

#elixirs {
 width: 200px; <---컨텐츠의 넓이만을 명시한다. 높이는 설정도 가능하지만
         작게 설정하면 잘릴 수 있으므로 기본값인 auto가 되도록 명시하지 않는다.

}

div내부의 h2에 대한 속성을 넣으려면

div h2 {
 color: black;
}

elxirs라는 엘리먼트의 h2에 대한 속성을 넣으려면

#elixirs h2 {
 color: black;
}

***줄여쓰는법

margin: 0px 20px;
border: 1px solid #007e7e;
background: white url(images/cocktail.gif) repeat-x;
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;

p#guarantee {
 font: 15px/1.9em "문체부 쓰기 흘림체" #444;
 border: 1px dotted #007e7e;
 background: #a7cece url(11.gif) no-repeat;
}

#elixirs a:link {
 color: #007e7e;
}
#elixirs a:visited {
 color: #333;
}
#elixirs a:hover {
 color: #0d5353;
}
이런식으로 a:hover라고는 적지만 이를 불러서 사용할 때 hover를 명시하지 않는다.
이건 브라우저가 알아서 하는 것이다. 이를 pseudo-class라고 한다.

#########################################12장
인라인 엘리먼트 두개가 인접할 경우.
양쪽의 마진을 더한만큼 떨어진다.

블록 엘리먼트 두개가 인접한 경우.
합쳐진 마진의 높이는 두개 중에서 큰 값의 마진이 높이가 된다.

길게 적을 필요가 없다.
body{margin:0px;} <--주위의 마진0으로 설정.

#header{}
#main{}
#sidebar {
 float: right;
}
#footer {
 clear: right; <-- footer의 오른쪽에는 떠다니는 콘텐츠가 허용되지 않는다는 것을 명시함.
}

* gutter: 도랑이란 뜻이지만, 인쇄에서는 '여백'으로도 쓰임

컨텐츠를 중앙으로..
#allcontent {
 width: 800px
 padding-top: 5px;
 padding-bottom: 5px;
 background-color: #675c47;

}

Posted by Ozahir
,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<style type="text/css">
body{background-color: #FFF;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ padding:20; margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>

<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
 <p>라운딩 처리 예제</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

</body>
</html>

사용자 삽입 이미지
이미지를 쓰지 않고 위와같은 처리가 가능하다는게 신기하지 않은가??
보통은 저렇게 처리하기 위해서 네개의 귀퉁이를 그림파일로 저장해서 불러다가 쓴다.
지금도 그러한 방식을 많이 이용하는 것으로 알고 있는데... 이방법을 응용하면 그러한 번거로움을 많이 줄일 수 있을 듯하다. 선택은 각자의 몫이다.

Posted by Ozahir
,


[예스24에서 정보보기]
http://www.yes24.com/Goods/FTGoodsView.aspx?goodsNo=2104548&CategoryNumber=001001003001001

사용자 삽입 이미지


이책은 HTML을 모르는 사람도 보기 쉽게 되어있다.
맨처음에는 독자로 하여금 메모장을 열게 만들고, HTML에 조금이라도 관심이 있었다면 알법도 한 테그들을 하나둘씩 다시 설명한다.
개인적으로 HTML을 조금씩이나마 공부하면서 궁금함으로 남아있는것이 있었는데 HTML이 어떻게 발전해 나갔느냐 하는 것이었다. 이책은 이에 대해서도 지루하지 않게 간결하면서도 이해하기 쉽게 설명해준다. 역사를 위한 역사가 아닌, HTML을 활용하는 유저들을 위해서 그야말로 활용을 위한 역사를 제시한다.
이책의 제목이 HEAD FIRST HTML with CSS & XHTML 이듯이 초반에는 HTML의 기초에 대한 설명으로 시작해서 eXtensible HTML인 XHTML, 그리고 웹표준이 무엇이고 이에 부합하기 위해서는 어떻게 해야 하는가에 대해서도 다루고 있다.
그리고 책의 나머지 절반 이상은 CSS를 설명하는데 할애하고 있다. 이것이 개인적으로는 맘에드는 부분인데, CSS는 HTML의 노가다성(?)에 대해서 서식적인 틀을 제공해주는 부가적 언어라고 할 수 있다. 관심은 있었지만 딱히 배워두어야할 필요성까지는 못느꼈던터였지만 개인적으로 하나둘 작성하게 되는 웹페이지도 많아지게 되면서 일일이 테그를 집어넣어가며 원시적으로 만들어가는 페이지에 염증도 느끼고 이제는 표준이 뭔지도 알고 시대에 부응해야겠다는 마음에 선택한 책들중에 하나가 이것이었다.

컴퓨터좀 다뤄보고 번역서를 좀 봐온 사람이라면 O'REILY라는 출판사는 이미 익숙할 것이다.
헤드퍼스트 시리즈.. 이번에 처음 접했는데 보고난 소감, 이 시리즈물 추천!!

책안의 수많은 일러스트가 책을 지루하지 않게 만든다. 물론, 약간 산만한 감은 있다.
이책은 정석이나 바이블같은 전형적인 메뉴얼같은 책은 아니다. 따라서 이책에서 다루지 않은 내용도 꽤 있을 것이다.
그러나 어려운 내용이 지루하게 나열된 책을 사서 몇장 넘기고 말 책이라면 차라리 좀 쉽더라도 끝까지 볼 수 있는 책이 낫지 않을까 하는것이 내 생각이다.
나는 이책을 일주일동안 틈틈히 보고 내용을 소화해 냈다. 물론 그 이후로 생각나는대로 테스트해보면서 기억나지 않는 내용은 틈틈히 참고 했지만, 이러기에도 이책은 충분한 레퍼런스 역할을 해냈다!!

그냥 맛배기로 도움이 됐던 부분을 아래에 조금 옮겨보겠다.

그리고 배경을 위한 속기법도 잊지 마세요.

background-color: white;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;

이렇게 세줄에 쓸 것을..

background: white url (images/cocktail.gif) repeat-x;

이렇게 한줄로 축약해서 쓸 수 있다.

padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px;

이렇게 네줄로 쓸 것을..
top방향에서 시계방향으로

padding: 0px 20px 30px 10px;
이렇듯 한 줄로 사용이 가능하다.

 

Posted by Ozahir
,