사용자가 입력한 것을 서버로 전송할 때 사용하는 것을 form이라고 합니다. 먼저 실습이라는 디렉토리에 form.html이라는 파일을 만듭니다. 아이디 : 비밀번호 : 이라는 태그는 사용자로부터 데이터를 입력받을 수 있는 필드를 만드는데 사용됩니다. 태그의 속성값을 통하여 어떤 타입으로 만들 것인지 결정을 합니다. , ... submit이라는 속성은 입력한 데이터를 제출 할 수 있는 버튼을 제공하며, type에 "submit"이라고 사용을 합니다. 위 예시의 제출버튼의 코드입니다. name이라는 속성은 서로 다른 값들을 구분하기 태그에 속성으로 name을 주는 것입니다. 저장되어질 곳이 명확히 명시가 되지 않으면 데이타 값이 어디에 저장되어질지 모르니 name으로 구분해서 명시해 줍니다. 태그의 속성으로..
table의 구조는 HTML과 유사하게, ~, ~, ~의 3구조로 나누어 집니다. 표를 작성할 때에 각 부분에 해당하는 내용들을 넣으면, 표의 내용의 위치를 변경하더라도 thead의 내용은 head위치에 tfoot의 내용은 foot위치에 표시가 됩니다. 이름 성별 학년 회비 이미남 남자 4학년 10000 이미녀 여자 4학년 5000 합계 15000 전체 표를 로 감싸고 제목에 해당되는 부분은 , 내용에 해당되는 부분은 로 항목 하나하나 감싸줍니다. 표 테두리를 두께를 지정할 때에는 border라는 속성을 이용합니다. 그리고 태그 자체의 가독성을 높이기 위해 헤드 부분은 , 주 내용 부분은 , 그 외의 내용 부분은 으로 감싸줍니다. 이것은 각 구조의 위치를 결정하기도 합니다. 이름 성별 학년 회비 이미남 ..
웹페이지에 표를 삽입하는 방법을 알아보도록 합시다. 이라는 태그를 이용해서 표를 만드는데, HTML의 태그들 중에서 가장 복잡한 태그라고 할 수 있지만 그렇다고 해서 이해하지 못하는 것은 아닙니다. 다음과 같은 예제를 만들어 봅시다. 이름 성별 학년 이미남 남자 4학년 이미녀 여자 3학년 이름 성별 학년 이미남 남자 4학년 이미녀 여자 3학년 border는 테이블의 테두리를 표시하는 것으로 다음에 나오는 숫자값으로 선의 굵기를 결정할 수가 있습니다. td(table data)의 약자로 테이블안에 들어가는 내용을 표시합니다. tr(table row)의 약자로 행을 표시해 주는 역할을 합니다.
이미지 태그에 대해서 알아보도록 합시다. 웹페이지에 이미지를 포함하는 방법을 말합니다. 초창기 HTML에는 이미지 태그를 사용하지 않았지만, HTML2 부터 포함되어서 사용되었습니다. 이미지 태그에는 라는 태그를 사용합니다. 예제를 만들어 봅시다. 실습폴더에 img.html이라는 화일로 이름을 저장합니다. 이미지를 불러올 사이트 참조는 픽사베이라는 사이트를 이용합니다. 이미지 참조 사이트 : https://pixabay.com 산이라고 검색하여서 이미지를 [실습]이라는 폴더에 다운로드를 받고, img.jpg로 저장하여서 이미지 태그를 사용하여 이미지를 불러와 봅시다. 이미지 태그 사용시, 마지막에 다른 태그들처럼 꺽쇠로 닫고 다시 태그를 써 주는 것이 아니라 태그를 안 닫아도 됩니다. 높이(height)..
학습목표 문단의 정렬 방법에 대해 알아봅니다. 문단 여백 및 첫 줄의 들여쓰기와 내어쓰기 방법에 대해 알아봅니다. 줄 간격 및 단락 간격 지정과 문단 테두리/배경 지정 방법에 대해 알아봅니다. 타자연습하기 문단 정렬하기 '스코티시폴드' 파일을 열고 제목(스코티시폴드)에 커서를 위치한 후 서식 도구 상자의 [가운데 정렬]를 클릭합시다. 줄 간격 및 문단 여백과 첫 줄 들여쓰기 제목을 제외한 내용 부분을 드래그하여 블록 지정 후 [서식] 메뉴 - [문단 모양]을 클릭 [문단 모양] 대화상자의 [기본] 탭에서 여백 항목의 왼쪽(10), 오른쪽(10), 첫 줄 항목의 들여쓰기(10), 간격 항목의 줄 간격(140%)를 지정 후 [설정]을 클릭합시다. 문단 테두리/배경 지정하기 제목을 제외한 내용 부분을 드래그하..