본문 바로가기

전체 글

(1374)
font-weight Font-weight 글자의 두께를 결정할 수 있습니다. 다음은 사용 할 수 있는 속성값들입니다. font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; 이런 속성값들이 어떻게 보이는지 확인하는게 제일 이해가 쉬울듯합니다. font-weight:normal font-weight:normal font-weight:bold font-weight:bold font-weight:bolder font-weight:bolder font-weight:lighter font-weight:lighter font-weight:100 font-weight:100 font-weight:200 font-..
font-variant Font-variant variant는 크기가 작은 대문자로 바꾸어주는 효과를 얻을 수 있습니다. 두가지 값을 가질 수 있는데 하나는 normal 이고 다른 하나는 small-cap 입니다. normal 은 보통을 의미하며 small-caps는 크기가 작은 대문자로 바꾸어 주고 있습니다. 예제를 보면 확인이 가능합니다. 참고로 한글에는 별 효과가 없는듯합니다. font-variant font-variant font-variant font-variant
font-style Font-style 폰트의 스타일을 적용시킬수 있습니다. 다음은 그 적용예입니다. normal은 폰트스타일을 적용시키지 않았을때와 같습니다. italic과 oblique는 모두 기울어진 형태를 나타내고 있습니다. 확인해보세요. 폰트스타일 폰트스타일 폰트스타일 폰트스타일 폰트스타일 폰트스타일
font-size Font-size 폰트사이즈로 폰트의 크기를 지정할수 있습니다. 다음은 그 사용예입니다. 자신의 홈에 적당한 사이즈를 적용시켜 사용할 수 있습니다. 참고적으로 많은 사람들이 크기를 보통 9pt를 많이 사용하고 있습니다. 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈
font-family Font-family 스타일시트의 요소(element)로써 글자체를 font-family에서 지정할수 있습니다. 즉 원하는 글자체로 글자를 보여줄 수 있다는 것이지요. 하지만 여기서 주의해야 할점은 내가 원하는 글자체로 지정을 해도 방문객의 폰트디렉토리에 이런 폰트가 없으면 무용지물이 되어 버린다는 것입니다. 내 컴에는 수많은 폰트들이 들어 있어서 폰트패밀리에 지정한 글자체로 보여질지라도 방문객의 컴퓨터에는 어떤 폰트가 있는지 알수가 없으므로 폰트패밀리의 사용은 그만큼 제약을 받게됩니다. 따라서 이 요소를 사용할시에는 너무 멋진 폰트만 찾지 말고 공통적으로 윈도우를 인스톨 시키면 들어 있는 폰트의 범위내에서 사용해야 하겠습니다. 억지로 어떤 폰트를 사용하고 싶다면 방문객에게 폰트를 제공하고 설치후 다시 ..
css 사용법 2 Css 사용방법(2) 이용방법(1)에서 다루었던 1.Linking 스타일 시트의 좀 더 자세한 사용방법이다. 링킹 스타일 사용방법은 일전에 알아본바와 걋?확장명이 .css 를 가지는 화일을 링크시켜 글자관련정보를 지정한 .css 파일에서 다루는 방법이다. 다음은 내가 사용하는 index.css 의 예를 들어 알아본다. 위와 같이 index.css 파일을 만든다. 만드는 방법은 그냥 메모장에 위의 내용을 치고 저장할때 확장명을 *.* 에 놓고 화일 이름을 index.css하면 된다. 사용방법은 html 문서내 사이에 라고 입력만 하면 된다. 속성을 알아보자 A:link -- 링크된 부분을 어떻게 표현할것인가를 지정하는 곳이다. text-decoration:none -- 이 부분은 링크된 곳이 글자인경우(그..
css 사용방법 1 Css 사용방법(1) 스타일 시트의 선언은 의외로 간단하다.우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주기 때문이다. 좀더 깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록 하자. 우선 스타일 선언은 아래와 같이 행하면 된다. {PROPERTY:VALUE} CSS Example - 1.Linking 스타일 시트 다음의 내용을 copy해서 sample.css로 저장한후 아래의 소스를 이용해서 test.html을 만든후 검사한다. H1{font-family:Arial;font-size:40pt;Color:red} P{font-size:12pt;line-height:20pt} HTML Source This is a HI stylesheet This is a P stylesh..
css란 무엇인가? CSS 란 무엇인가? 기존의 브라우져는 사용자 환경에 많은 영향을 받았다.하나의 텍스트 문서라도 사용자 브라우져의 기본 폰트 종류와 폰트 크藪?따라서 여러 가지 형태로 나타날 수 밖에 없었다. 하지만 사용자 환경에 영향을 받지 않고 HTML 파일을 화면에 보여줄 수 있는 '스타일 시트'를 이용하면 프로그래밍을 몰라도 간단한 HTML차원에서 응용할 수 있게 된다. CSS의 장점 레이아웃, 폰트, 색깔, 배경 및 인쇄상의 효과를 훨씬 정교하게 할수 있다. 기존문서의 유지보수가 쉽다. 운영체제에 상관없이 적용할 수 있다. 코드 크기가 작아서 페이지를 불러오는데 걸리는 시간의 부담이 적다 웹페이지를 보다 아름답게 꾸밀 수 있다 SGML -Standard Generalized Markup Language SGML..
테이블의 응용 3 테이블의 응용(3) 이번에는 테이블을 이용한 박스 만들기에서 제목부분에 그림을 같이 사용해보자. 이렇게 하면 전체 박스를 이미지를 사용하지 않아도 그냥 하나의 이미지만으로 마치 전체 박스가 하나의 이미지인듯한 착각 효과를 부여한다. Table Example 테이블의 내용을 적는곳 HTML Source 테이블의 내용을 적는곳
테이블의 응용 4 테이블의 응용(4) 테이블의 전체 외곽을 그림으로 메꾸고 그 안의 내용을 글로 채우는 방법이다. 이렇게 하면 마치 그림위에 글자를 쓴 듯한 효과를 부여한다. 소스를 보면 금방 이해가 될듯하다. 활용예제 이곳에 쓴 글은 text입니다. 사용된 그림 HTML Source 이곳에 쓴 글은 text입니다.
테이블의 응용 2 테이블의 응용(2) 테이블의 응용(1)에서 배운것을 토대로 다음과 같이 테이블의 각각의 줄에 대하여 각기 다른 색을 입힌다면 간단하게 멋진 박스를 구성 할 수 있다. 어렵지 않게 이미지 없이 박스 만드는 방법의 편법이다. Table Example 테이블 제목 첫번째 내용. 두번째 내용. 세번째 내용. 네번째 내용. HTML Source 테이블 제목 첫번째 내용 두번째 내용 세번째 내용 네번째 내용
테이블의 응용 1 테이블의 응용(1) 테이블의 기본구성방법과 셀합치기 나누기등을 공부하였으면 이제 이런 간단한 태그를 이용한 응용방법을 알아보도록 하자. 우선 가장 많이 응용되는 테이블이용 경계선있는 박스 만들기는 다음과 같다. Table Example 테이블 제목 이곳의 들어가는 내용은 내가 원하는 글을 넣을 수 있다. 당신의 원하는 만큼 코딩도 가능하며 배경색에 어울리는 그림도 삽입 할 수 있다. HTML Source 테이블 제목 이곳의 들어가는 내용은 내가 원하는 글을 넣을 수 있다. 당신의 원하는 만큼 코딩도 가능하며 배경색에 어울리는 그림도 삽입 할 수 있다. 설명 테이블을 멋지게 응용하기 위해서는 다음의 두개의 테이블구성성분을 이해하여야 한다. cellpadding 과 cellspacing은 테이블의 옵션입니다..
목록의 제목 목록의 제목 리스트의 제목에 해당하는 부분이다. 연구목록과 같이 제목이 있고 그 아래 순서가 있을 경우 적용하면 좋은 모양을 갖춘 결과를 얻을 것이다 다음은 그 사용방법과 결과이다. 목록의 제목 예제 결과 제목이 들어가는 부분 (1) 제목아래에 들어가는 부분 (1-1) 제목아래에 들어가는 부분 (1-2) 제목이 들어가는 부분 (2) 제목아래에 들어가는 부분 (2-1) 제목아래에 들어가는 부분 (2-2) 제목이 들어가는 부분 (1) 제목아래에 들어가는 부분 (1-1) 제목아래에 들어가는 부분 (1-2) 제목이 들어가는 부분 (2) 제목아래에 들어가는 부분 (2-1) 제목아래에 들어가는 부분 (2-2)
순서있는 목록 순서있는 목록 순서있는 목록은 나열하고자하는 목록에 자동으로 번호를 매기는 태그이다. 이때 번호의 타입은 아라비아숫자, 로마숫자등으로 내가 원하는 타입으로 지정할 수 있다. 순서없는 목록보다는 보기가 좋다는 장점이 있다. 순서가 있는 목록 만들기 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시 타입을 바꾸어 보자 예제 결과 서울시 1 서울시 2 부산시 1 부산시 2 인천시 1 인천시 2 광주시 1 광주시 2 서울시 1 서울시 2 부산시 1 부산시 2 인천시 1 인천시 2 광주시 1 광주시 2 내가 원하는 번호에서 시작하기 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시
순서없는 목록 순서없는 목록 List 태그는 정보나 자료를 나열하는데 사용된다.흔히 논문을 쓰거나 할 일 등을 쪽지에 적어 놓을 때 목록을 만드는 경우가 많다. 인터넷 홈페이지 상에서도 많은 경우에 이러한 태그가 필요하게 된다. 예를 들어 홈페이지 상에 "제 홈페이지는 다음과 같은 것들로 구성되어 있습니다"라고 미리 알리거나 제목 등을 좀더 색다르게 표현하기 위해서 목록 정의 태그를 사용한다. 모든 목록 태그에는 종류에 관계없이 라는 태그를 함께 사용한다. 이 태그는 단독 태그이다. 즉 종료태그가 필요없다는 뜻이다. 순서가 없는 목록 만들기 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시 타입을 바꾸어 보자 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시
특수문자2 특수문자(2) 특수문자(1)과는 다르게 특수문자(2)에서는 컴퓨터 자체내에서 제공하는 특별한 기호를 이용하는 방법이다. 즉 다음과 같은 키보드에는 없는 문자들을 내 홈페이지에 삽입하는 방법은 다음과 같다. # & * @ § ※ ☆ ★ ○◎ ◇ 이런 따위의 특수한 모양을 가진 문자를 문서내 삽입하는 방법이다. 1. 글자언어를 영문에서 한글로 바꾼다. 현재 한글모드라면 바꿀 필요 없겠다. 2. 한글로 ㅁ(미음)만 친다 - 미음만 치고 가만히 있으면 커서는 미음 주위를 감싸고 있을 것이다. 3. 이때 한자전화키를 누른다. - 하단 오른편에 선택할 수있는 여러가지 특수 문자가 보일 것이다. 원하는 문사를 골라 마우스로 클릭한다. - 결과 문자는 특수문자로 바뀔것이다. 4. 이런식으로 하면 되고 미음 뿐만아니라 ..
특수문자 특수문자(1) HTML문서를 작성하다 보면 홈페이지 상에서 구현하기 까다로운 문자들이 있다.이것을 특수문자(Escape Sequence)라 부르는데 특수문자란 © @등과 같이 키보드로 직접 입력할 수 없는 아스키(ASCⅡ)코드의 문자를 말한다. 이러한 특수 문자들을 웹 문서 상에서 종종 사용해야 할 경우가 있다.예를 들어 홈페이지의 맨 끝부분에 우리가 흔히 사용하는 ~라는 태그와 함께 'Copyright© All Rights Reserved'라는 문구를 삽입할 때 이러한 특수 문자를 사용하게 된다.특수 문자들은 HTML 문서 상에서 다음과 같이 표기한다. © © 위의 특수 문자 코드를 입력하면 결과는 모두 © 로 나타난다. 위에서 알 수 있듯이 모든 특수 문자들은 &로시작해서 ;로 끝난다. 모든 특수 문..
프레임의 경계선 프레임의 경계선 프레임의 경계선의 굵기를 지정하는 부분이다. frameset 부분에 frameborder 부분을 설정하고 각각의 프레임에 대한 소스문서를 지정하는 frame src 부분에 border를 지정할 수 있다.다음은 네스케이프의 경우 프레임의 경계선이 나타나고 안 나타나는 예이다 프레임의 경계선 예제 설명 실제로 프레임의 경계선은 사용하지 않는다. 대부분 경계선을 사용하면 제작자가 의도하는 프레임을 나눈 의미가 퇴색하기 때문이다. 따라서 보더의 경우 보통 0 값을 사용하여 배경색이나 배경이미지로 프레임의 경계 사용하기도 한다. 익스플로워랑 네스케이프의 프레임 지정 방식이 틀린 이유로 나중에 배울 자바스크립트부분에서 방문객의 브라우저가 무엇인지를 알아내고 브라우저에 따라 각각의 프레임을 지정하는 ..
프레임모양의 지정방법 프레임의 모양지정방법 프레임을 사용하였을때 프레임 안에 들어갈 내용과 프레임과 프레임을 구분해주는 경계선과의 공간, 즉 여백즐 지정하는 방법이다. 프레임구분 경계선의 굵기도 조절 할 수 있다. 프레임의 모양 조절하기 예제 설명 프레임에 들어갈 문서에 여백을 지정해 주는 옵션이다. 태그 안의 FRAMESPACING속성은 태그의 CELLSPACING속성과 마찬가지로 프레임간의 공간을 픽셀단위로 지정할 수 있는 부분이다. 태그 안의 MARGINWIDTH 의 속성은 프레임의 좌우 여백을 지정하고 MARGINHEIGHT 속성은 프레임의 위아래 여백을 지정한다. 이것는 역시 TABLE 태그의 cellpadding 부분과 유사하다. 각각의 프레임에 보여줄 문서내용을 프레임의 상하 좌우와 얼마의 크기를 가진 여백을 지..
프레임의 목표창 프레임의 목표창 프레임을 사용하여 창을 나누는 대부분의 이유가 한쪽은 홈페이지의 여러가지 메뉴부분으로 사용하고 나머지 한쪽은 메뉴부분에서 선택한 문서를 보여줄 창으로 사용하는 경우가 대부분이다. 이럴 경우 메뉴창에서 선택한 문서를 원하는 곳에 보여주고 싶다면 각각의 창 이름을 지정하고 링크 태그시 target 부분에 창 이름을 지정해 주어야 한다. 만약 이런 과정을 생략하면 메뉴창에서 호출한 문서는 메뉴창에 바로 떠 버린다. 메뉴와 그에 따른 결과를 보여주지 못하게 되는것이다. 목표창의 이름을 붙이는 방법 일단 프레임을 지정하는 문서가 다음과 같다고 가정하자. 이에 대한 결과는 우리는 알고 있다. 이제 demo10_1.html에 다음과 같이 되어 있다고 하자 demo10_3.html호출 링크시킬때 tar..
프레임문서 만들기 기본 프레임문서 만들기 프레임이란 쉬운말로 브라우저 창을 여러개의 창으로 나누는 것을 말한다. 메뉴가 많은 홈페이지라면 사용자들을 위해 적당하게 프레임을 나눔으로 인해 사용자가 미궁에 빠지는 일이 없도록 배려하기도 하고 깔끔한 인터페이스를 제공하는 목적으로도 사용된다. 우선 프레임의 기본적인 것을 알아보도록 한다. 웹 상에 프레임을 만들기 위해서는, 영역을 구분해 주는 태그와 나누어진 영역 내에 넣을 HTML문서를 가져오는 태그가 필요하다. 우선 창을 내 맘대로 나누고 각각의 나눈 창에 보여줄 html문서를 지정한다는 의미이다. 태그는 태그 사이에 위치하게 되고, 태그는 비율로 나누기 - 상하로 나누기 숫자로 나누기 - 좌우로 나누기(1) 여기에서 3* 이란 오른쪽을 *으로 잡고 왼쪽은 그것에 3배 즉 ..
드라이 파이어 [플래시게임] 드라이 파이어 마우스로 조절하여 클릭하면 광선이 발사됩니다. 몰려오는 적을 물리치세요 스페이스바=폭탄
에스케이프 게임 에스케이프게임 재미있게 즐기세요 ^^
파워포인트에 플래시 삽입 파워포인트에 플래시 삽입 파워포인트에서 플래시 애니메이션(*.swf) 삽입하기 최근 플래시 애니메이션을 파워포인트에서 사용하는 분들이 많아졌는데 아직 플래시 애니메이션을 직접 슬라이드에 삽입하는 명령은 없으므로 컨트롤 도구를 이용해야 합니다. 1. 플래시 애니메이션을 삽입할 슬라이드를 열고, [보기]-[도구 모음]-[컨트롤 도구 상자] 메뉴를 선택합니다. 2. 컨트롤 도구 모음에서 [그 밖의 컨트롤] 버튼(해머와 렌치 아이콘이 있는 단추)을 클릭하고, 목록에서 Shockwave Flash Object를 선택합니다. 3. 슬라이드에서 마우스를 끌어 드롭해 플래시 애니메이션이 삽입될 위치와 크기를 지정합니다. 4. 이 개체를 마우스 오른쪽 버튼으로 클릭하고 표시되는 단축 메뉴에서 [속성]을 선택한다. 5. ..
셀안의 배경 셀안의 배경 테이블의 셀안에는 body 태그에서처럼과 같이 배경색 또는 배경그림을 지정 할 수 있다. 배경색의 지정은 각각의 셀에서 지정이 되거나 테이블 전체에서 또는 한줄에서 배경색을 지정 할 수 있다. 배경 그림의 경우는 각각의 셀에 배경그림지정이 가능하며 따라서 body 태그안에 배경그림과 셀안의 배경그림을 적절이 이용하면 배경그림을 두가지로 조합해서 사용 할 수 있다. 셀안의 배경넣기 - 색넣기 예제 설명 (1,1) (1,2) (1,1) (1,2) 각각의 셀의 바탕색을 지정하는 방법이다. 색지정은 bgcolor=#ffffff 식으로 칼라코드로 대입하면 된다. 다음은 옆의 결과이다. (1,1) (1,2) (2,1) (2,2) 셀안의 배경넣기 - 그림배경 예 설명 (1,1) 예제는 1X1 테이블안에 ..
셀안의 정렬 셀안의 정렬 테이블 셀에서 그 안에 포함된 내용을 정렬하는 방법이다. 정렬방식을 지정하지 않으면 왼쪽에서 부터 내용이 보여지게되며 정렬방식을 지정하면 각각 , 가운데, 오른쪽에 그 내용을 정렬 시킬 수 있다. 수평정렬방법 예제 설명 (1,1) (1,2) (2,1) (2,2) 수평정렬방법이란 셀안의 내용을 셀내부에 어떤 위치 놓을까 하는 방법이다. 수평정렬방법에는 세가지가 있다. 왼쪽정렬과 가운데 정렬, 그리고 오른쪽 정렬이다. 이 옵션을 생략하면 왼쪽정렬로 인식하며 center는 가운데 right는 오른쪽을 나타낸다. 다음은 각각의 예에 대한 결과이다. align=left 또는 생략 (1,1) (1,2) (2,1) (2,2) align=center (1,1) (1,2) (2,1) (2,2) align=r..
셀 합치기 셀 합치기 테이블을 다루다 보면 테이블안에 있는 셀을 합쳐야 할 경우가 있다. 아래로 두칸이 있고 위로는 한칸이 있을경우 위에 있는 두개의 셀을 하나로 합쳐 하나의 셀로 만드는 방법은 다음과 같이 하면 쉽게 이해 할 수 있을 것이다. 셀 옆으로 합치기 예제 설명 (1,1) (2,1) (2,2) 첫번째줄과 그 아래의 두번째줄의 칸수가 틀릴경우 첫번째에 있는 칸을 합치는 경우이다. 이때 사용하는 옵션이 colspan이란 부분이다, 즉 아래 부분에 합쳐질 칸의 수를 대입하면 된다. 다음은 옆의 예제의 결과이다. (1,1) (2,1) (2,2) 셀 밑으로 합치기 예제 설명 (1,1) (1,2) (2,2) 이번에는 셀을 밑에 있는 거와 합쳐보자. 합치는 방법은 간단하다. 우선 정상적인 테이블을 구성한다. 그리고 ..
테이블의 경계선과 크기 테이블의 경계선과 크기 테이블의 경계선은 테이블 안에 있는 각각의 셀과 셀 사이를 구분하며 테이블의 외곽과 테이블 밖과의 경계선을 지정한 크기만큼 설정하는 태그이다. 테이블의 기본구성성분에 border 라는 옵션만 추가한 방법이며 각기 다른 값을 넣었을 때 보여지는 것은 아래의 예에서 보면 금방 이해가 될것이다. 경계선조절 예제 설명 (1,1) (1,2) (2,1) (2,2) 기본테이블의 구성에서 경계선을 넣는 방법은 border="원하는값"에서 결정된다.다음은 각각 다른 값을 대입한 후의 결과들이다. 비교하면 이해가 쉬울것이다. border=0 (1,1) (1,2) (2,1) (2,2) border=1 (1,1) (1,2) (2,1) (2,2) border=2 (1,1) (1,2) (2,1) (2,2)..
테이블 작성 기본테이블작성 테이블 - 한글97에서 많이 보았을 것이다. 일정한 양식을 갖춘 포멧같은 것을 사용할때 주로 사용된다. 하지만 이 테이블은 홈페이지 제작에 있어서 내가 원하는 위치에 그림 또는 글자를 위치시키고자하는 레이아웃에 절대적으로 사용되는 정말 중요한 태그이다. 그 무궁무진한 사용방법을 익히기 전에 다음의 가장 기본이 되는 테이블 구성 태그를 알아보도록 하자. 1X1 Table 예제 설명 (1,1) 1줄(row)과 1칸(column)을 가지는 가장 작은 테이블의 구성이다. 먼저 1줄을 삽입하고 그 줄안에 칸을 삽입한다. 결과는 다음과 같다. (1,1) 1X1 테이블 - 경계선 1 예제 설명 (1,1) 테이블의 경계선을 넣어주는 border옵션의 사용예이다. 위의 경우와 다르게 주위와의 구별을 주어 ..
같은 문서내 이동 같은 문서내 이동 이 방법은 한 문서내에 내용이 너무 길어서 옆의 스크롤바를 이용 위와 아래를 이동해야 하는 경우 아래부분에서 윗부분을 링크시키면 사용자는 스크롤바를 이용하지 않고도 단지 클릭만으로 문서 제일 밑에서 제일 위로 화면을 바꿀 수 있게끔하는데 주로 사용된다. 초기 인터넷 문서는 대부분 이런 문서내 링크방식을 적용하였다. 하지만 요즘은 잘 쓰지 않는 태그이다. 사용자측에서는 고마운 태그일 것이다. 문서내에서의 링크방법은 다음과 같다. ~ ~ 예) 속도의 문제 홈페이지는 독자들의 인내심을 실험하는 곳은 아니다. 속도는 빠르면 빠를수록 좋다 속도를 저해하는 요소들을 과감히 제거하자. TOP 설명 : 위의 예제에서와 같이 href에서 지정한 부분은 #top 부분이다. #기호는 문서내 이동을 의미하며..