은둔형 공학자

1. Submit 버튼 양식 

Submit 버튼 양식 

• 버튼 양식 

– <input type=“button”> 

– 가장 보편적인 버튼 생성 

• submit 버튼 양식 

– <input type=“submit”> 

• 입력한 데이터를 모두 다른 URL로 전송하기 위해 사용 

• 다른 URL은 <form>태그의 “action”속성에 저정한 URL로 전송 

• reset 버튼 양식 

– <input type=“reset”> 

• 이전에 입력된 데이터를 모두 초기화 

기타 입력양식  

• <textarea>~</textarea> 

– 텍스트를 여러 줄의 문장을 입력할 수 있는 입력 양식 

– “rows”에 입력하고자 하는 행수를 설정 

– “cols”에 한줄에 입력할 수 있는 글자 수 지정 

2. 리스트 박스 

콤보박스 & 리스트 박스 작성 

• 콤보 박스 

– <select>~</select> 

– 여러 가지 항목 중 하나를 선택하기 위한 콤보 박스 

– <option> 속성에 항목 기술 

– 공간 절약 

• 리스트 박스 

– <select size=“n”>~</select> 

–  여러 가지 항목 중 하나를 선택하기 위한 리스트 박스 

– “size” 속성을 추가, 크기를 지정 

– 콤보 박스에 비해 공간 낭비 

1. 간단한 폼 양식 작성하기 

간단한 폼 양식 작성하기 

– <form>~</form> 

• 입력 양식 폼을 구성하는 기본 골격 

• 폼 태그 텍스트 입력 양식, 암호 입력 양식 등을 기술 

     <form action=“이동위치” method=방식 enctype=형식> 

다양한 폼 

</form>

– 텍스트&암호 입력 양식 

• 글자를 입력 받거나 출력하는 용도 

– <input type=“text> 

• 입력한 문자 대신 “*” 문자가 출력되도록 하는 입력 상자 

– <input type=“password”> 

2. 데이터를 입력 받는 양식 작성하기 

여러 가지 목록 중에서 선택하는 양식 작성 

– <input>태그의 type 속성에 “check” or “radio” 지정  

 • 체크 박스 양식 <input type=“checkbox”> 

– 여러 개의 항목을 나열하여 원하는 항목을 선택 

– 한번에 여러 개를 동시에 선택 가능 

– “checked” 속성 “on”을 지정 초기화면에 체크된 상태로 표시 

라디오 버튼 양식 

– <input type=“radio”> 

– 여러 개의 항목 중에서 하나만 배타적으로 선택할 경우 

– 하나를 선택하면 그 전에 선택된 내용은 “off” 

– 체크 박스와 달리 한번에 하나의 항목만 선택 가능 

1. 프레임 테두리의 두께와 색상 조절  

프레임 테두리의 두께와 색상 조절 

– <frame> 태그 

• border 속성 

– 테두리 두께 조절, 정수값 지정 

• bordercolor 속성 

– 테두리의 색상 변경 

프레임 테두리 없애기 

– 프레임 구분 테두리를 없앨 수 있다. 

– <frame> 태그 

• frameborder 속성 값을 “no”로 지정 

• “border” 속성에 값을 “0”으로 지정 

스크롤바가 없는 창 

– 브라우저에 출력될 문서의 내용이 많을 경우 자동으로  스크롤바 생성 

– 스크롤바를 없애는 방법 

• 프레임을 상하로 나눔 

• 위쪽 프레임의 row 속성 값으로 “0”을 지정, 아래 프레임의 row 속성 값으로 “*”을 지정 

• 위쪽 프레임에는 아무 내용이 없는 빈 문서를 연결, 아래 프레임에 결과로 나타낼 문서 지정 

• 아래 프레임의 scrolling 속성 값을 “no”로 지정 

1. 1. 스크롤바 표시하기
   • <frame> 태그에 scrolling 속성
     • scrolling=“yes” 무조건 생성, “no/off” 생성되지 않음, “auto” 자동으로 스크롤바 생성
   • 기본값 “auto”
2. 2. 여백 설정
   • “marginwidth” 프레임의 좌우 여백 지정
   • “marginheight” 프레임의 상하 여백 지정
3. 3. target 지정하기
   • <frame> 태그에 “name” 속성 지정
   • target 속성에 프레임 이름 지정, 특정 문서가 해당 프레임에 로드
4. 4. IFRAME
   • 인라인 프레임(inline frame)
   • 문서 내에서 다른 문서를 볼 수 있는 창 생성

1. 스크롤바 표시하기 

스크롤바 표시하기 

– <frame> 태그에 scrolling 속성 

• scrolling=“yes”를 지정 스크롤바 무조건 생성 

• scrolling=“no/off” 지정 스크롤바 생성되지 않음 

• scrolling=“auto” 내용이 많으면 자동으로 스크롤바 생성 

– 기본값 “auto” 

• 지정하지 않아도 내용이 많아지면 스크롤바가 자동 생성 

여백 설정하기  

– <frame>태그의 속성 이용 

• “marginwidth” 프레임의 좌우 여백 지정 

• “marginheight” 프레임의 상하 여백 지정 

2. 프레임의 여백 

타겟 지정하기

– 링크를 클릭하면 해당 문서가 다른 프레임에 나타남 

– <frame> 태그에 “name” 속성 지정 

– target 속성에 프레임 이름 지정, 특정 문서가 해당 프레임에 로드 

– ex 

• <frame name=“프레임 이름”> 

• <a href=“파일명” target=“프레임 이름”></a> 

– Target=“_blank” : 링크된 결과를 새로운 브라우저 창에 표시 

– Target=“_self” : 링크 태그가 있는 프레임에 결과 표시. 기본값 

– Target=“_parent” : 상위 문서 프레임으로 결과 보여줌, 

• 상위문서는 프레임 문서로 나누기 전의 문서를 의미 

– Target=“_top” : 프레임을 이용한 현재 창이 사라지고 전체 화면으로 표시 

창 안에 작은 창 IFRAME 태그 

       • IFRAME 

– 인라인 프레임(inline frame) 

– 문서 내에서 다른 문서를 볼 수 있는 창 생성 

– ex 

• <IFRAME SRC=“파일이름” 속성=“속성값”></IFRAME> 

1. 1. 프레임 지정
   • <frameset> ~ </frameset> 프레임 초기 설정
   • <frame></frame>
     • 테이블에서 셀을 생성하는 방법과 마찬가지로 생성하고자 하는 프레임 만큼 생성
2. 2. <frame>태그
   • “src” 속성으로 분할한 프레임에 표시할 문서의 파일명 지정
3. 3. 상하좌우를 복합분할하기
   • 프레임 안에 프레임 생성 가능
4. 4. 프레임의 크기 변경금지
   • 분할된 프레임의 테두리선에 마우스를 가져가 드래그 하면 프레임의 크기 변경 가능
   • <frame>태그에 “noresize” 속성을 지정하여 크기 변경 금지

1. 프레임의 지정 

프레임 지정 

– 프레임 초기 설정, 테이블과 마찬가지로 프레임 사용 전 선언 

• <frameset> ~ </frameset> 

–   <frame></frame>  

• 테이블에서 셀을 생성하는 방법과 마찬가지로 생성하고자 하는 프레임 만큼 생성 

• <frame> 시작 태그는 반드시 사용 

• </frame> 종료 태그는 생략 가능 

2. 프레임에 파일 연결하기 

프레임에 파일 연결하기

• <frame>태그 

– “src” 속성으로 분할한 프레임에 표시할 문서의 파일명 지정 

– ex> 

<frameset cols/rows=“필셀 수나 웹 브라우저에 대한 비율”> 

<frame src=“프레임 1에 표시할 문서의 파일명”> 

<frame src=“프레임 2에 표시할 문서의 파일명”> 

</frameset> 

• 상하좌우를 복합분할하기 

– 프레임 안에 프레임 생성 가능 

프레임의 크기 변경금지 

– 분할된 프레임의 테두리선에 마우스를 가져가 드래그 하면 프레임의 크기 변경 가능 

– <frame>태그에 “noresize” 속성을 지정하여 크기 변경 금지 

– ex. <frame src=“index.html” noresize> 

1. 1. 테이블로 이미지와 텍스트 혼합 출력
   • <img>태그에서 align 기능을 이용해 이미지와 텍스트 혼합
   • 테이블 생성하여 구현이 좀더 좋은 방법
2. 2. 테이블 배경색 지정
   • bgcolor=“색상명 or RGB값”
3. 3. 테두리 색 지정
   • 테이블의 테두리 색을 원하는색으로 지정 가능
   • <table bordercolor=“색상명 or RGB값”>
4. 4. 테이블 배경 이미지 지정
   • 테이블에 배경색뿐만 아니라 배경 이미지를 지정 가능
   • <table background=“배경 이미지”></table>
   • background: 테이블 배경이미지 넣기
   • bordercolor="색상명 or 색상코드": 테이블 테두리의 색상을 지정하며, 기본값:회색
5. 5. 셀 합치기
   • <td colspan=3> 칸 합치기
   • <td rowspan=3> 줄 합치기

1. 테이블로 이미지와 텍스트를 혼합하여 출력  

개요 

• 테이블로 이미지와 텍스트 혼합 출력 

– <img>태그에서 align 기능을 이용해 이미지와 텍스트 혼합 

– 테이블 생성하여 구현이 좀더 좋은 방법 

• 테이블 배경색 지정 

– 테이블에 bgcolor 속성을 이용 배경색 지정 

– Bgcolor=“색상명 or RGB값” 

2. 테이블에 배경색 지정 

테두리에 색 지정 및 배경 이미지 지정 

• 테두리 색 지정 

– 테이블의 테두리 색을 원하는색으로 지정 가능 

– bordercolor 속성 

• <table bordercolor=“색상명 or RGB값”> 

• 테이블 배경 이미지 지정 

– 테이블에 배경색뿐만 아니라 배경 이미지를 지정 가능 

– background 속성 

• <table background=“배경 이미지”></table> 

          backgroud  테이블 배경이미지 넣기 

bordercolor="색상명 or 색상코드"  테이블 테두리의 색상을 지정하며, 기본값 : 회색

         • 셀 합치기 

– <td colspan=3> 칸 합치기 

– <td rowspan=3> 줄 합치기 

1. 1. 테이블 정렬과 외부 테두리 설정
   • Align 속성, align=“left/right”
   • Border 속성
     • 테두리선의 두께는 두꺼워질 뿐 테이블의 내부에 영향을 주지 않는다
2. 2. 테이블 여백 설정
   • cellspacing, 셀과 셀 사이에 여백 지정, 셀의 두께가 변경되는 효과
   • cellpadding, 테이블의 텍스트와 셀 사이의 여백 지정
3. 3. 테이블 크기 조절
   • 테이블 크기 조절 width, height=“픽셀 수/비율”
   • 비율로 지정 시 브라우저 사이즈에 대한 비율로 지정된다.