html - 해당되는 글 8건
메타태그는 홈페이지의 문서정보를 담는 태그입니다.
누가 언제 어디서 제작하여, 어느 서버에 올렸는지 홈페이지의 제작한 정보를 담는 태그입니다.

<meta> 태그는 홈페이지에 대한 일반적인 정보를 나타낼 때 사용하며, 홈페이지 작성자 및 날짜, 그리고 홈페이지 검색시 검색 키워드 등을 지정할 수 있다. 이 곳에서 설정한 내용은 브라우저상에 나타나지 않는다.

<meta name="Author" content="김아무개">
홈페이지를 만든 사람.

<meta name="Keywords" content="ASP강좌">
Altavista 등의 검색 엔진에서 홈페이지를 검색할 때 참조하는 키워드.

<meta name="Description" content="방문해 주셔서 감사합니다. ">
홈페이지에 대한 간략한 설명을 적는다.

<meta http-equiv="refresh" content="10;url='next.htm' ">
10초 후에 'next.htm' 로 이동한다.

<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987 ">
브라우저상에서 한글이 깨져 보이는 경우, 한글의 코드를 지정하면 한글이 깨져 보이는 현상을 개선할 수 있다. 단 Charset을 "ks_c_5601-1987"로 지정하면 완성형 코드만을 볼 수 있다.

<meta http-equiv="Page-Exit" content="RevealTrans(Duration=5, Transition=23) ">
현재 페이지에서 빠져나갈 때 전환 기법을 사용하여 페이지를 닫는다.

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=5, Transition=23) ">
다른 페이지로 넘어갈 때 전환 기법을 사용하여 페이지를 연다.

0 Box in - 네모난 박스가 바깥에서 안쪽으로 만들어지면서 이미지 변환
1 Box out - 네모난 박스가 안쪽에서 바깥쪽으로 만들어지면서 이미지 변환
2 Circle in - 원이 바깥에서 안쪽으로 만들어지면서 이미지 변환
3 Circle out- 원이 안쪽에서 바깥쪽으로 만들어지면서 이미지 변환
4 Wipe up - 이미지의 아래에서 위쪽으로 수직 이동하면서 변환
5 Wipe down - 이미지의 위쪽에서 아래로 수직 이동하면서 변환
6 Wipe right - 이미지의 왼쪽에서 오른쪽으로 수평 이동하면서 변환
7 Wipe left - 이미지의 오른쪽에서 왼쪽으로 수평 이동하면서 변환
8 Vertical blinds - 수직 브라인드가 쳐지는 형태로 이미지 변환
9 Horizontal blinds - 수평 브라인드가 쳐지는 형태로 이미지 변환
10 Checkerboard across - 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생기면서 이미지 변환
11 Checkerboard down - 바둑판 형태의 격자가 위에서 아래로 생기면서 이미지 변환
12 Random dissove - 안개낀 형태로 이미지가 바뀌면서 변환
13 Split vertical in - 왼쪽과 오른쪽 끝에서 중앙으로 수직이동하면서 이미지 변환
14 Split vertical out - 중앙에서 왼쪽과 오른쪽 끝으로 수직 이동하면서 이미지 변환
15 Split Horizontal in - 위쪽과 아래쪽에서 중앙으로 수평이동하면서 이미지 변환
16 Split Horizontal ou - 중앙에서 위쪽과 아래쪽으로 수평이동하면서 이미지 변환t
17 Strips left down - 오른쪽 위에서 왼쪽 아래로 이동하면서 이미지 변환
18 Strips left up - 오른쪽 아래에서 왼쪽 위로 이동하면서 이미지 변환
19 Strips right down - 왼쪽 위에서 오른쪽 아래로 이동하면서 이미지 변환
20 Strips right up - 왼쪽 아래에서 오른쪽 위로 이동하면서 이미지 변환
21 Random bars horizontal - 수평선이 무작위로 생기면서 이미지 변환
22 Random bars vertical - 수직선이 무작위로 생기면서 이미지 변환
23 Random - 임의로 지정됨
Trackbacks 0 | Comments 0
연일 학습후 포스팅이 상당히 지치는 관계로 적당히만 설명해두겠음.
이번엔 이미지 갤러리에 많이 쓰이는 스크립트를 살펴보겠다.
이미지 갤러리의 일반적인 구성은 상단에 큰 이미지를 보여주고 하단에 썸네일식으로 작은 이미지 보여준다.
우리가 하고자 하는 짓거리는 하단의 썸네일 위에 커서를 올리면 큰 이미지로 확대되어 나오는거다.

먼저 해두어야 할 짓거리는... 이미지를 순서대로 이름을 주는 것이다. 000_1.jpg 000_2... 이딴식으로.
그리고 큰 이미지, 작은 이미지를 big, small 폴더로 따로 넣어주겠다.

- 큰 이미지 코드 -
<img src='/big/000_0.jpg' name='BigImg' width='800' height='600 ' vspace='5' id='BigImg'></td>

- 작은 이미지 코드 -
<img name=img0 src='/small/000_1.jpg' width='55' height='41' hspace='5' title='1번' onmouseover=Swap_Img(0)>
<img name=img1 src='/000_2.jpg' width='55' height='41' hspace='5' title='2번' onmouseover=Swap_Img(1)>
..............

- 자바스크립트 함수 -
function Swap_Img(str)
{
    TransStr = eval("document.images.BigImg")
    TransStr.src = "/000_" + str + ".jpg"
}

눈치 빠른 사람은 다 눈치 까셨겠지만. 작은 이미지 코드의 onmouseover 시에 Swap_Image가
작은그림 1의 번호를 들고 가서 큰 이미지 코드의 src 부분을 큰 그림의 같은 그림 1번으로
싹 바꿔줌으로써 간단하게 고급 갤러리 효과를 볼 수 있는 것이다. 함수에서 처리해주는 부분은
저 두 코든데, 큰 그림과 작은 그림 짝을 맞춰주고, 번호를 순서대로 매겨야 하는 노가다 성이 있다.
좀 더 짱돌을 굴리자면, 저장되는 그림명을 배열에 넣어두고 배열로 값을 일치시켜줄수도 있겠다.

응용하면 네이버 메인화면의 쇼핑레이어의 탭효과로써 탭을 선택시 해당탭의 테이블을 바꿔줄수 있고,
옛날 홈페이지에서 많이 뵈는 버튼 선택효과로써 버튼위에 커서 올리면 눌러진 버튼으로 바뀐다던가
하는 여러가지 효과로 응용해 볼 수 있겠다. 하지만 이미지 갤러리로 제일 많이 써먹더라.
그나마도 요즘은 플래쉬가 다 해주지만서도... -_-a 플래쉬를 배울까.
Trackbacks 0 | Comments 0

오늘은 플래시 파일이 웹 페이지에 링크됐을 경우 자동으로 활성화 시키는 방법을 배웠다.
... 무슨 말인지 글로는 감이 잘 안오지만 아무튼 대략적으로 설명하자면.
우리가 YouTube나 MnCast 같은 플래쉬 동영상을 웹페이지에 링크했을 경우 바로 플레이 버튼이 뜨지 않고,
플레이 버튼을 눌렀는데 플래쉬 틀이 선택된 경우를 생각해보면 된다. 이런경우 없으면 대충 유사한거라도.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=6,0,29,0
" width="169" height="167" VIEWASTEXT>
      <param name="movie" value="/a.swf">
      <param name="quality" value="high">
      <embed src="/a.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave
-flash" width="169" height="167">

자... 이와 같은 태그를 동영상 퍼오기로 들고오게 된다. 이걸 그냥 페이지에 삽입하면 위에 설명한 현상이
일어날 것이다. 객체를 클릭하고 나서 플레이해야 하는 현상... -_-a 뭐, 이하 '플래쉬 비활성화'라 칭하자.

이렇게 해결한다. 위의 소스를 document.write로 쓰는 스크립트를 외부 js 파일로 따로 만든다.
document.write('<object classid=........ 중략 '); 소스는 대략 이런 형태가 되겠지.
그럼 위의 태그를 적용할 페이지 상에서는 쓱싹 지우고 <script src="외부JS파일.js"></script>
대신 넣어버린다. 그럼 활성화되어 바로 플레이 버튼을 누를수 있을것이다.

PS. 검색해보니, 이런 귀찮은 짓하기 싫으면 방법은 많다. 파일 하나만 첨부하면 그냥 내부에 태그써도 된다.
      ... 그럼 난 왜 이런 귀찮은 짓을... -_-;;;
Trackbacks 0 | Comments 0
오늘 보너스로 배운 내용은 내용을 숨기는 자바스크립트다.
네이버 게시판을 예로 들어볼까. 덧글을 숨기는 기능을 알고 있는가?
덧글 보기 하면 덧글리스트가 펼쳐진다. 자바스크립트로 똑같이 해줄수 있다.
뭐... 불가능한게 없네 이거. 다음 소스를 보자.

function fnc_View()
{
    if(document.all.Tbl.style.display == "none")
    {
     document.all.Tbl.style.display = "";
    }
    else
    {
     document.all.Tbl.style.display = "none";
    }
}

적용을 위한 핵심 요소는 바로 style.display="none" 이다. 여기에선 table을 사용했다.
자, 그럼 display 요소까지 도달해보도록 하자.
document 객체에서, 테이블 id를 Tbl로 바로 가져올 수 읍다. all을 항상 중간에 끼워줘야한다.
display 요소는 Tbl.style.display에 있으므로 바로 갖다 붙이면 된다.
document.all.Tbl.style.display 요소까지 도달했으면, display엔 어떤게 적용되는가?
= "" 으로 적용하면 된다. 총합해보면... [ document.all.테이블id.style.display="" ] 이거다.

display 요소에 적용되는 값으로는 none, inline, block이 있는데. 이중에 none을 하면 숨겨진다.
곁다리로, inline은 같은 라인에서 보이도록, block은 다른 라인에서 보이도록 해준다. (잘 쓰이는지는...)
display는 따로 설정하지 않는 한 값을 가지지 않는 상태로 개체가 바로 화면상에 보여지는거다.

아무튼 저 fnc_View() 함수로 넘어와서, 어떻게 처리하는가? 간단하다.
저 함수가 호출 됐을때, ....display="none" 으로 숨겨져 있으면 display 요소에 빈값( "" ) 을 주어
보이도록 처리하고, 아니라면 none 으로 바꿔주어 숨기라는 것이다.
테이블의 <td>클릭!</td> 요소에 onClick="fnc_View"를 적용하고 클릭해보면 끝이다.

보너스로... 한가지 더, 우리가 버튼 같은데 마우스 커서를 올리면 손모양으로 커서가 바뀌는 것을 알수있다.
근데, 테이블 같은 경우는 버튼같은 컨트롤 타입 요소가 아니기 때문에 올려봤자 손모양으로 안나온다.
어떻게 처리할까. 버튼처럼 사용할 <td>나 <tr>요소에 style="cursor:hand;" 라고 줘버리자.

보너스 two! 고급.... 까지는 아니고 어느정도 예쁜 게시판을 보면 리스트에서 해당 게시물위에 커서 올리면
커서가 간 게시물만 색상이 변하는 것을 볼 수 있을것이다. 어떻게 처리하는가? 아래와 같다.
<td onMouseOver="this.style.backgroundColor='#000C00'" onMouseOut="this.style.backgroundColor='#ffffff'">
Trackbacks 0 | Comments 0

[ 2008년 3월 18일 과제였던 회원 가입시 유효성 검사하는 자바스크립트 함수. 두번째.]

지난번과 순서는 동일하다. fnc_FormCheck() 함수에 여러가지 유효성 체크 외장 함수들을 걸어놓았다.
버튼을 클릭하면 위에서 부터 차례로 if문을 실행해나가며 유효성 검사를 해준다.
과제로 페이지에 걸어놓은건 총 10가지다.

  1. 아이디 입력란은 공백 불가 , 글자 중간에 공백도 불가, 아이디는 6자리 이상, 아이디에는 특수문자(태그) 사용 불가 예) %, >, < 등등등....
  2. 이름 입력란은 공백 불가 , 이름은 한글만 가능(영어, 숫자는 안됨)
  3. 주민 입력란은 공백 불가 , 주민번호는 숫자만 가능, 앞의 칸 다 채우면 다음칸으로 자동 넘김 추가
  4. 비밀번호 입력란은 공백 불가 , 비밀번호 입력은 6자리 이상, 비밀번호는 오직 영문과 숫자만(한글 안됨) 가능
  5. 4와 동일, 비밀번호와 비밀번호 확인의 두개의 값은 반드시 일치 하여야 함.
  6. selPhone1 태그의 선택 항목이 "선택" 일 경우는 통신사를 선택하세요 라는 경고 박스를 뛰움.
    나머지 입력란 txtPhone1, txtPhone2는 오로지 숫자만 (당연히 공백 검사 포함) 가능하고 최대 4글자 까지만 가능
  7. 공백 입력 불가, e-mail 양식에 어긋나면 안됨
  8. 자기 소개란은 공백 입력 불가, 자기소개는 한글 25자, 영문 50자 내로 입력
같이 제공되는 common.js 라이브러리에는 다양한 유효성검사 함수가 있다.
솔직히... 이걸 안보고 짜면 좋겠지만, 현실은 시궁창이다. 함수가 어떻게 돌아가는지를 이해하고,
수많은 라이브러리들을 보면서 이 함수는 이렇게 써먹을 수 있다. 정도만 알아두면 정신건강에 이롭다.

Trackbacks 0 | Comments 0

[ 2008년 3월 14일 과제였던 회원 가입시 유효성 검사하는 자바스크립트 함수.]

동작순서를 따져보자, fnc_FormChceck()를 Button이 OnClick 되는 이벤트 발생시 동작시킨다.
먼저 document 내의 Text 객체들(txtID, txtPwd)을 받아서 common.js에 있는 다른 함수들을 호출해서
첫 함수에서 유효성체크를 하고 false 값이 넘어오면 false를 반환해서 다른 함수는 동작하지 않는다.
그 함수에서 false를 반환했다는건, 조건에 걸려서 해당하는 유효성검사 메시지가 뜬다는 것이다.
보너스로 날짜 범위 체크 스크립트도 테스트 할 수 있다. (-_- 근데, 닷넷가면 Validation 컨트롤이 나오지.)
아래는 예제 홈의 소스이고, 그 아래는 common.js의 소스이다.


Trackbacks 0 | Comments 0
오늘은 별거 없...는거 같은데 역시 HTML/CSS는 귀찮은 작업이다.
하지만 숙달 수준이란건 참 어려운 것 같다. 하지만, 내가 웹 페이지 디자인 할 이유도 없을것 같고.

오늘 과제는 아래와 같은 페이지를 만들어 보는 것이다.
VS 쓰면 뭐 뚝딱뚝딱 잘도 만들겠건만, 하드코딩이 중요한 이유는 니가 열어봤을때 당황하지 않고
고쳐야 할 부분만 쓱싹 고쳐서 일찍 퇴근하기 위함이다... 라고 하더라.

태그의 구성은 2단 테이블로써, '회원 관리'가 써진 테이블과, 내용을 뿌리기 위해 테이블 내부에 심어진 4X5
테이블이 있다. 외곽선의 색상표현을 위해 border는 쓰이지 않았으며, bgcolor가 정해진 베이스 table에다가
cellspacing을 준 상태다.

본 과제는 수행하면서 table 태그내에 스타일을 적용할때 <TR>태그보다 <TD>태그가 우선 적용되고,
중복 적용된 스타일 중 어떤 것이 적용되지 않는지
살펴볼 수 있는 좋은 기회였던 것 같다.

뭐... 이러니 저러니 해도 결국은 VS로 5분안에 만드는걸... -_-a 닷넷이 괜히 좋냐.

Trackbacks 0 | Comments 0
< 1주차 과제 - HTML >

html을 이용해서 브라우저상에 여백 없이 글자 출력하는 과제....
body 태그에 topmargin 속성 값을 0으로 주어 여백을 제거
<body topmargin=0>


< 2주차 과제 - CSS 활용 >

1. 일정량의 글자수가 넘어가면 테이블이 깨짐. 어떻게 테이블이 깨지지 않도록 할 것인가?
내용의 <td> 태그 길이는 330 (html만 사용해서 표현, <br>,<p>태그 쓰지 않고 스타일로만...)

>> 글자가 정해진 가로크기를 벗어나는 경우를 방지하는 것에는 두가지 스타일이 있음.
1) word-wrap:break-word; (비표준) --- 과제파일내에서 .ex1 스타일로 1, 2열에 적용
2) word-break:break-all; -------------- 과제파일내에서 .ex2 스타일로 3열에 적용

번외로.... <div> 태그를 사용하여 내용이 정해진 크기를 넘었을 경우
말 줄임표시로 처리해주는 스타일도 있음.
* div { width:330px; overflow:hidden; text-overflow:ellipsis; }
--- 과제파일내에서 .ex1 스타일로 4열에 적용

2. 내용 들여쓰기 (공백문자 &nbsp; 못쓴다. 스타일로만...)
>> 들여 쓰는 스타일은 text-indent:10px; 로 과제파일내의 모든 스타일에 일괄로 적용.
    음... <td style="padding:0,0,0,7"> 식으로 적용하여 들여쓰기 할 것! (드림위버)

PS. 학원에서 요즘 계속내주는 과제들이다. 우리 네입어 형님과 국을 누님이 있는 한 어렵진 않은데,
      이게 또... 학습의 사각지대에 있을만한 문제들만 나와서 재밌긴 하다.
      특히, 내가 ASP.NET으로 프로젝트할 당시에 굉장히 필요했던 부분인 '말 줄임표시'의 경우,
      나는 비하인드 코드에서 스트링 치환해서 내보내곤 했는데, 스타일시트에서 이런걸 지원한다.

Trackbacks 0 | Comments 0

microdesk's Blog is powered by Daum & tistory