키보드와 하루

1. 개념 input type = search,url,email,tel - 검색,웹주소,메일주소,전화번호 search 타입 : 일반 텍스트 필드와 비슷해 보이지만 글을 입력할 때 오른쪽에 X 표시가 나타나게 되면서 입력한 값을 한번에 쉽게 지울 수 있도록 함 url 타입 : http://로 시작되는지를 자동으로 체크 해주는 필드 email 타입 : @문자를 포함해서 입력한 내용이메일 주소 형식인지를 체크해 주는 것 tel 타입 : 입력한 값을 체크하지는 않지만 서버에서 받을 때 입력한 문자가 텍스트가 아니라 전화번호라는 사실을 인식하게 함 2. 태그 input type = search,url,email,tel html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18..

1. 개념 input type = hidden,text,password - 숨김,텍스트,비밀번호 hidden 타입은 화면에서 입력한 어떠한 폼도 보이지 않고 숨겨진 value 값을 서버로 전송되는 요소를 말함 text 타입은 한 줄로 텍스트를 입력할 수 있는 필드를 말함 속성 설명 name 필드 구분을 위한 이름 붙이기 size 화면에 몇 글자까지 보이게 할 것인지를 지정 value 필드 부분에 표시되고자 하는 내용 maxlength 최대로 입력 가능한 문자 개수를 설정 password 타입은 입력한 내용이 화면에 보이지 않고 '*' 나 '·'로 표시됨 2. 태그 input type = hidden,text,password html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ..

1. 개념 fieldset,legend - 폼에서 그룹으로 표현 fieldset은 form 태그 안에서 쓰이는 요소들을 그룹으로 묶어서 표현하고자 할 때 사용 2. 태그 fieldset,legend html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 DOCTYPE html> 1 테스트 입력1 검색 테스트1 검색 테스트2 2 테스트 입력2 검색 테스트3 검색 테스트4 결과 화면 코드 설명 1 ....... form 태그 안에서 fieldset을 쓰면 그룹으로 요소들을 묶어서 표현할 수 있습니다. 예를 들어서 회원가입을 할 때 보면 위와 같은 화면을 볼 수 있습니다 그룹으로 묶어서 나눠서 표현하고자 할 경우에는 field..

1. 개념 label - 폼 요소 앞에 붙여 활용하기 label은 사용자가 입력한 정보를 웹사이트로 보내는 폼 앞에 텍스트를 붙여서 제목을 표시하거나 체크박스나 라디오 박스에 붙여서 활용 2. 태그 label html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 DOCTYPE html> 1 검색테스트 2 노레이블1 노레이블2 3 레이블1 레이블2 결과 화면 코드 설명 1 폼 요소 앞에 제목을 붙이는 텍스트는 label을 쓰지 않아도 됩니다 왜냐하면 눈으로 볼 때는 큰 차이가 없어보이기 때문에 label을 쓰든 안 쓰든 큰 의미가 없어보이기 때문입니다 하지만 label 요소와 폼 요소가 떨어져 있거나..

1. 개념 form - 사용자 입력 정보 보내기 폼은 사용자가 입력한 정보를 웹 사이트로 보낼 수 있는 모든 요소들을 말함 속성 설명 method 서버 쪽으로 어떠한 방식으로 넘겨줘야 할지를 정함 get 주소 표시줄에 입력한 내용이 보임 256byte~4096byte로 길이 제한됨 post 대부분 이 방식을 사용 입력 길이에 제한이 없음 입력한 내용이 주소 표시줄에 보이지 않음 name 폼 이름을 지정 한 웹페이지 안에서 여러 개의 태그가 있을 경우 구분을 위해 사용 action 어떤 서버 프로그램으로 해야 할지를 정함 target 어떠한 창에서 열리도록 정함 2. 태그 form html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 DOCTYPE html> 1 결과 화면 코드 ..

1. 개념 map,area,usemap - 하나의 이미지에 여러개의 링크 지정 이미지 파일 하나에 하나의 링크를 사용할 경우에는 a href 뒤에 img src를 넣어서 사용함 예) 만약 이미지 파일 하나에 여러개의 링크를 넣고자 할 경우에는 map,area를 사용하여 링크를 지정할 수 있음 2. 태그 map,area,usemap html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 DOCTYPE html> 1 2 3 결과 화면 코드 설명 1 img 태그에 usermap 이라는 속성을 사용하여 map name을 가져오는 것을 확인하실 수 있습니다. 즉 이미지에 mapuser를 세팅할 것일 때 name이 snslink인 것을 매칭시켜라고 부여를 해주는 것입니다. ..

1. 개념 a - 링크와 앵커 만들기 링크 : 현재 페이지에서 다른 웹 페이지로 넘어가고자 할 경우에 사용 속성 설명 href 링크하고자 하는 문서나 웹 사이트 URL을 입력 target 링크를 표시하고자 하는 위치를 설정 _blank 새 창이나 새 탭에서 링크 문서가 열림 _self 이 속성이 기본 값으로 현재 화면에서 링크 문서가 열림 _parent 프레임 사용시 부모 프레임에 표시 _top 프레임 사용시 프레임을 벗어나 전체 화면에 표시 rel 지금 웹 페이지와 링크한 페이지와의 관계를 명시 hreflang 링크한 문서의 언어를 지정 type 링크한 문서의 파일 유형을 알려줌 앵커 : 현재 페이지 안에서 지정한 곳으로 이동하고자 할 경우에 사용 2. 태그 a html5 코드 1 2 3 4 5 6 7..

1. 개념 img - 이미지 삽입 웹 브라우저에서 이미지를 표시하고자 할 경우에 사용 src : 이미지 경로를 지정(파일이나 URL 경로) alt : 이미지를 설명해 주는 텍스트 width : 이미지 넓이를 지정 height : 이미지 높이를 지정 2. 태그 img html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 DOCTYPE html> 1 결과 화면 코드 설명 1 웹 브라우저에서 이미지를 표시하고자 할 경우에는 img 라는 태그를 사용합니다. 지금 보시면 저는 제 티스토리 대표 이미지의 URL를 가져와서 src에 담았습니다. URL이 너무 길고 의미가 없어서 ...... 으로 표시했습니다. 그리고 alt는 이미지를 설명하는 텍스트인데 이것은 시각장애인분들이 이미지를 볼수 없기 때문에 대..

1. 개념 colspan,rowspan - 표에서 열,행 합치기 colspan : 한 행에 여러 개의 열을 합쳐서 사용하고자 할 경우에 적용 rowspan : 한 열에 여러 개의 행을 합쳐서 사용하고자 할 경우에 적용 2. 태그 colspan,rowspan html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 DOCTYPE html> 1 1행 1~3열 1행 4열 2 2~3행 1열 2행 2열 2행 3열 2행 4열 3 3행 2열 3행 3열 3행 4열 4행 1열 4행 2열 4행 3열 4행 4열 결과 화면 코드 설명 1 ....... 표는 총 4행 4열..

1. 개념 , - 표에서 열(col) 스타일 적용 : 한 열이나 여러 열을 포함해서 모든 행에 같은 스타일을 적용 2. 태그 , html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 DOCTYPE html> 1 1행1열 1행2열 1행3열 1행4열 2행1열 2행2열 2행3열 2행4열 결과 화면 코드 설명 1 ...... cols를 보면은 기준은 영어 그래도 열에 해당하는 것을 적용합니다. colgroup에 cols를 넣어서 각각의 열에 스타일을 적용할 수 있습니다. 그리고 span이라는 키워드를 사용했는데 이것은 지정한 개수만큼 같은 열에 스타일을 적용하는 것을 의미합니다.