HTML

1.imagemap

  • image의 특정 좌표를 클릭하면 하이퍼링크를 통해서 이동하도록 해주는 것

1) image에 usemap 이라는 속성을 이용해서 이름을 1개 생성

2) map 생성

<map name="1번에서 사용할 이름">
    <area shape="rect, circle, poly" coords="좌표를 입력" href="이동할 URL" />
</map>
  • rect는 coords 에 왼쪽상단의 X, Y 좌표 그리고 오른쪽 하단의 X, Y 좌표를 설정
  • circle은 원의 중점의 X, Y 좌표 그리고 반지름을 설정
  • poly는 2개씩 쌍으로 무제한 설정 가능

2.table 관련 태그

  • table 태그의 내용은 python의 pandas의 DataFrame으로 바로 변환 가능
  • 여러 개의 데이터를 행과 열로 구분해서 출력할 때 이용
<table>: 테이블
<tr>: 하나의 행
<th>: 하나의 셀 - 제목 셀
<td>: 하나의 셀 - 일반 셀
  • table을 그냥 만들면 경계선이 보이지 않습니다.
    • 경계선을 출력하고자 하면 table 태그에서 border 속성에 경계선의 두께를 설정 - css에서도 가능
  • table 의 align 속성은 테이블 자체의 맞춤이고 th 나 td 에서의 align은 내용의 맞춤
  • table 이나 th, td 등에는 width 속성 이용해서 너비 설정 가능

  • table 이나 tr 에는 height 속성 이용해서 높이 설정 가능

  • td 나 th 에서 rowspan="합쳐질 셀의 개수" 이나 colspan="합쳐질 셀의 개수" 를 이용해서 셀 병합이 가능

  • thead, tfoot, tbody

  • thead로 tr을 감싸면 제목 행이 되서 맨 위에 출력
  • tfoot으로 tr을 감싸면 바닥글 행이 되서 맨 아래에 출력
  • tbody로 tr을 감싸면 내용행이 되서 thead 뒤에 출력
  • 이 태그들을 이용하면 문서의 구조를 쉽게 이해할 수 있으며 음성 브라우저를 사용하는 경우 셀을 읽을 때 thead에 설정된 셀을 같이 읽어 줍니다.

3.fieldset & legend

  • fieldset 은 묶어서 경계선을 만들고자 하는 경우 사용
  • legend는 fieldset 안에서 경계선의 제목을 만들 때 사용

4.form 태그

  • 사용자의 입력을 받아서 서버에게 전송하기 태그
  • form 안에서 name을 가진 속성들은 서버에게 전송됩니다.

1) form

<form action="전송받을 서버의 URL" method="get 또는 post를 설정하는데 전송방식"
enctype="multipart/form-data">
</form>
  • action은 form 안의 데이터를 전송받아서 처리할 URL을 작성하는데 생략하면 현재 URL이 자동으로 설정됩니다.
  • method는 파라미터(name을 가진 입력 도구)를 전송하는 방식을 설정하는데 get 은 URL에 입력한 내용을 표시해서 전송하고 post는 header에 숨겨서 전송합니다.
  • 검색 창에서 입력한 검색어는 get 방식을 이용해서 전송하고 로그인 창에서 입력한 아이디와 비밀번호는 post 방식으로 전송

2) label

  • 텍스트를 출력할 때 사용하는 태그
    <label>출력할 내용</label>
  • for 속성에 다른 입력도구의 id를 설정하면 모바일 웹에서 레이블을 선택해도 입력도구를 선택한 것과 동일한 효과를 만들어 줍니다.

3) input

  • 입력도구

  • type 속성에 설정할 수 있는 값: text, button, submit, reset, password, radio, checkbox, file, image, hidden

  • HTML5에서는 모바일을 위한 속성들이 추가

    • text : 한 줄 입력도구
    • password : 입력한 내용이 아니라 특수문자로 보여지는 한 줄 입력도구
    • radio : 여러 개 중에서 하나를 선택하도록 할 때 사용하는 것으로 name이 같으면 같은 그룹
    • checkbox : 여러 개 중에서 여러 개를 선택하도록 할 때 사용하는 것, name이 같아야 하나로 묶어서 서버에게 전송
    • file : 파일을 선택하기 위한 입력도구
    • button : 눌러서 어떤 동작을 위한 입력도구 - button 보다는 그림을 많이 사용
    • submit : 폼의 데이터를 서버로 전송해주는 버튼
    • reset : 폼의 데이터를 전부 클리어해주는 버튼
    • image : image를 배치할 수 있는 버튼
    • hidden : 화면에 출력되지는 않지만 서버에게 데이터를 전송하고자 할 때 사용

4) textarea

  • 여러 줄의 데이터를 입력받고자 할 때 사용
  • rows 와 cols 속성을 이용해서 초기 크기를 설정

5) select

  • 여러 개의 항목 중 하나를 선택할 때 사용
  • <select name="">
  <option value="서버에게 넘어가는 값">텍스트</option>
  <option value="서버에게 넘어가는 값">텍스트</option>
</select>

6) form에 입력도구 들을 배치할 때 입력하는 순서대로 배치하는 것이 좋고 필수 입력란을 먼저 배치하고 선택적 입력 란을 뒤에 배치하는 것이 좋습니다. 여러 개의 입력을 받는 경우 페이지를 나누는 것도 고려

5.div 와 span

  • 영역을 생성하는 태그
  • div 는 블록 태그이고 span은 인라인 태그

6.iframe

  • 다른 문서를 출력하기 위한 태그
  • 프로젝트 내의 문서만 출력 - 외부 링크도 출력이 가능하지만 보안의 문제때문에 제한적입니다.
    • 사이트에서 iframe에 출력할 수 없도록 설정할 수 있습니다.
  • width 와 height 속성을 이용해서 크기를 설정
  • name 속성을 이용해서 이름을 설정 : a 태그에서 target을 iframe의 name으로 설정하면 하이퍼링크의 내용을 iframe에 출력합니다.
  • src 속성을 이용해서 출력할 문서를 지정

results matching ""

    No results matching ""