<![CDATA[html/css]]> ko Fri, 29 Aug 2008 09:17:37 +0900 448 <![CDATA[특수문자(&문자) 코드값]]>   HTML 강의라고 하기에는 빈약해서 여기에 올려도 되는지는 모르겠습니다.


 웹페이지에서  특수문자 (& © ® €  와 같은..)   코드값을 구할 수 있는 사이트입니다

 [ 바로가기 ]

 공백은 &nbsp;  저작권관련 표시인  © 는 &copy;  와 같은 코드값을 구할수 있습니다.

 원하는 문자를 클릭하면 상단  입력칸에 해당값이 출력됩니다.

 IE 사용자는 자동으로 코드가 클립보드로 복사되며, 그외 브라우저 사용자는 직접 복사하셔야 됩니다.



 K-20080609-401924.png

]]> Mon, 09 Jun 2008 11:17:06 +0900 <![CDATA[팁이라고 할 수 없는 [이미지안투명박스]]]>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>투명만들기^^</TITLE>
  <style type="text/css">
  .img_con
  {
 position:relative;
 margin:1px;
 float:left;
 width:220px;
 height:190px;
 z-index:54;
  }
  .r_ima { position:absolute; }
 .text_box {
  position:absolute;
  width:100%;
  height:17px;
  margin-top:170px;
  _margin-top:173px;
  padding-top:3px;
  background-color:#000000;
  filter:Alpha(opacity:50);
  opacity:0.5;
  font-size:8pt;font-family:돋움;
  color:#ffffff;
  overflow:hidden;
  text-align:center;
  z-index:55;
    }

  </style>
 </HEAD>

 <BODY>
 <div>
<div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://www.3aok.com/images/888.gif" width="220" height="190">
    <div class="text_box">제로보드에서 그누보드</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://www.donga.com/photo/news/200712/200712100243.jpg" width="220" height="190">
    <div class="text_box">소녀시대 이승철과</div>
 </div>

 <div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>
 <div class="img_con">
  <img class="r_ima" src="http://common.pcbee.co.kr/newimg/2006/gallery/t_wallpaper1.jpg" width="220" height="190">
    <div class="text_box">풍경화 그림</div>
 </div>

 </div>


 </BODY>
</HTML>

filter alpha를 이용했습니다. FF나 Opera에서는 안되므로 꽁수를 썻습니다.
그림크기는 항상 220 에 190을 유지해야하며
div는 위와같은 형식만 취해주면 됩니다.
div나 이미지크기를 변경할경우 자동으로 위치를 맞춰주게 하려고했는데..
당장 필요한 식으로 만들어서 그렇게는 안해봤습니다 ^^;
초보라 css가 불필요한게 있을지도 모릅니다.
고수분들께서는 잘도와주시면 좋겠습니다 ^^

그림 div.img_con 을 100개를 넣든 8개를 넣든 자동으로 줄바꿈은 됩니다.

FF+IE 다됩니다.

]]> Sun, 23 Dec 2007 03:13:27 +0900 <![CDATA[드림위버에서 나모처럼 셀관리.]]>

안녕하세요
질문있어요.
왜 나모에서보면 셀선택하여 위를 지운다던지 전체를 지운다던지
그런게 있잖아요 드림위버에서는 어떻게 써야하나요? css스타일로 지정해야하나요?

]]> Wed, 05 Dec 2007 20:11:09 +0900 <![CDATA[css 간단한 박스 레이아웃입니다.]]>

test.jpg

기초적인 박스 모델입니다.
참고 하실분들은 받아서 살펴보세요.

]]> Wed, 21 Nov 2007 14:00:36 +0900 <![CDATA[[절대초보용] css 클래스 기초]]>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>smilecnu div layout</title>
<style type="text/css">
h1 {color:red;}
div h1 {color:green;}
#test h1 {color:yellow;}
</style>
<body>

<h1>안녕하세요 h1 입니다</h1>
<div><h1>안녕하세요 div안에 있는 h1 입니다</h1></div>
<div id="test"><h1>저도 div안에 있지만 #기호를 이용해 저 만의 속성을 가졌어요</h1></div>
</body>
</html>

결과값
안녕하세요 h1 입니다
안녕하세요 div안에 있는 h1 입니다
저도 div안에 있지만 #기호를 이용해 저 만의 속성을 가졌어요


웹2.0에서 박스모델을 통해 웹 전체의 레이아웃을 짜게 되면서.
각각의 박스에 이용하려는 클래스에 대한 개념을 정확하게 이해해야할 필요성이 생긴 것 같습니다.
오늘은 해당 태크안에서 무엇을 물려받을지(?)에 대해 배운 것을 적어볼려고 합니다.

h1 {color:red;}
h1 이라는 속성에 간단히 글자색을 빨강으로 지정했습니다.

<div><h1>안녕하세요 div안에 있는 h1 입니다</h1></div>
위에 있는 h1의 경우 div라는 박스안에 들어가있습니다.
만약 외부에서 사용하고 싶은 h1의 색깔과 div안에서 사용하고 싶은 h1의 색깔이 다르다면
div만을 위한 h1을 만들어 주어야 하겠죠?
아무설정도 하지 않고 위처럼 사용하면 당연히 h1의 속성을 그대로 이용하여 red 색으로 표현됩니다.
하지만 div라는 박스안에서 h1을 새롭게 정의해봅니다.
div    h1 {color:green;}
부모, 부모안에 있는 자식이름
이렇게 하여 div라는 박스안 있는 h1을 새롭게 탄생시켰습니다.
위의 경우 div박스 안에서만 green 으로 작동합니다.
만약 <p><h1>이것도 green 일까요?</h1><p>  아닙니다.  평범한 h1의 속성대로 그냥 red 입니다.
만약 위의 경우도 green을 사용하려면
p h1 { color:green;} 이라고 새롭게 정의를 내려주셔야 합니다.


문제가 생겼습니다,
박스는 여러개 입니다. 그렇다면 div로 만들어진 박스는 많을테고. 그안에 h1을 자주 사용하게 됩니다.
만약 다른 박스에서는 h1을 썼을 때 다른 색을 이용하고 싶어집니다.
이럴 경우 , 각각의 부모에게 독립적으로 값을 부여할 수 있습니다.
만약 2번째 박스에 사용된 div에 이름을 new라고 부여한다면. 그리고 new라는 부모가 사용하는 h1은 노란색이라면.
#test h1 {color:yellow;}
게 설정하면 됩니다.










]]> Sat, 03 Nov 2007 10:11:41 +0900 <![CDATA[page에 웹페이지의 보드(게시판 ) 삽입]]>  2강. 단원, 절, 페이지
http://218.37.27.142/~lectora/chung/lec_02/lec_02.html

 
※ 방법은 2가지 인데요..

 1. 렉토라에서 게시판 header 와 footer부분을 만드시고 게시판 설정에서 header 와 footer부분을 삽입하여 사용하는 방법
   (다소 번거롭고 어려울 수 있습니다)

 2. iframe방식으로 삽입하는 방법입니다.

    가. 게시판(보드)를 만드셨으면
    나. 렉토라에서 작품을 만드시구요
    다. 게시판을 넣을 페이지를 만드셔서 추가>객체>외부 HTML 추가 하시고

       <외부 HTML 객체 속성>에서 <객체이름> 정하시고 <객체형식>은 <다른것>하시고     
      <사용자 HTML> 필드에 아래 내용을 삽입합니다.(물론 복사해서 붙여넣으셔도 되구요)

      iframe 태그를 사용해서 보드를 첨부 그림과 같이 삽입하시면 됩니다. 
      위에서  소스 안에 들어가 주소(src='http://  만드신 게치판 주소' )를 바꾸어 넣으시면 됩니다

    im4.jpg

     -  결과물

    board.jpg

]]> Wed, 24 Oct 2007 18:32:53 +0900 <![CDATA[표안의 레이어 고정좌표 풀기]]> <table border="1" cellspacing="0" bordercolordark="#F7F7F7" bordercolorlight="#F7F7F7" bordercolor="#F7F7F7" cellpadding="5" width="900" align="center">
    <tr>
        <td><b>김화시즌2 | 나귀타기 | 커뮤니티 | 프리뷰(구P2P)&nbsp;| 하드웨어존 | 소프트웨어존</b></td>
    </tr>
    <tr>
        <td bgcolor="#FFFFCC" style="position:relative;left:0px;top:0px;">
            <div id="layer1" style="width:200px; height:200px; position:absolute; left:0px; top:0px; z-index:1;">
                <p>dddd</p>
            </div>
</td>
    </tr>
</table>

td자체에 position:relative를 줌으로써 부모레이어가 필요없이 동등한 역활을 해줍니다.
나모웹에서 수정시 테이블이 꼬이지 않으므로 좀더 쉬운 편집을 할 수 있습니다.]]> Fri, 14 Sep 2007 21:50:19 +0900 <![CDATA[CSS 사용시 익스플로러 버그 해결하기.]]> 보통 CSS를 사용하면 파폭, 사파리, 오페라에서는 잘 보이는데 IE에서는 깨진다거나 IE7까지는 맞출 수 있지만 IE6까지 맞출 방법이 없다거나 그렇다고 IE6에다 맞추면 다른 브라우저에서 전부 깨져보인다던가 하는 난감한 일이 발생합니다. 그런 경우를 위한 팁을 적어보겠습니다.

***HTML명령어 if IE 와 COMMENT***

if IE와 COMMENT가 무엇인가요?

 두 명령어는 익스플로러에서만 지원하는 특수 명령어입니다. 다만 if IE는 웹표준 검사 시에 주석으로 인식 되어 통과가 되지만 comment는 비표준 태그에 해당하기 때문에 얄짤없이 테스트에 탈락하게 되니 웹표준 테스트에 신경을 쓰시는 분이라면 다른 종류의 방법. 이를테면 CSS핵 등을 사용하시길 권해 드립니다.

 if IE는 HTML코드 사이에 IE에서만 작동하는 코드를 포함시킬 수 있는 명령어입니다. 기본적으로 주석의 형태를 가지고 있기 때문에 다른 브라우저에서는 이 명령어가 포함된 문장은 실행이 되지 않습니다. if IE가 더욱 마음에 드는 점이라면 익스플로러의 버전별로 다 명령어를 설정해 줄 수 있다는 것이지요.

 COMMENT는 if IE와는 반대 되는 성격을 가진 명령어입니다. if IE가 쓰인 행이 IE에서만 인식이 되고 기타 브라우저에서는 주석으로 인식해서 비활성 처리가 되는 것에 반해 COMMENT는 IE 전용 주석 설정태그로써 이 태그가 사용된 행은 IE에서는 주석으로 인식되지만 기타 브라우저에서는 COMMENT를 비표준 태그로 인식해서 COMMENT 안에 들어간 내용을 전부 실행해 버리지요.

어떻게 사용하나요?

if IE 명령어는 이런 식으로 사용합니다.
<!--[if IE]>

IE 유저에게만 표시할 내용

<![endif]-->


버전별로 따로 설정을 할 수도 있습니다.
<!--[if IE 6]>
IE6 유저에게만 표시할 내용
<![endif]-->

같은 방법으로 <!--[if IE 7]>이라고 하면 IE7 유저에게만 보이겠지요?


comment 명령어의 사용법은 더 쉽습니다.
<comment>
기타 브라우저 사용자에게만 표시할 내용
</comment>

실제로 사용되는 사례를 가르쳐 주세요.

각 브라우저 별로 전혀 다른 페이지를 보여주는 것도 물론 가능하기는 합니다만 저는 각 브라우저별로 다른 CSS를 사용하는 데에 많이 사용합니다.

이를테면 이런 경우입니다.
<style>
.test { font-weight:bold; }
.test_IE6 { text-decoration:underline; }
.test_IE7 { color:#CCCCCC; }
</style>

<html>

<!--[if IE 6]>
<div class = "test_IE6">
<![endif]-->

<!--[if IE 7]>
<div class = "test_IE7">
<![endif]-->

<comment>
<div class = "test">
</comment>

이 글자가 어떻게 보이십니까?
</div>

</html>



이 코드를 브라우저 별로 실행시켜 보시면 IE6에선 밑줄이, IE7에서는 글씨가 회색으로, 파이어폭스 등 기타 브라우저에서는 글씨가 굵게 보일겁니다. 이런 식으로 브라우저별로 다른 CSS를 설정해 줄 수가 있는 것이지요. 그 중에서도 버그 상습범인 IE는 이런 식으로 CSS 클래스 자체를 다르게 주어서 격리를 시키는 것이 최고이지요.




참고할만한 사이트 : http://www.quirksmode.org/css/condcom.html
]]> Tue, 28 Aug 2007 22:48:47 +0900 <![CDATA[폼방식으로 데이터를 넘길 때...]]>
폼전송방식으로 특정 사이트로 데이터를 전송해 주어야 합니다.

그래서 사용한것이

<form name="tmp" method="post" action="데이터 받을 URL">

이런식으로 하였는데요..

이렇게 할 경우 데이터를 받을 URL로 페이지가 이동하게 됩니다.

그런데.. 저는 페이지 이동을 하지 않고

데이터만 넘어가게 하고 싶습니다.

원래 페이지에서는 계속 루프가 돌아가고..

루프가 돌때마다 데이터 받을 URL로 데이터를 쏘고 싶거든요.


방법 아시는분의 소중한 답변을 부탁드리겠습니다.
]]> Thu, 23 Aug 2007 17:12:24 +0900 <![CDATA[HTML/CSS 강의 올리시기전에 꼭 읽어주세요.]]> 1. 강좌를 올리실때 미리보기를 올려주시되 스크린샷을 찍으셔서 파일첨부 기능으로 올려주시기 바랍니다.

2. 강좌에 불펌이라고 적으신분들이 많으신데요, 자신이 작성한 설명에서는 그러한 권한이 있다고 보여집니다.
     그런데 설명도 없이 소스만 있는경우 불펌이라고 하시면 안되겠죠? 불펌이라는 단어는 되도록 자제해주셨으면 합니다.

3. 중복글 및 강좌에 대한 가치(너무 기초단계)가 없는 글에 대해서는 무통보 삭제하도록 하겠습니다.

4. 만약 퍼온 강좌가 있으시다면 반드시 출처를 밝혀 주시기 바랍니다.

5. 질문글, 절대로 올리지 마시기 바랍니다.
    질문글은 웹관련 질문에 해주시기 바랍니다.

6. 수준이 상당히 낮은 글 및 수준이 낮은 글 중 중복되는 글은 임의적으로 무통보 삭제하도록 하겠습니다.
    (수준이 낮은 강좌 하나 정도는 허용됩니다. 그러나 수준이 낮은 강좌가 중복되었을 경우 무통보 삭제 하도록 하겠습니다)

* 가끔 통보 없이 삭제되는 경우가 있습니다.
   그러한 경우는 저의 판단 착오 혹은 무통보 삭제대상인 글이기 때문입니다.
   HTML 게시판 이용안내를 제대로 보시고 통보 없이 삭제되었다면 연락주시기 바랍니다.
]]> Wed, 15 Jan 2003 14:26:14 +0900 <![CDATA[키보드 사용 방지 소스]]> http://my.dreamwiz.com/okys1124/2.htm<head>와 </head>에 삽입하시면 됩니다.

<script language="JavaScript">
<!--

function keypressed() {
alert("키보드를 누르셨군요");
}
document.onkeydown=keypressed;

//-->
</script>
  
  
키보드를 누르셨군요 는 경고창 안에 들어갈 메시지.

예제는 링크해놓았습니다.
]]> Wed, 13 Jun 2007 09:06:20 +0900 <![CDATA[메시지 안뜨는 오른쪽 마우스 금지소스]]> http://my.dreamwiz.com/okys1124/1.htm<body> 태그 안에 oncontextmenu="return false" 만 추가하시면 됩니다.

마우스로 텍스트영역 선택도 할 수도 없게 하려면 ondragstart="return false" onselectstart="return false" 를 더 추가해서
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"> 이렇게 하시면 됩니다.

예제는 링크 해놓았습니다.
]]> Wed, 13 Jun 2007 09:03:58 +0900 <![CDATA[html 웹자료제작,교과목제작[사용법 동영상강좌]]]> html 웹자료제작,교과목제작[사용법 동영상강좌]

1강. 특징, 설치하기 ~~ 누르세요
2강. 단원, 절, 페이지 ~~누르세요
3강. 텍스트와 도형 입력하고 진행 버튼 넣기
4강. 이미지 삽입과 페이지 이동 액션
5강. 애니메이션과 메뉴 삽입
6강. 동영상 삽입하고 컨텐츠 목록 넣기
7강. 오디오 삽입하고 하이퍼링크 넣기
8강. 문서, 수식, IPIX 삽입하기
9강. 동영상, 이미지 캡처하고 진행 표시줄 넣기
10강. 버튼 넣고 활용하기
11강. 액션의 활용과 장면변환 효과
12강. 하리퍼링크와 팝업창의 활용
13강. 작품 마법사와 템플릿 이용하기
14강. 갤러리 활용하기
15강. 컨텐츠 합치기, 파일 내보내기
16강. 평가문제 만들기1(진위형, 다중선택형)
17강. 평가문제 만들기2(단답형, 논술형, 괄호채우기형)
18강. 평가문제 만들기3(연결형, Drag & Drop형, Hot Spot형)
렉토라교재
]]> Fri, 11 May 2007 17:40:10 +0900 <![CDATA[[초간단 팁] 글씨에 음영효과를 주는 태그]]> 음영효과는 마우스로 글자를  드레그 했을 때 보여지는 효과입니다.

흔히 폰트 태그 쓸 때 의 기본 태그에서

<SPAN STYLE="background-color:#000000;">

를 추가 해주시면 됩니다.

예를 들어 검은색 음영에 흰색 글씨를 넣고 싶으시다면 다음과 같이 하시면 됩니다.
-----------------------------------------------------------------------------------------

<font color="#FFFFFF"><SPAN STYLE="background-color:#000000;">nzeo.com</SPAN></font>

------------------------------------------------------------------------------------------

background-color:#000000  <- 이부분을 음영색으로 (ex:빨간색으로 하고싶다면 #FF0000)

font color="#FFFFFF <-이부분을 글자 색으로 (ex:파란색으로 하고싶다면 #0000FF)

nzeo.com <-이부분에 나타낼 내용을

넣으셔서 사용하시면 되겠습니다.

그럼 건강하세요(__)

./files/attach/images/203/1498155/1.gif]]> Wed, 02 May 2007 21:06:31 +0900 <![CDATA[프레임 홈페이지 만들때 유용한 팁]]> 상단 하단 이렇게 2개로 나뉘어진 프레임 홈페이지 만들때~
보통 상단에 메뉴를 두죠?

근데 상단 프레임에 보시면..
상단 프레임에서 아무곳에나 마우스를 클릭한 뒤에 밑으로 쭉 드래그하면 상단 프레임 화면이 밑으로 쭉 내려가버리는 일이 자주 발생합니다.. 공백을 제거해줘도 이런 현상이 나타나는데요.

이럴땐 head와 head 사이에 아래 소스를 삽입해 주시면 됩니다.
아래와 같이 스타일을 넣어주면 기본여백을 없앨 수 있으므로 이런 현상이 사라집니다.



<style>
<!--
body {margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
a:visited {text-decoration: none;}
-->
</style>]]> Sat, 24 Mar 2007 18:39:33 +0900