본문 바로가기

강의실/HTML

(34)
아름다운글,이미지,동영상 올리기는 법 종합편 아름다운글 올리는방법 일주일완성 1.아름다운글 올리는 방법 (HTML이란 무엇인가와 준비물.태그연습장은 밑에있슴) 2.아름다운글 올리는 방법 (글자의 움직이는 명령어-marquee) 3.아름다운글 올리는 방법 (marquee의속도-scrollamount) 4.아름다운글 올리는 방법 (marquee움직임의 방향 명령-direction) 5.아름다운글 올리는 방법 (marquee 완결) 6.아름다운글 올리는 방법 (글자의 크기와 색상- font) 7.아름다운글 올리는 방법 (문단의 정열- br와p의차이) 8.아름다운글 올리는 방법 (문단의 정열-right오른쪽-center중앙-left-왼쪽) 9.아름다운글 올리는 방법 (table 테이블이란) 10.아름다운글 올리는 방법 (이미지-img src) 11.아름다..
테이블의 응용 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배 즉 ..
셀안의 배경 셀안의 배경 테이블의 셀안에는 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 부분이다. #기호는 문서내 이동을 의미하며..
다른 문서의 연결 다른 문서의 연결 인터넷이 확신되는데 가장 중요한 역활을 한 태그이다. 자신의 홈페이지 웹상에서 링크시키기 태그를 이용하면 자기 자신의 홈페이지내의 다른 문서로 연결시킴은 물론 다른 홈페이지의 링크도 간단히 해결할수있다. 링크란 연결이라 이해하면 쉬울것이다. 링크를 이용하는 방법을 알아본다. 홈페이지내 문서에서 다른 문서 연결시키기 이 방법은 홈페이지내에 있는 문서에서 그 문서내용중 지정한 곳을 누르면 같은 홈페이지내에 있는 다른 문서를 로딩하는 방법이다. 예를 들어 index.html문서내에 다음과 같은 태그가 있다고 가정하면 여기를 누르시오 이런 태그를 사용하면 방문객이 마우스로 "여기를 누르시오"를 클릭하면 href에서 지정한 문서 test.html 이 로딩된다. 다른홈페이지의 문서를 링크시키기 이..
배경 음악 삽입 배경음악 삽입하기 어떤 홈페이지를 방문하였더니 갑자기 스피커에서 아름다운 선율이 흘러 나오는 것쯤은 한번쯤 경험하였을 것이다. 흔히 자신의 홈페이지에 배경음악을 넣는 방법은 다음과 같다. 1. 우선 원하는 음악을 선택한다 - 가장 일반적으로 확장명이 mid를 가지는 미디파일을 사용한다. 요즘은 mp3 라는 것이 한창 뜨고 있는데 그렇다고 mp3를 내 홈페이지의 배경음악으로 넣을 생각은 버려라. 왜냐구? 배경음악을 연주하기 위해서는 웹상에서 하는게 아니라 브라우저로 홈페이지를 접속한 사람이 자신의 컴퓨터로 음악을 다운받아서 연주하는 것이다. 그러므로 다운로드를 먼저 해야 하므로 홈페이지의 로딩 속도는 배경음악의 크기에 비례해서 늦어지게 된다. 그렇다면 mp3를 다운받는다면? 아마 지루함에 못 이겨 나가고 ..
그림에 링크 걸기 그림에 링크 걸기 방문자가 마우스로 그림을 눌렸을때 어떤 html문서를 보여줄까를 지정하는 태그이다. 웹사이트를 돌아다녀보면 광고그림을 본적이 있을 것이다. 광고를 누르면 다른 페이지가 보여지는 것도 경험한 적이 있을 것이다. 이런 것이 바로 그림에 링크걸기 태그를 이용한 방법이다. 그림에 링크걸기 예제 설명 그림을 클릭하였을때 어떤 문서를 보여주고자 할때 사용하는 태그. 즉 그림이 로딩되고 방문객이 그 그림을 클릭함으로써 원하는 문서를 연결시키는 태그이다. 링크시키기를 살펴보면 이해가 쉬울것이다. 단지 그림을 로딩하는 태그를 넣고 그림태그 앞과 뒤에 링크를 거는 태그를 사용하는 방법이다.
그림지정 그림 크기 지정 보통은 그림의 크기를 지정하지 않으면 브라우저는 그림의 크기를 계산하여 그림을 정확하게 보여준다. 하지만 그림의 크기를 강제로 지정하면 브라우저는 그림의 원래크기를 무시하고 지정한 크기(높이와 넓이)로 그림을 화면에 뿌린다. 이런 성질을 이용해서 몇가지 팁도 있는데 여기서는 그림을 강제적으로 지정하는 방법만 알아보도록 한다. 그림의 크기 지정하기 예제 설명 보다 빨리 로딩되고 있다는 느낌을 주기 위해 태그안에 이미지의 넓이와 높이(픽셀단위) 속성을 포함시킨다. 이것은 이미지가 놓일 자리를 규정하고 이미지가 완전히 로딩되어 표현되기 전에 텍스트페이지가 보이게 하여 준다. 텍스트가 먼저 나타나면 페이지가 더 빨리 로딩되었다는 느낌을 갖게 한다. 이미지의 크기를 재조정하려면 그래픽 프로그램으로..
그림과 글자 정렬 그림과 글자 정렬 홈페이지를 만들다가 보면 한줄에 그림하나 또는 한줄에 글자만 넣기가 대부분이다. 하지만 가끔 한줄에 그림과 글자를 같이 사용해야 하는경우 글자의 크기와 그림의 크기가 다르기 때문에 글자옆에 그림을 놓거나 반대로 그림옆에 글자를 놓을 경우 크기가 다른 것을 같은 줄에 보여주기 때문에 그 레이아웃이 볼상 스럽다. 이럴경우 그림과 글자를 다음과 같이 정렬하여 원하는 레이아웃을 결정할 수 있다. 보통 글자와 그림을 함께 쓰는 경우는 글자의 크기를 고려해서 그에 적당한 그림을 사용하는것이 대부분이다. 고민해야 할 부분이다. 그림과 글자 정렬방법 예제 설명 정렬방법에는 다음과 같이 세가지가 있으며 각각의 정렬방법에 따라 글자의 위치가 정해진다. top -글자를 이미지의 윗부분에 정렬. middle..
그림삽입 그림 삽입 방법 조회수 : 9410 홈페이지는 글자와 그림으로 구성된다고 해도 과언이 아니다. 아니 오히려 글자는 그냥 쓰기만 하면 되므로 사용하는데 별 무리가 없을지도 모른다. 하지만 그림의 경우는 다음과 같이 html문서내에 삽입하며 삽입하기 전에는 반드시 지정한 그림을 먼저 만들거나 내가 가지고 있어야 한다. 나중에 설명하겠지만 그림만드는 방법은 일단 접고 그림을 내 홈페이지에 삽입하는 방법은 다음과 같이 간단하게 적용할 수 있다. 그림넣기 예제 설명 태그 안에 삽입하고자 하는 이미지 파일 이름을 삽입하면 웹 상에 이미지를 나타내 준다.이 때 이 그래픽 파일은 위의 화일이 존재하는 같은 디렉토리 안에 있어야 한다. 만일 다른 디렉토리에 그래픽 파일이 존재한다면 다음과 같이 그 디렉토리에 관한 URL..
공백넣기 글자 사이 공백 넣기 홈페이지 상에서 글자는 간격을 아무리 많이 띄우더라도 결국 하나의 간격으로 밖에 처리되지 않는다. 따라서 글자사이에 공백을 만드는 방법이 필요하게 되었다. 따라서 몇가지 편법을 이용하여 글자와 글자사이에 공백을 넣어 내가 원하는 곳에 글자를 위치시키는 글자레이아웃의 기초를 익힐 수 있을것이다. 바탕색과 같은 색의 글자 사용하기 만약 바탕색과 같은 색으로 글자를 지정하게 되면 방문객은 같은 색이기 때문에 글자를 구분할 수없다는 점에 착안한 방법이다. 예를 들어 만일 홈페이지의 배경색이 하얀색일 경우 하얀색의 글자를 사용하면 아무리 많은 글자를 쳐넣더라도 결국 여백처럼 보인다. 여기서 주의해야 할 점은 반드시 배경의 색상과 일치를 시켜야 한다는 점이다.만일 배경이 파랑색이면 글자도 파랑..
글자 속성 지정 글자 속성 지정 방법 글자의 속성을 지정하는 방법이다. 이것은 한글97이나 MS 워드와 같은 문서작성기에서 많이 보았던것과 거의 유사하다. 글자를 이탤릭문자로 만든다거나, 두껍게 또는 밑줄, 아래첨자, 윗첨자 등과 같이 글자에 어떤 효과를 부여하는 방법이다. 잘 만 쓰면 멋진 글자를 만들 수 있다. 글자 속성 지정하기 예제 설명 ~ ~ 강조하기 위해서 굵은 글씨를 나타내는 태그이다 볼드체에 해당함. 글자를 굵고 진하게 표현. 폰트 크기 지정 또는 색상 지정방식과 함께 쓰일 수 있다. 예를 들어 크기를 변화시키고자하고 굵기를 굵게하고자 한다면 이것은 크기가 5이고 파란색의 굵은 글씨입니다. ~ ~ 이탤릭체 적용하면 이런글자가된다 ~ 적용예 ~ 적용예 ~ 적용예 ~ 적용예 ~ 적용예 ~ 적용예 - 네스케프만됨
글자 색상 지정 글자 색상 지정 방법 글자에 내가 원하는 색을 지정하는 방법이다. 이때 지정하는 방식은 다음과 같으며 Color Table 에서 제공하는 코드를 지정하면 된다. 글자에 색을 지정할 때는 너무 화려하게 지정해서는 안되며 특히 배경색에 주의해야 한다. 배경색이 Black 인데 글자를 Black으로 지정하면 글자는 배경색에 가려 보이지 않게 된다. 혹은 배경색인 어두운 데 글자색을 어두운 색으로 지정하면 글자는 보이지만 배경색과 구별이 어려워 가독하는데 방문자의 눈을 피로하게 할 수 도 있다. 주의해야한다. 글자 색상 지정 예제 설명 글자 태그 안에 color라는 속성을 사용하여 글자의 색상을 지정할 수 있다. 이때 값은 16진수,색상명이다. 글자 또한 HTML문서에서 다른 서체들을 사용하기 위해선 태그내에 ..
글자 크기 지정 글자 크기 지정방법 글자(텍스트)의 크기를 원하는 만큼 지정할 수 있는 태그이다. 다음의 예제에서 보면 그 사용방법을 간단하게 익힐 수 있다. 나중에 언급하겠지만 , 글자의 크기를 지정하는 방법은 이런 방식을 기본으로 하여 더 멋진 효과를 부여하는 css와 같이 사용하는 경우가 대부분이다. 권장하는 글자의 크기는 정도 이다. 글자가 너무 작으면 방문자의 모니터에 따라 다르겠지만 font size=2 이하의 글은 잘 안보일 수 있다. 특히 영문은 그 경우가 덜 한데 한글을 사용할 경우 글자의 크기가 너무 작거나 너무 크면 글자 크기 지정 태그를 사용한 결과가 오히려 사용하지 않을 때 보다 못할 수도 있으니 자신의 홈페이지에 맞는 적절한 글자 크기를 찾는 것은 무시 할 수 없는 중요한 작업이다. 문서내 글자..