위의 그림을 다운받아서 활용하시면 됩니다. 표시는 작게 되겠지만 사실은 크다는거.
많이 활용하세요.
'분류 전체보기'에 해당되는 글 1105건
- 2007.08.04 윈도우 비스타 무료버튼 또는 아이콘
- 2007.08.04 [HTML] 투명 PNG파일을 로딩시 회색배경 처리되는 문제.. 1
- 2007.08.04 [HTML] 롤오버를 간단하게 구현하는 법. 6
- 2007.08.04 [내가 정리한] 헤드퍼스트 HTML with CSS & HTML
- 2007.08.04 CSS로 테이블 라운딩 처리하기 예제
- 2007.08.04 [태그] 웹에서 사용하는 136까지 색상 이름표
- 2007.08.04 해수욕장보다 해외여행이 싸다더라..
- 2007.08.01 [책추천 및 후기] Head First HTML with CSS & XHTML : 웹2.0 시대의 웹 표준 학습법 4
- 2007.08.01 심형래 감독 '디워' 미국 내 반응
- 2007.07.28 애플, 새로운 아이맥 키보드 디자인 유출
위의 그림을 다운받아서 활용하시면 됩니다. 표시는 작게 되겠지만 사실은 크다는거.
많이 활용하세요.
투명 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지우고 바꾸시면되요)★>
|
동해안 해수욕장에 사람들이 많이 몰려드는 요즘일텐데..
하루 숙박비가 무슨 호텔만큼 비싸다더라..
25만원을 부른다나. 그냥 놀러간건데 잠은 자야겠는데,
생각지도 못하게 25만원을 부른다면?? 그래도 자야지
길바닦에서 잘 수는 없는 노릇이 아닐까? 그래서 가격
막 부르고 그러는거 같은데..
숙소비는 그렇다치고 요즘 그런데 나가면.. 먹는것도 몇배로 받아먹고
물도 있어야지.. 해수욕하면 사워해야지.. 텐트가져갔으면 텐트쳐야지..
근데 이게다 $$돈이 든다는것.. 그것도 바가지로..
이래저래 비행기타고 동남아 여행을 다녀오면
오히려 경치도 좋고 대우도 좋고 기분도 좋고..
예나 지금이나 한국은 바가지요금이 문제다... 어떻게든 돈만 받아먹으면 그만이라고 생각을 하니..
하루 숙박비가 무슨 호텔만큼 비싸다더라..
25만원을 부른다나. 그냥 놀러간건데 잠은 자야겠는데,
생각지도 못하게 25만원을 부른다면?? 그래도 자야지
길바닦에서 잘 수는 없는 노릇이 아닐까? 그래서 가격
막 부르고 그러는거 같은데..
숙소비는 그렇다치고 요즘 그런데 나가면.. 먹는것도 몇배로 받아먹고
물도 있어야지.. 해수욕하면 사워해야지.. 텐트가져갔으면 텐트쳐야지..
근데 이게다 $$돈이 든다는것.. 그것도 바가지로..
이래저래 비행기타고 동남아 여행을 다녀오면
오히려 경치도 좋고 대우도 좋고 기분도 좋고..
예나 지금이나 한국은 바가지요금이 문제다... 어떻게든 돈만 받아먹으면 그만이라고 생각을 하니..
[예스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;
이렇듯 한 줄로 사용이 가능하다.
D-WAR
반응이 장난이 아니다.
대박날거라는 반응이 대세다..
화려한 그래픽이 충분히 승산이 있다고 하는데, 이 영화의 미국 배급사인 프리스타일 측에서도
2억달러짜리 영화라고 했다고 한다. 유수의 배급경험이 있는 배급사측에서도 이렇게 장담을 하는 상황이고
예전에 영화 괴물도 미국 개봉때 100관에서 개봉했다는데 미국내 1700관에서 개봉한다는 것도 그렇고
CG가 세계 최고 수준이라는데 세계최고 CG팀인 ILM이 아니면 만들 수 없을 정도의 CG를 우리나라 기술로
재현했다는 것도 놀랍고.. 얼마전에 개봉한 헐리웃영화 트랜스포머와 비교했을때도 전혀 손색이 없다고 한다.
아무쪼록 6년동안 3백억들여서 만든 우리영화 부디 대박나길 바란다.
..이영화 한국에선 벌써 2007년 최고 예매율을 기록했단다..
반응이 장난이 아니다.
대박날거라는 반응이 대세다..
화려한 그래픽이 충분히 승산이 있다고 하는데, 이 영화의 미국 배급사인 프리스타일 측에서도
2억달러짜리 영화라고 했다고 한다. 유수의 배급경험이 있는 배급사측에서도 이렇게 장담을 하는 상황이고
예전에 영화 괴물도 미국 개봉때 100관에서 개봉했다는데 미국내 1700관에서 개봉한다는 것도 그렇고
CG가 세계 최고 수준이라는데 세계최고 CG팀인 ILM이 아니면 만들 수 없을 정도의 CG를 우리나라 기술로
재현했다는 것도 놀랍고.. 얼마전에 개봉한 헐리웃영화 트랜스포머와 비교했을때도 전혀 손색이 없다고 한다.
아무쪼록 6년동안 3백억들여서 만든 우리영화 부디 대박나길 바란다.
..이영화 한국에선 벌써 2007년 최고 예매율을 기록했단다..
 
|
