키보드와 하루

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이라는 키워드를 사용했는데 이것은 지정한 개수만큼 같은 열에 스타일을 적용하는 것을 의미합니다.

1. 개념 ,, - 표에서 제목,본문,요약 구분하기 : 표의 구조를 나눌 때 위에 표시되는 내용으로 제목에 해당하는 부분됨 : 표의 구조를 나눌 때 중간에 표시되는 내용으로 본문에 해당하는 부분됨 : 표의 구조를 나눌 때 마지막에 표시되는 내용으로 요약이나 합계에 해당하는 부분됨 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 30 31 32 33 34 35 36 37 38 39 DOCTYPE html> 1 이름 동 호 2 테스트1 101동 1호 테스트2 102동 2호 3 요약이나 합계를 담는 영역 결과 화면 코드 설명 전체적인 설명 표의 구조를 잡기 위해서 thead,tbody,t..

1. 개념 , - 표에다가 제목 만들기 : table 태그 다음에 사용하고 이 태그를 이용하면 자동으로 표의 위,중앙에 표시됨 : figure 태그 안에 table 태그와 함께 사용됨 table 태그 위에 쓰면 표 위에 제목이 표시되고 /table 아래에 쓰면 표 밑에 제목이 표시됨 caption 과 다르게 중앙 정렬은 되지 않음 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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 DOCTYPE html> 1 기숙사 사용자 명단 이름 동 호 테스..

1. 개념 ,,, - 표 만들기 : table 태그는 브라우저에서 표를 만들어 사용하고자 할 경우에 사용되는 태그 : 행을 만들 때 사용 : 행 안에서 열을 만들 때 사용 : td 대신 사용하는 것으로 행 안에서 열을 만들면서 굵게 표시 및 가운데 정렬 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 DOCTYPE html> 1 이름 동 호 2 테스트1 101동 1호 테스트2 102동 2호 결과 화면 코드 설명 1 ...... tr 태그를 이용해서 먼저는 행을 만들었습니다. 그리고 th태그를 이용해서 열을 만들면 위에서 보는 거와 같이 가운데 정렬이 되고 글씨가 굵게 표시되는 것을 확인할 수..