대화상자 사용자에게 간단한 메시지를 보여 주거나 확인 요청 또는 외부 입력을 받기 위해서 함수들을 사용한다. alert("주의, 경고시 사용하는 대화상자 보여주는 함수"); prompt("사용자에게 알려주는 구문","입력하지않을시저장할기본값"); confirm("동의를 구하는 메세지"); 알림 창 : alert("주의, 경고 메시지 내용") alert("메시지") 확인 창 : confirm("동의 메시지 내용") 반환값 = confirm("메시지 확인") 입력 창 : prompt("알림","미입력시 기본 값") 반환값 = prompt("설명",기본값)
프로그래밍언어
CSS 텍스트 속성 letter-spacing, word-spacing 속성 문자(letter)나 단어(word) 사이의 간격 지정. letter-spacing : normal | ; word-spacing : normal | ; normal => 기본 간격을 사용(글자 사이 추가 간격 없음, 단어 간격 : 0.25em) => 숫자로 간격 지정. 음수값을 갖는 경우에는 간격이 좁아져 글자나 단어가 겹쳐서 표시 될 수 있다.(EX. 음수값을 갖는) line-height 속성 문장의 줄 간격 지정. line-height : normal | | | % ; normal => 기본 간격을 사용 => 현재 글꼴 크기에 대한 상수 배로 지정 => px, pt, cm 등으로 간격 지정 % => 현재 글꼴 크기에 대한 ..
CSS 글꼴 속성 웹페이지의 텍스트에 대해서 글꼴, 글자 크기, 굵기 등과 같은 스타일을 지정하기 위해서 font(글꼴)속성이 있다. font-family 속성 글자체(폰트)를 지정. 시스템에 해당 글씨체를 지원하지 않을 경우를 대비해 여러 개의 글자체를 동시에 지정하면, 쉼표로 구분한 폰트를 나열 된 순서대로 폰트의 지원 여부에 따라 앞에 오는 폰트를 사용한다. font-family : | ; => 'arial', '궁서체'와 같은 구체적인 폰트의 이름을 지정. 폰트명 사이에 공백이 있는 경우에는 따옴표('',"")를 사용. => 'serif'(명조 계열), 'sans-serif'(고딕 계열), 'cursive'(필기체), 'fantasy'(장식이 된 글꼴), 'monospace'(일정한 공간으로 된 ..
CSS 색상 속성 색상 지정 방식 색상명 색상 이름에 해당하는 영어 단어를 써준다. 16진수 색상 RGB에 해당하는 16진수를 #RRGGBB와 같이 표현하는 방식이다. 두 자리 숫자가 동일한 경우에는 #RGB로 표시 할 수 있다. RGB 색상 RGB의 값을 0~255 사이의 10진수로 표시 하는 방법이다. rgb(R,G,B)에서 RGB에 해당 10진수를 넣어주고 백분율로 rgb(R%, G%, B%)로 표시 할 수 있다. RGBA 방식도 제공되는데 여기서 A(alpha)는 투명도를 지정하는 것이다. 0.0(완전 투명) ~ 1.0(기본값, 완전 불투명)사이의 값으로 지정한다. rgba(R, G, B, A)로 지정한다. 색상명 별 정의 된 키워드 색상명RGB(16진수)색상색상명RGB(16진수)색상 aqua#0..
CSS 개요 CSS의 필요성과 개념 CSS의 정의 방법과 HTML 문서에서의 적용 방법 활용 다양한 CSS 선택자의 종류를 이해하고 활용 1. CSS란? HTML 4.01에서는 태그나 태그의 align 속성을 사용해서 스타일을 지정했다. 하지만 최근의 웹 표준 개발 방법론에서는 문서의 내용, 표현, 동작을 서로 분리해서 나타내도록 하고 있다. 즉 문서의 내용은 HTML을 이용해 정의하고, 화면에 표현은 CSS를 이용하고, 동작은 JS를 이용해서 정의하도록 한다. CSS의 사용은 다음과 같은 장점들을 갖는다. HTML으로 표현 할 수 없었던 다양한 스타일을 적용 할 수 있다. 한 번의 속성 정의로 여러 요소 및 여러 문서에서 사용 할 수 있어 전체적인 디자인에 통일성을 줄 수 있다. 웹 문서의 내용과 스타..
태그사용자와 상호 작용을 위해서 사용자로부터 데이터를 입력 받아 서버로 전달하기 위한 입력양식(폼)을 제공한다.다양한 형태의 데이터를 입력받기 위한 요소들을 담는 컨테이너 역할을 수행한다.사용자 데이터 입력입력된 데이터 서버로 전달 전달 받은 데이터 서버 스크립트를 이용하여 처리결과 웹페이지 형태 사용자에게 전달 항목1 항목n form 태그의 속성속성설명action="URL"폼이 제출될 때 폼 데이터를 전달받아 처리할 페이지의 주소(경로)를 지정method="전송방식"폼 데이터를 제출 할 때 사용하는 HTTP 방법(get, post)을 지정name="이름"폼의 이름을 지정accept-charset="인코딩"폼 제출을 위해 사용되는 문자 인코딩..
HTML 문서에서 오디오 재생HTML 문서에서 비디오 재생 및 자막 처리HTML5에서는 오디오와 비디오의 재생을 위해 audio요소와 video요소가 추가되어 외부 플러그인 설치 없이 구현 할 수 있게 됐다.HTML5 이전까지는 enbed 요소나 object 요소를 사용해 왔다.audio 요소오디오 재생사용방법 : 웹브라우저에서 지원하지 않을 경우 대체해서 표시 될 텍스트나 이미지 태그의 속성속성설명autoplay웹 문서 로딩 시 오디오 자동 재생할지 여부를 지정controls오디오 제어기(재생, 일시정지, 볼륨 등)의 표시 여부를 지정지정되지 않을 경우 화면에 아무것도 표시되지 않는다.loop오디오 반복 재생 여부를 지정muted음소거 여부를 지정preload="속성값"웹 문서가 로딩 될 때 오디오의 ..
테이블 태그의 필요성테이블 관련 태그의 종류와 기능 이해테이블 관련 태그와 속성 사용해서 원하는 테이블 생성 가능테이블 기본형식표 제목제목1제목2내용내용 표 제목 제목1 제목2 ... 내용 내용 ... ... 태그태그 설명태그 관련 속성테이블 정의 태그border="테두리 두께"테이블의 행(table row), 나 태그의 부모태그로 혼자서만 사용 할 수 없다. 테이블의 표준 셀(table data), 태그의 자식태그로 왼쪽 정렬이 기본 값이다. 테이블의 헤더 셀(table header), 태그의 자식태그로 내용은 굵게 가운데 정렬이 기본 값이다. 테이블의 제목으로 테이블 상단에 위치한다. 시작태그의 바로 다음에 사용하고, 테이블 바로 위에 진하게 가운데 정렬로 표시된다.CSS의 속성 ..
HTML에서 그림과 링크 표현img 태그 관련 속성 활용a 태그를 다양한 유형의 콘텐츠에 활용1. 이미지 삽입img 태그는 웹 문서에 이미지를 삽입하고 시작태그만 사용한다.는 인라인 요소로 줄바꿈을 위해서는 을 사용한다.src="이미지파일경로" : 문서에 표시할 이미지 파일 경로 지정html문서와 동일 폴더에 있는 경우 : "파일명.확장자명"절대경로의 경우 : "절대경로\파일명.확장자명"상대경로의 경우 : "현재 작업 위치 기준 상대경로\파일명.확장자명"GIFJPGPNGGraphics Interchange Format256개 색상 지원투명배경 처리 지원용량이 작음애니메이션 지원로고나 클립 아트 형태의 이미지에 적합Joint Photographic coding Experts Groups트루컬러 지원압축률이..
HTML에서 텍스트 표현 글자와 텍스트를 표현하는 다양한 HTML 태그를 활용 목록 지정과 관련된 태그 활용 div와 span태그의 기능 차이 이해하고 활용 1. 주석 사용 방법 : 주석 사용 이유 : 웹브라우저 화면상에는 표시 안됨, 차후에 코드의 이해 및 유지 보수의 편리를 위해서 사용 주석 주의 사항 : 주석 안에서 , -- 와 같은 기호 사용 불가 2. 텍스트 표현 br : 줄바꿈 태그. 종료태그 없음. forced line break. p : 단락을 나누는 태그로 단락 전후에 줄바꿈 효과. 연속사용시 한 번만 적용. paragraph. 공백 및 특수 문자 입력 : &특수이름;, 
진수코드;, 진수코드; 특수문자 특수이름 아스키코드 > > > & & & & " " " " 공백 © ©..
