[HTML5[ <table> 태그

태그 1. 표란?table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다. 2. 문법(Syntax) 제목 데이터 3. 설명(Description)- 데이터를 구조화할 때 사용됨- 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용- th는 데이터 그룹의 제목에 해당함 (header cells)- td는 th에 속하는 데이터 그룹 (standard cells) 4. 예제(Example)example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다. 아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다. // 표는 table로 시작 //tr로 한줄씩 만든다. 이름성별나이 최진혁남6 최유빈여2 exam..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] <a> 태그

태그 1. 요약(Summary)문서에서 다른 문서로 이동할 수 있는 수단을 의미한다. 2. 문법(Syntax)링크이름- href : 링크이름과 연결되어 있는 리소스(resource)의 주소- title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.- target : 문서가 로드될 대상으로 아래와 같은 것들이 있다._self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐_blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드_parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드프래임의 이름 3. 설명(Description)하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] <input> 태그

태그 1. type 속성에서 사용할 수 있는 유형 키워드설 명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가지는 필드이다. text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. search 검색 상자를 넣는다. tel 전화번호 입력 필드를 넣는다. url URL 주소를 입력할 수 있는 필드를 넣는다. email 메일 주소를 입력할 수 있는 필드를 넣는다. password 비밀번호를 입력할 수 있는 필드를 넣는다. number 숫자를 조절할 수 있는 화살표를 넣는다. color 색상 표를 넣는다. checkbox 주어진 항목에서 2개 이상 선택 가능한 체크 박스를 넣는다. radio 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다. datatime 국제 표준시(..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] <form> 태그_GET과 POST

태그_GET과 POST 1. 서버, 클라이언트폼을 이해하기 위해서는 우선 서버와 클라이언트라는 개념을 이해해야 한다. 서버는 정보를 제공하는 쪽이고, 클라이언트는 정보를 제공 받는 쪽을 의미한다. 웹브라우저의 주소창에 생활코딩의 홈페이지인 http://opentutorials.org를 입력하면 웹브라우저는 opentutorials.org에 해당하는 컴퓨터에게 생활코딩 컨텐츠를 요청한다. 이 맥락에서 웹브라우저는 정보를 요청하는 쪽 다시 말해서 제공 받는 쪽이기 때문에 클라이언트가 되고, opentutorials.org의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기 때문에 서버가 된다. 아래 그림은 서버와 클라이언트의 관계를 나타낸 것이다. 2. 폼 (form)폼이란 사용자의 데이터를 서버에 전송하는 방법이..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] <form> 태그 2

태그 2 1. 폼 요소 그룹으로 묶기(1) , 태그 , 태그는 폼 요소들을 보기 쉽게 그룹으로 묶어주는 태그이다. 예를 들어 쇼핑몰 사이트에서 주문서를 작성하는 폼에서 '사용자 정보'와 배송 정보'를 따로 나우어 표시하면 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리할 수 있다.이렇게 하나의 폼 안에서 여러 구현을 나눠 표시하려고 할 때 태그를 이용하면 과 태그 사이의 폼들을 하나의 영역으로 묶고외곽선을 그려준다. (2) 태그의 속성1) disabled: 이 속성을 사용하면 태그의 자식 요소들을 사용할 수 없게 만든다. 즉, 화면에는 표시되지만, 사용자가 내용을 입력하거나 항목을 선택할 수 없다.2) form: 현재 태그가 속해 있는 form의 이름을 표시할 수 있다.3) name: 이 속성..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] <form> 태그 1

태그 1 1. 텍스트 입력 (1) 텍스트 필드사용자로부터 텍스트 입력 받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 를 이용한다. 1) 문법 - type : text를 사용해야 텍스트 필드가 된다. - name : 입력한 데이터의 이름- value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시된다. - disabled : 값으로 disabled을 지정하면 텍스트 필드가 불능 상태가 된다. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않는다. - readonly : 값으로 readonly를 지정하면 텍스트 필드에 값이 입력되지 않는다. 서버로는 데이터가 전송된다. 2) 예제example1.html 닉네임 : (2) 비밀번호보안이 중시되..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] 아이프레임과 프레임

아이프레임과 프레임 1. iframe (1) iframe이란?페이지안에 페이지를 삽입하는 방법이다. 예를들어 생활코딩 홈페이지인 opentutorials.org에는 유튜브가 삽입되어 있는데, 유튜브를 삽입하는 방법이 바로 iframe을 이용한 것이다. (2) 문법 // iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공- src : 불러올 페이지의 URL- scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출no : 스크롤 하지 않음cf.) width, height, frameborder(프레임의 테두리 사용여부) 등의 속성이 더 있지만, 디자인..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] <meta> 태그

cf.) example2.html - 2초 후에 opentutorials.org로 페이지를 이동함 출처: https://devbox.tistory.com/entry/HTML5-meta-태그?category=574553 [장인개발자를 꿈꾸는 :: 기록하는 공간]

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] 이스케이핑

이스케이핑 1. 이스케이핑이란?HTML 코드는 브라우저에 의해서 해석되는 약속된 문자들이다. 예를들어 줄바꿈을 의미하는 태그를 줄바꿈의 용도가 아니라 화면에 표시하려면 어떻게 해야 할까? 아래와 같이 하면 어떻게 될까? 은 줄바꿈을 의미하는 태그입니다. 태그는 줄바꿈으로 해석되기 때문에 화면에 표시되지 않을 것이다. 이럴 때 사용하는 방법이 이스케이핑(escaping)이다. 아래와 같이 하면 된다. 은 줄바꿈을 의미하는 태그입니다. ''는 화면에 을 표시하면서 HTML 문법에 맞는 코드가 아니기 때문에 해석되지 않는 것이다. 2. 코드 리스트주요한 이스케이프 코드는 아래와 같다. (출처 : 위키피디아)& → & (ampersand, U+002..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms

[HTML5] URL

URL 1. URLURL(Uniform Resource Locator)이란 웹페이지, 이미지, 동영상과 같은 정보가 위치하는 유니크(식별,고유)한 위치 정보 2. URL의 구성http://codingeverybody.com/codingeverybody_html_tutorial/url_72/example2.html?mode=view#bookmark- scheme :어떤 통신 규약을 통해서 데이터를 전송할 것인가...- hosts: 컴퓨터를 식별하기 위함- url-path: 식별된 컴퓨터상의 디렉터리와 파일 식별- query: 그 파일에게 어떠한 정보를 보여준다. 그 파일이 그 정보에 따라서 차등된 다른 정보를 보여줌- bookmark: 특정한 지점으로 사용자에게 바로 지정해줌 3. 경로(path)상대경로 ..

• format_list_bulleted Web Programing/HTML5
• · 2020. 7. 6.
• textsms