본문 바로가기

728x90
반응형

개발/HTML

HTML5 와 제이쿼리 HTML5 HTML5 는 기존 HTML4 에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보 등을 지원합니다. 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있으며, 운영체제에 상관없이 스마트폰, 태블릿 같은 모바일 환경에서도 기능을 구현할 수 있습니다. 기능 설명 Web Form 입력 형태를 보다 다양하게 제공합니다. Video 동영상 재생을 위한 API 를 제공합니다. Audio 음성 재생을 위한 API 를 제공합니다. Offline web 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 API 를 제공합니다. Web Database 표준 SQL 을 사용해 데이터를 저정할 수 있는 기능을 제공합니다. Web Storage 웹 애플리케이션에서 데이터를 저장.. 더보기
[HTML5] Form, Input 요소의 속성(작성중) form 요소의 속성 autocomplete 속성 autocomplete 속성은 form 요소나 input 요소에 입력된 정보를 저장할지 안 할지를 명시합니다. 이 속성의 속성값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를 자동으로 저장합니다. 그리고 나서 이 후에 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해 줍니다. 이 속성은 다음과 같은 input 타입에서만 사용할 수 있습니다. - text, password, range, color, date, datetime-local, month, week, email, url, tel, search 타입 ... novalidate 속성 form 요소의 속성이며, 이 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검.. 더보기
[HTML] Input 요소의 속성 input 요소의 속성 input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있습니다. value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정합니다. readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정합니다.(말 그대로 읽기 전용) disabled 속성과 다른 점은 form 의 전송 버튼을 누르면 초깃값이 서버로 전송된다는 점입니다. disabled 속성 disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다. disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없습니다. 또한, readonly 속성과는 달리 f.. 더보기
[HTML] 입력 양식 Form 요소 웹페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받고, 사용자가 입력한 데이터를 서버로 보낼때 사용합니다. ... action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시하고, 서버로 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler) 라고 합니다. form 요소 그 자체는 웹페이지에 나타나지 않지만 form 요소에 포함된 다양한 input 요소를 통해 사용자의 입력을 받습니다 method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 get 과 post 방식으로 나눠집니다. get 방식은 주소에 데이터를 추가하여 전달하는 방식으로 데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적입.. 더보기
[HTML] 레이아웃 iframe(inline frame) 요소 하나의 웹페이지 안에 어떠한 제한도 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다. iframe 요소는 명시된 크기로 삽입되는 창의 크기에 고정됩니다. style 의 border 속성을 이용하여 테두리의 색상 및 굵기 등을 변경할 수 있고, 태그를 이용하여 iframe 에 표시되어 있는 페이지를 변경할 수 있습니다. iframe 샘플 페이지를 바꿔보자!! 코드 결과!! 레이아웃(Layout) 레이아웃이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미하며 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. 1. HTML5 레이아웃 HTML5 에서는 웹페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공하고, 의미(semanti.. 더보기
[HTML] 블록과 인라인 블록과 인라인 HTML 의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 블록(block) 이나 인라인(inline) 의 값 중 하나를 가지게 됩니다. , , , , , 요소는 대표적인 블록타입의 요소입니다. , , 요소는 대표적인 인라인 타입의 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는데 자주 사용되는 대표적인 블록 요소입니다. 주로 여러 요소들의 스타일을 한번에 적용하기 위해 많이 사용됩니다. div요소의 스타일 적용 내부에 있는 아이들도 부모인 div와 같은 스타일이 적용됩니다 위 코드의 결과 !! 요소 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(.. 더보기
[HTML] 텍스트 요소 - 엔티티 엔티티(Entity) 미리 예약된 문자로 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. HTML 예약어를 HTML 코드에서 사용하면, 웹 브라웆는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티라고 합니다. 엔티티는 대소문자를 구분합니다. HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 앤티티 문자 앤티티 이름 16진수 엔티티 숫자 설명 &nbsp 줄 바꿈 없는 공백 > > 보다 큰 & & & AND 기호 " " " 큰따옴표 ' ' ' 작은따옴표 요기까지 임미다. 더보기
[HTML] 텍스트 요소 - 서식 단락(Paragraph) 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고 부릅니다. 태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됩니다. 단락입니다. 띄어쓰기와 줄 나누기 TML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못합니다. 웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문입니다. 줄 나 누 기 즉, 위와 같이 작성하여도 아래와 같이 표시될 뿐입니다.(스페이스바를 많이 누를 필요가 없..) 줄 나 누 기 띄어쓰기는 &nbsp 를 쓰면 하나에 한칸씩 띄어쓰기가 가능하고 줄바꿈은 태그를 사용합니다. 참고로 태그는 종료 태그가 없는 빈 태그입니다. 줄을 .. 더보기