위의 그림을 다운받아서 활용하시면 됩니다. 표시는 작게 되겠지만 사실은 크다는거.
많이 활용하세요.
투명 PNG 파일로 만들더라도 웹 브라우저에서 보면 회색배경으로 처리되는 문제가 발생한다.
다음은 이것을 해결해 주는 스타일시트와 자바스크립트 코드이다.
// 스타일시트 정의
<style type="text/css">
<!--
.png24 {
tmp:expression(setPng24(this));
}
-->
</style>
// PNG 파일 표시 스크립트
<script type="text/javascript">
<!--
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
obj.src='';
return '';
}
-->
</script>
// 이미지 코드에 스타일시트 호출
<img src="ddalchi.png" border="0" class="png24">
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가 로드된다. 롤오버를 이렇게 간단하게 구현할 수도 있는 것이다.
나중에 스스로 보려고 정리해본 것이므로.
다른사람들에게는 도움이 될 지 모르겠다.
내나름대로 축약한 내용들이 많고.. 아주 잘 알고있는내용은
과감히 생략했으므로.. 필요한 사람만 보는것이 좋을 것 같다.
#########################################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;
}
<!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>
이미지를 쓰지 않고 위와같은 처리가 가능하다는게 신기하지 않은가??
보통은 저렇게 처리하기 위해서 네개의 귀퉁이를 그림파일로 저장해서 불러다가 쓴다.
지금도 그러한 방식을 많이 이용하는 것으로 알고 있는데... 이방법을 응용하면 그러한 번거로움을 많이 줄일 수 있을 듯하다. 선택은 각자의 몫이다.
136 browser colors with names ; 136가지의 색상 이름표 태그로 글 올리실때 글 색깔 바꾸고 싶으면 색상이름밑에 영어 글씨보이시죠 아니면 16진수밑에를 클릭해서 복사해서 바꿔주시면되는데... 예 참고로<★font size=3 (글씨 싸이즈..숫자가 크면 글씨가 크답니다) color=Red (색상 주소:Red지우고 바꾸시면되요)★>
|
[예스24에서 정보보기]
http://www.yes24.com/Goods/FTGoodsView.aspx?goodsNo=2104548&CategoryNumber=001001003001001
책안의 수많은 일러스트가 책을 지루하지 않게 만든다. 물론, 약간 산만한 감은 있다.
이책은 정석이나 바이블같은 전형적인 메뉴얼같은 책은 아니다. 따라서 이책에서 다루지 않은 내용도 꽤 있을 것이다.
그러나 어려운 내용이 지루하게 나열된 책을 사서 몇장 넘기고 말 책이라면 차라리 좀 쉽더라도 끝까지 볼 수 있는 책이 낫지 않을까 하는것이 내 생각이다.
나는 이책을 일주일동안 틈틈히 보고 내용을 소화해 냈다. 물론 그 이후로 생각나는대로 테스트해보면서 기억나지 않는 내용은 틈틈히 참고 했지만, 이러기에도 이책은 충분한 레퍼런스 역할을 해냈다!!
그냥 맛배기로 도움이 됐던 부분을 아래에 조금 옮겨보겠다.
그리고 배경을 위한 속기법도 잊지 마세요.
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;
이렇듯 한 줄로 사용이 가능하다.
|