Chapter02 HTML 자기소개서 작성하기 misuk6389@mokwon.ac.kr
Contents 1. 배경색 및 글자 색상 지정하기 2. 주석 처리하기 3. 글자 속성 지정하기 4. 줄 바꾸기 Chapter02 1. 배경색 및 글자 색상 지정하기 2. 주석 처리하기 3. 글자 속성 지정하기 4. 줄 바꾸기 5. 제목 지정하기 6. 글자 스타일 지정하기 7. 목록 지정하기 8. 특수 문자 입력하기 HTML 자기소개서 작성하기
Introduce Chapter02 [그림 2-1] Introduce1의 실행결과 HTML 자기소개서 작성하기
배경색 및 글자 색상 지정하기 <BODY> 태그 Chapter02 <BODY> 태그 형식 : <BODY 속성=값 속성=값......> 내용 </BODY> 속성 : TOPMARGIN, LEFTMARGIN, BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, ALINK 예제 : <BODY BGCOLOR="yellow" TEXT="blue" LINK="red" VLINK="green" ALINK="gray"> BODY 태그의 속성 </BODY> HTML 자기소개서 작성하기
<BODY> 태그 속성 Chapter02 HTML 자기소개서 작성하기
프로그램 2-2 [그림 2-2] BODYTag1의 실행 결과 [그림 2-3] BODYTag1의 실행결과 Chapter02 HTML 자기소개서 작성하기
RGB Chapter02 [그림 2-4] RRGGBB를 16진수로 변환한 값 HTML 자기소개서 작성하기
프로그램 2-3 Chapter02 [그림 2-5] BODYTag2의 실행결과 HTML 자기소개서 작성하기
자기소개서 Chapter02 [그림 2-6] Introduce2의 실행결과 HTML 자기소개서 작성하기
주석 처리하기 주석 소스 코드 설명 등을 첨가할 때 사용하며 프로그래밍 한 코드를 실행하는데 아무런 영향을 주지 않음. Chapter02 주석 소스 코드 설명 등을 첨가할 때 사용하며 프로그래밍 한 코드를 실행하는데 아무런 영향을 주지 않음. 형식 : <!-- 내용 --> 예제 : <BODY> 첫 번째 줄 <!-- 두 번째 줄 --> 세 번째 줄 </BODY> HTML 자기소개서 작성하기
프로그램 2-4 Chapter02 [그림 2-7] Comment의 실행결과 HTML 자기소개서 작성하기
글자 속성 지정하기 (1/2) <FONT> 태그 글씨의 크기, 색상, 글꼴 지정 Chapter02 <FONT> 태그 글씨의 크기, 색상, 글꼴 지정 형식 : <FONT 속성=값 속성=값......> 내용 </FONT> 속성 : SIZE, COLOR, FACE 예제 : <BODY> <FONT SIZE="5" COLOR="green" FACE="궁서체"> FONT 태그의 예제 </FONT> </BODY> HTML 자기소개서 작성하기
<FONT> 태그 속성 Chapter02 HTML 자기소개서 작성하기
프로그램 2-5 Chapter02 [그림 2-8] FONTTag1의 실행결과 HTML 자기소개서 작성하기
프로그램 2-6 Chapter02 [그림 2-9] FONTTag2의 실행결과 HTML 자기소개서 작성하기
프로그램 2-7 Chapter02 [그림 2-10] FONTTag3의 실행결과 HTML 자기소개서 작성하기
프로그램 2-8 Chapter02 [그림 2-11] Introduce3의 실행결과 HTML 자기소개서 작성하기
줄 바꾸기 (1/3) <BR> 태그 줄 바꾸기 형식 : 내용 <BR> 예제 : <BODY> Chapter02 <BR> 태그 줄 바꾸기 형식 : 내용 <BR> 예제 : <BODY> 줄바꾸기 예제<BR> 줄바꾸기 예제 HTML 자기소개서 작성하기
줄 바꾸기 (2/3) <P> 태그 단락 구분 형식 : <P 속성=값> 내용 </P> Chapter02 <P> 태그 단락 구분 형식 : <P 속성=값> 내용 </P> 속성 : ALIGN 예제 : <BODY> <P>줄바꾸기 예제</P> HTML 자기소개서 작성하기
줄 바꾸기 (3/3) <PRE> 내용 </PRE> 형식을 그대로 유지하며 표시 Chapter02 <PRE> 내용 </PRE> 형식을 그대로 유지하며 표시 형식 : <PRE 속성=값> 내용 </PRE> 속성 : WIDTH 예제 : <BODY> <PRE> PRE 태그 예제 </PRE> </BODY> HTML 자기소개서 작성하기
프로그램 2-9 Chapter02 [그림 2-12] ParagraphTag의 실행결과 HTML 자기소개서 작성하기
제목 지정하기 <H> 태그 제목 지정 1~6까지 지정할 수 있음 자동으로 글자 스타일이 두껍게 표시됨 Chapter02 <H> 태그 제목 지정 1~6까지 지정할 수 있음 자동으로 글자 스타일이 두껍게 표시됨 <FONT> 태그의 SIZE 속성의 값과는 반대로 크기가 지정 형식 : <H크기 속성=값> 내용 </H크기> 속성 : ALIGN 예제 : <BODY> <H1> H 태그 예제 </H1> <H4> H 태그 예제 </H4> </BODY> HTML 자기소개서 작성하기
프로그램 2-10 Chapter02 [그림 2-13] HTag1의 실행결과 HTML 자기소개서 작성하기
프로그램 2-11 Chapter02 [그림 2-14] HTag2의 실행결과 HTML 자기소개서 작성하기
프로그램 2-12 Chapter02 [그림 2-15] Introduce4의 실행결과 HTML 자기소개서 작성하기
물리적 스타일 지정하기 물리적 스타일 지정 태그 자체의 의미보다는 단순히 웹 페이지 상에 표시되는 형태만을 결정하는 태그 Chapter02 물리적 스타일 지정 태그 자체의 의미보다는 단순히 웹 페이지 상에 표시되는 형태만을 결정하는 태그 HTML 자기소개서 작성하기
프로그램 2-13 Chapter02 [그림 2-16] FONTStyleTag1의 실행결과 HTML 자기소개서 작성하기
논리적 스타일 지정하기 논리적 스타일 지정 웹 페이지 상에 출력되는 모양 보다는 태그 자체에 의미를 가지고 있는 태그 Chapter02 논리적 스타일 지정 웹 페이지 상에 출력되는 모양 보다는 태그 자체에 의미를 가지고 있는 태그 HTML 자기소개서 작성하기
논리적 스타일 관련 태그 Chapter02 HTML 자기소개서 작성하기
프로그램 2-14 Chapter02 [그림 2-17] FONTStyleTag2의 실행결과 HTML 자기소개서 작성하기
목록 지정하기 – 기호 목록 <UL> 태그 목록에 대하여 각 항목 앞에 기호를 붙일 때 사용 형식 : Chapter02 <UL> 태그 목록에 대하여 각 항목 앞에 기호를 붙일 때 사용 형식 : <UL> <LI 속성=값> 항목 1 <LI 속성=값> 항목 2 <LI 속성=값> 항목 3 </UL> 속성 : TYPE TYPE의 값 : disk (기본) circle square 예제 : <BODY> <UL> <LI> 목록 태그 사용하기 <LI TYPE="disk"> 목록 태그 사용하기 <LI TYPE="square"> 목록 태그 사용하기 <LI TYPE="circle"> 목록 태그 사용하기 </UL> </BODY> HTML 자기소개서 작성하기
프로그램 2-15 Chapter02 [그림 2-18] ULTag의 실행결과 HTML 자기소개서 작성하기
목록 지정하기 – 숫자 목록 <OL> 태그 목록에 대하여 각 항목 앞에 기호를 붙일 때 사용 형식 : Chapter02 <OL> 태그 목록에 대하여 각 항목 앞에 기호를 붙일 때 사용 형식 : <OL 속성=값 속성=값> <LI 속성=값 속성=값> 항목 1 <LI 속성=값 속성=값> 항목 2 <LI 속성=값 속성=값> 항목 3 </OL> 속성 : <OL> 태그 - TYPE, START <LI> 태그 - TYPE, VALUE HTML 자기소개서 작성하기
<OL> 태그와 <LI> 태그 속성 Chapter02 <OL> 태그 속성 <LI> 태그 속성 숫자 형식 값 : 1, a, A, i, I HTML 자기소개서 작성하기
프로그램 2-16 Chapter02 [그림 2-19] OLTag의 실행결과 HTML 자기소개서 작성하기
프로그램 2-17 Chapter02 [그림 2-20] Introduce5의 실행결과 HTML 자기소개서 작성하기
특수 문자 입력하기 특수 문자 입력 엔티티(Character Entities) 를 사용하여 화면상에 표시 Chapter02 특수 문자 입력 엔티티(Character Entities) 를 사용하여 화면상에 표시 캐릭터 엔티티는 시작부분인 ‘&’, 엔티티 이름을 나타내는 ‘#’ (엔티티 이름이나 번호를 사용함), 그리고 끝을 나타내는 ‘;’ 3부분으로 구성됨 HTML 자기소개서 작성하기
프로그램 2-18 Chapter02 [그림 2-21] CharacterTag의 실행결과 HTML 자기소개서 작성하기