37일차 수업정리(XHTML)

**XHTML

1. 이미지 태그 - img

    => 빈태그(닫는 태그가 없음)이고, 인라인요소(주위에 다른 요소가 배치될 수 있음)

  1) 필수 속성

    => src : 이미지 파일 경로(url or 상대경로)

    => alt : 이미지가 없을 때 보여지는 대체 텍스트

  2) Web에서 사용가능한 이미지 포맷

    => gif : 256컬러만 지원 및 애니메이션 기능

    => jpg(jpeg) : 약16만컬러 지원, 손실 압축

    => png : 비손실 압축, 투명배경 가능, 용량이 jpg보다 큼, 모바일에서는 png권장

                 (앱스토어 올릴때 사용하는 이미지는 png만 가능)

    => bmp : 비트맵 이미지, 웹의 표준 이미지는 아님

  3) 이미지 파일을 프로젝트에 저장하고 출력하는 경우 이미지를 위한 별도의 디렉토리를 만들어서 저장 및 출력 권장

    - resources : 프로그램에서 사용할 파일들을 저장하는 디렉토리 명으로 많이 사용

    - assets : 용량이 큰 리소스들을 저장하는 디렉토리

  4) 기타속성

    - width :너비, 픽셀 or 백분율로 설정 가능

    - height : 높이, 픽셀 or 백분율로 설정 가능

    - border : 경계선 두께 설정

    - hspace, vspace : 좌우 여백 설정

    - align : 맞춤을 설정, 해당 설정을 left, right로 설정시 텍스트가 여러줄 배치 될 수 있음

  5) 이미지와 이미지 사이에 텍스트를 출력하고(글자 사이즈 다르게) 이미지 오른쪽에 목록을 만들어보기

  6) 이미지 출력시 주의 사항

    => 외부 자원은 기본적으로 캐싱이 됨

        - 한번 접근했던 자원은 웹 브라우저에 저장되어 다음에 재사용 함

        - 하나의 이미지를 여러곳에서 사용하는 경우 경로를 동일하게 만들어 주면 재사용(이미지 출력속도 증가)

    => 이미지는 width, height를 생략시 원본크기 그대로 출력

        - 원본 이미지의 너비, 높이를 변경하여 출력하는 것은 권장하지 않음(강제 수정시 이미지가 깨질수 있음)

        - 너비와 높이 생략시 이미지를 제외한 부분을 출력 후, 이미지를 가져와서 이미지 재배치하고 다시 출력

        - 너비와 높이 설정시 영역을 만들어 두었다가 이미지를 그 영역에 출력

 

2. 이미지 맵

    => 이미지의 특정 영역을 클릭하면 하이퍼링크를 이용하여 이동하도록 만드는 것

    => a 태크 안에 img배치하면 클릭시 a 태그의 href 속성에 설정한 링크로 이동

    => 이미지 맵은 이미지 한개에 여러개의 링크를 설정 가능

    ex) 지하철 지도, 카토그램

    => 형식

<img src="이미지경로" usemap="map의 이름"/>
<map name="이름">
	<area shape="도형종류" coords="좌표값 나열" href="링크" alt="보충설명"/>
    <area shape="도형종류" coords="좌표값 나열" href="링크" alt="보충설명"/>
</map>

  1) 도형 종류

    - rect(사각형) : 왼쪽 상단의 X 좌표, Y좌표 / 오른쪽 하단의 X좌표, Y좌표

    - circle(원) : 중심의 X좌표, Y좌표, 반지름의 길이

    - poly(다각형) : X좌표, Y좌표, X좌표, Y좌표...

 

3. Table

    => 격자모양으로 데이터를 출력해주는 요소

    => 여러개의 데이터를 화면에 출력하고자 할때 많이 사용

  1) 모바일에서의 Table

    => 너무 많은 양의 데이터를 Table을 이용하여 출력하게 되면 수직 방향으로 스크롤을 너무 많이 해야 함

    => 모바일에서는 되도록 Table보다는 그래프를 이용 or 서식을 길고 좁은 폭 목록으로 변경 표현을 권장

  2) Table의 기본 태그

    - table : 표

    - tr : 한줄

    - th : 제목 셀

    - td : 일반 셀

    => 기본적으로 선이 출력되지 않기 때문에 선을 출력시, table 태그를 만들 때 border 속성에 경계선 두께를 설정

    => 셀 안에 출력할 내용을 작성

    => 셀 안에는 지금까지 작성했던 모든 태그를 사용할 수 있음

  3) table 태그에 사용할 수 있는 속성

    - border : 경계선 두께

    - bordercolor : 경계선 색상

    - cellspacing, cellpadding : 셀 사이 여백, 셀 안의 여백

    - summary : 테이블에 대한 요약

  4) table, tr, td 캐그에 사용할 수 있는 속성

    - width와 height : 너비와 높이

    - bgcolor : 배경색

    - background : 배경 이미지

    - align : 맞춤(table에 설정시 테이블의 맟춤, td에 설정시 td안의 내용에 대한 맞춤)

  5) 셀합치기

    => colspan : 열을 합치는 속성으로 합칠 열의 개수를 설정

    => rowspan : 행을 합치는 속성으로 합칠 행의 개수를 설정

    => td 태그에 설정 해야 함

  6) thead, tbody, tfoot

    => thead로 tr태그를 감싸면 제목행이 됨(최상단으로 이동)

    => tbody로 tr태그를 감싸면 가운데 내용이 됨

    => tfoot로 tr태그를 감싸면 맨 아래행이 됨

    => 테이블 작성시 되도록 이 태그들로 tr을 감싸는 것이 좋음

    => 스크린 리더기는 thead가 있는 경우 tbody의 내용을 읽을 때, thead의 내용도 같이 읽음

 

4. 멀티미디어 재생

    => HTML4에서는 embed나 object 태그를 이용

    => HTML5에서는 video나 audio 태그를 이용

 

5. form

    => 사용자의 입력을 받을 수 있는 요소

    => 형식 : <form action="전송할 서버의 URL" method="get 또는 post" enctype="multipart/form-data"></form>

        - action : 전송할 서버의 URL로 생략하면 현재 URL이 서버의 URL

        - method : 파라미터 전송 방법

        - get : 파라미터가 URL 뒤에 추가되어 전송, 보안이 안되고 길이 제한이 있음(속도가 빠름 - 검색)

        - post : 파라미터가 header에 숨겨져서 전송, 보안이 되고 길이 제한이 없음

                  (최근에는 특별한 경우가 아니면 post 방식으로 전송하는 것을 권장)

        - password(보안), textarea(길이제한), file(길이제한)이 있는 경우에는 반드시 post 방식으로 전송해야 함

        - enctype : 전송방식, 생략시 모아서 한꺼번에 전송하고, multipart/form-data를 설정하면 나누어서 보냄

                      (form안에 file이 있는 경우 반드시 설정, 비설정시 파일의 내용이 아니라 파일명이 전송됨)

        - 이 내용은 FrontEnd, BackEnd 상관없이 중요(웹 프로그래밍 면접시 많이 물어보는 질문)

  1) fieldset, legend

    - fieldset : 콘텐츠를 하나로 묶인 것처럼 보여주는 태그(경계선을 만들어줌)

    - legend : fieldset 태그 안에 사용해서 왼쪽 상단에 제목을 표시

  2) label

    => 텍스트를 출력하기 위한 요소

    => form 안에 입력받기 위한 요소를 만드는 경우 label과 함께 사용하는 것을 권장

        - label을 만들 때 다른 입력 요소의 id를 for속성에 설정하면 모바일 브라우저에서는 레이블을 선택하여 입력가능

  3) input 

    => 폼 안에 배치되서 데이터를 입력받도록 해주는 요소

    => type이 10가지 

        - text(기본type) : 한줄의 문자열을 입력 받을 수 있는 입력 상자

        - password : 비밀번호를 입력 받을 수 있는 상자

        - radio : 라디오 버튼

        - checkbox : 체크박스

 

        - button : 버튼 제작

        - submit : form의 내용을 server에게 전달하는 기능

        - reset : form 안의 내용을 전부 clear

        - image : 이미지 버튼

 

        - file : 파일을 선택

        - hidden : 눈에 보이지는 않지만 서버에게 데이터를 전달하고자 할 때 사용

 

    => name : 서버에게 전송한 경우 서버가 인지하는 이름

        - radio와 checkbox는 name이 같아야 하나의 그룹이 됨

        - 버튼계열(button, submit, reset, image)에는 부여하지 않음

 

    => value : 기본값

        - radio, checkbox는 value 를 반드시 설정해야 함(value를 가지고 radio, checkbox에서 선택한 항목 구분)

 

    => checked : radio(생략불가)나 checkbox를 체크 할 수 있는 속성, radio는 되도록이면 하나를 체크 한 상태로 제공

 

    => disabled : 사용이 불가능하도록하고, 서버로 데이터를 전송하지 않음

    => readonly : 수정이 불가능하도록 하고 서버로 데이터를 전송

 

    => size : text와 password만 사용하는 속성으로 크기를 의미

    => maxlength : text와 password만 사용하는 속성으로 최대입력 글자 수를 의미

  4) select

    =>목록상자

<select>
	<option>내용1</option>
	<option>내용2</option>
    ...
</select

    =>size : 화면에 보여질 데이터 개수를 설정

    => multiple : 여러개 선택할 수 있도록 해주는 속성

    => optgroup을 이용하면 옵션을 묶을 수 있음

 

  5) textarea

    => 여러줄 글 상자

  6) button

    => 버튼

 

6. 회원가입 폼 만들기

    => email, password, 성별(남자 or 여자), 취미(운동, 게임, 독서, 등산 중 여러개 선택 가능), 생년월일(select), 하고 싶은 이야기(여러줄 글상자), 사진을 입력받고 확인을 누르면 서버로 전송하고 다시 작성을 누르면 화면 전체 클리어

 

7. 영역 관련 태그

  1) div : 블록 태그

  2) span : 인라인 태그

 

8. iframe

    => 다른 문서를 표시하기 위한 영역

    => src에 표시할 문서의 경로 작성

    => width와 height로 너비와 높이를 설정

    => name에는 자신의 이름을 설정

 

 

 

Tip!

1. 면접 준비 - post와 get의 내용과 차이점