본문 바로가기

프로그래밍/HTML

레이어(Layer) : 레이어는 층을 의미. 한 문서에 여러개의 레이러를 만들어 다른 레이어 위에 쌓을 수 있고 투명하거나 불투명하게 만들 수 있다. cf) 자바스크립트를 사용하면 레이러를 옮기거나 감추거나 크기 조절 등 많은 기능 가능. 형식) 1.레이어 생성 태그. 형식) 표현할 내용 표현할 내용2 2.레이어 보이기 감추기 ㄱ. 넷스케이프에서의 속성값 변경 보이기: (레이어 이름).visibility = "show" 감추기: (레이어 이름).visibility = "hide" ㄴ.인터넷 익스플로러에서의 속성값 변경 보이기: (레이어 이름).style.visibility = "visible" 감추기: (레이어 이름).style.visibility = "hidden" 더보기
스타일 정의를 위한 속성 1.폰트 속성 속성 속성값 설명가 사용 예 font-family 글자체(굴림,바탕...) 글자체 이름 font-family : verdana font-style normal,italic 글자 모양 지정 font-style : italic font-size pt(포인터),px(픽셀),in(인치) cm(센티미터),%(퍼센트) 글자 크기 font-size: 16pt, font-size : 20px font-weight normal,bold,light,bolder,ligher 글자 긁기 font-weight : bold font-variant normal,small-caps 작은 대문자 font-variavt : small-caps 2.텍스트속성 속성 속성값 설명과 사용 예 text-align left, cen.. 더보기
스타일 정의방법 1.기본 형식 형식) 선택자 {속성 : 속성값} 2.여러 속성의 정의 형식) 선택자 {속성 1 : 속성값1 ; 속성2 : 속성값 ;} cf) 속성과 속성값은 세미콜론(;)으로 구분 3.공통 속성의 정의 형식) 선택자1,선택자2,...,선택자n {속성 : 속성값} 4.CLASS 속성을 이용한 스타일 정의 형식) 선택자.클래스{속성 : 속성값} : 특정 태그에만 적용되는 클래스의 스타일 정의 ~ : 클래스로 지정된 스타일을 적용 .클래스명 {속성 : 속성값} : 모든 태그에 적용되는 클래스 스타일 정의 ex) ------------------------------------------- 이 텍스트는 스타일의 적용을 받아 파란색. 같은 태그지만 빨간색. 같은 태그지만 녹색. p 태그가 아니여도 빨간색. p 태.. 더보기
DHTML 문서 작성((스타일 시트, 레이어) 사용자의 요구에 의해 문서의 내용이나 외형을 동적으로 변화 시킬 수 있게 사용자와 서버간에 상호작용이 가능한 동적인 웹 문서를 작성하기 위해 DHTML을 사용. *DHTML의 구성요소 1. 문서 객체 모델(DOM: Document Objeck Model) 브라우저와 웹 페이지의 구성요소를 다루기 위해 브라우저의 내장 객체와 브라우저에서 표현되는 웹페이지의 텍스트,이미지,폼과 같은 각 요소에 이름을 지정 하여 이들 각각을 개체로 정의. 2.스타일 시트(Style Sheet) 문서의 물리적 스타일 정보를 논리적인 내용으로 부터 분리하여 별도로 정의하자는 것이 스타일 시트의 개념 ㄱ.내부 스타일 시트 ㄴ.외부 스타일 시트 ㄷ.라인 스ㅏ일 시트 3.레이어(Layer) 웹 페이지의 내용을 표현하기 위한 투명한 캔.. 더보기
자바스크립트를 이용한 HTML 문서 작성 HTML은 동적이고 상호작용이 필요한 웹페이지를 구성하는데 한계가 있다. 그러므로 자바나 플러그인 등 여러 기술이 개발되었다. 그러나 초보자들이 자바나 플러그인에 접근하기가 힘들고 HTML에 적용하기가 까다로워서 생긴것이 자바스크립트이다. *HTML 문서에 포함되어 실행되는 스크립트 언어. *컴파일 과정 없이 스크립트를 직접 실행하는 인터프리터 언어 *동적인 웹페이지를 작성할 수 있도록 함. *모든 플랫폼에서 인터프리터에 의해 실행이 가능 형식) 1.문자열 출력 형식) document.write("출력할 문자열" or 변수명); document.writeln("출력할 문자열" or 변수명); 2.이벤트 처리기 이용. ㄱ.마우스 동작과 관련된 이벤트 처리기 형식) 링크 텍스트 또는 링크이미지 링크 텍스트 .. 더보기
멀티미디어 사용하기 cf)웹브라우저에 따라 사용하는 방법이 달라진다. 1. HTML 문서에 배경 음악 넣기 ㄱ.넷스케이프에서의 배경음악 삽입. 형식) :볼륨 설정 ㄴ.익스플로러에서의 배경 음악 삽입. 형식) 2.동영상 넣기. ㄱ.넷스케이프에서의 동영상 삽입. 형식) : 동영상의 세로폭 ㄴ.익스플로러에서의 동영상 삽입. 형식) :동영상의 세로폭 더보기
입력 양식 만들기 기본 형식) -ACTION : 입력 데이터를 처리할 CGI 프로그램의 URL. -METHOD : 사용자가 입력한 데이터를 서버에 전달하는 방법. *get : 디폴트로 데이터가 환경변수를 통하여 서버에 전달. 데이터의 라인 수가 제한. *post: 데이터가 표준 입력 방식으로 서버에 전달. 데이터의 라인 수에 제한이 없으므로 주로 사용. 1. 입력 태그 형식) -TYPE *TEXT : 문자 입력 *PASWORD : 문자 입력시 데이터를 * 로 표시 *CHECKBOX: 체크상자를 생성 *RADIO : 여러개 중 하나를 선택하는 입력 양식 *HIDDEN : 숨겨진 입력 양식을 생성 *IMAGE : 이미지 입력 양식을 생성 *SUBMIT : CGI 프로그램에 데이터를 전달 *RESET : 입력 내용을 취소 -N.. 더보기
프레임 만들기 프레임 : 웹 문서의 한 화면을 여러개의 창으로 분할할 수 있는 기능을 제공. 기본 형식) cf) 웹브러우저 크기에 대한 비율(%)로 지정 하며 나머지 전루를 *로 지정한다. 1. 프레임의 테두리선 변경. 형식) 2. 프레임의 여백 조절 형식) : 좌우 여백 조절 : 상하 여백 조절 3.프레임의 크기를 변경 금지. 형식) 4.프레임의 스크롤바 지정. 형식) -yes : 내용의 많고 적음에 관계없이 스크롤바가 나타남. no : 아무리 내용이 많아도 스크롤바가 생기지 않음. auto : 프레임의 크기보다 내용이 많을 때만 스크롤바가 생김 5.타겟 프레임 지정 : 원하는 프레임으로 링크를 설정 형식) 브라우저에 나타날 텍스트 -TARGET = "_blank" : 새로운 윈도우를 생성한후 링크된 문서를 표시. .. 더보기
테이블 만들기 1. : 테이블을 선언하는 태그 형식) ~ ~ : 테이블의 외곽선 지정. ~ : 테이블의 가로폭조절. ~ : 테이블의 세로폭조절. ~ : 셀과 셀 사이의 여백을 조절. ~ : 셀과 문자 사이의 여백을 조절. ~ :테이블 색상. ~ :테이블 정렬. 2. : Table Row. 테이블 내의 한 행을 정의 ~ : 행의 색상. 3. : Table Data. 각 행의 셀을 만들 때 사용. : 셀의 데이터에 대한 좌우 정렬 : 셀의 데이터에 대한 상하 정렬 : 셀의 행을 합치기 위한 태그 : 셀의 열을 합치기 위한 태그 : 셀의 수평 길이를 나타낸다. : 셀의 수직 길이를 나타낸다 ~ : 셀의 색상. 4. : Table Header.행에 있는 셀을 제목으로 지정하여 강조 5.: 테이블의 제목을 표시 테이블 제목 e.. 더보기
이미지 삽입 1.이미지 태그. 형식) -src는 필수, alt 는 이미지에 마우스를 가져가면 파일에 대한 설명. 2.이미지와 문자 정렬. 형식) : 이미지의 위 부분에 문자 출력 : 이미지의 중간부분에 문자 출력 : 이미지의 아래부분에 문자 출력 : 이미지를 왼쪽에 위치 : 이미지를 오른쪽에 위치 3.이미지의 크기 조절. 형식) 4.이미지의 여백 조절. 형식) -VSPACE : 이미지 상하의 여백 -HSPACE : 이미지 좌우의 여백 더보기

티스토리툴바