웹 개발 기본지식 – HTML 태그(2)

여는 글

오늘 이 페이지에서 소개 드리는 태그들은 파이썬을 통해 웹페이지를 조작하는 경우 가장 주요하게 다뤄지는 태그들 중 하나입니다.

 

특히 Input 태그의 경우, ID/PW/데이터를 입력하는 데 사용되므로 더더욱 그러하죠. 특정 정보를 입력하는 웹사이트에, 엑셀로 정리해둔 정보를 순차적으로 입력하는 업무가 있다면 Input/Textarea/Button에 접근하게 될 일이 꽤 있는 편입니다.

 

 

멀티미디어 태그의 경우, 크롤링을 하는 경우에 각 멀티미디어 태그의 주소 부분을 긁어오는 형태로 사용되기도 합니다. 특정 검색 이미지의 10개 순위 이미지를 긁어온다던가 등등… 여러모로 구조 자체는 복잡하지 않으면서도 웹 페이지 내의 정보를 긁어오기 위해서는 꼭 알아야 하는 부분들이죠. 

실질적으로 파이썬과 BS4를 통해 웹사이트를 조작을 할 때 핵심이 될 수 있는 부분이니 잘 익혀두시는 것이 좋겠습니다.

 

 

 

 

이미지 태그 - img

1. 특징
   • HTML페이지엔 이미지가 직접 삽입되지 않으며, HTML페이지에 링크가 되며 참조되는 것임
   • 참조된 이미지를 위한 공간을 생성함
2. 태그 : img
3. 속성
   • src : 이미지의 소스
   • alt : 이미지가 없는 경우 표시할 멘트
   • 기타 : align, border, hspace, vspace, width, height
4. 참고자료 - 대체이미지(웹) 제공사이트 : http://placehold.it/1000x200(대체이미지로 회색박스(사이즈 문구 포함)를 제공하는 웹사이트임)
   
   

오디오 태그 - audio

1. 표준 오디오 : MP3, WAV, OGG 지원(단, IE의 경우 WAV/OGG 불가)
2. 태그
   • 메인 : audio
   • 하위 : source(종료태그 불필요 / 메인 태그안에 2개가 있다면 전자 먼저 실시 후, 미동작시 후자를 실행함)
3. 속성 - audio태그 하위 속성
   • autoplay : 음악 자동재생 여부
   • controls : 음악재생도구 출력 여부
   • loop : 반복 여부
   • muted : 음소거
   • preload : 음악 재생전 모두 불러올지 / 재생시작시 불러올지 여부
4. 속성 - source태그 하위 속성
   • src : Source / URL
   • type : mime(source의 타입으로 제시가능한 포맷)값 입력
     • MP3 = audio/mpeg
     • WAV = audio/wav
     • OGG = audio/ogg
       
       

728x90

 

비디오 태그 - video

1. 표준 비디오 : MP4, WebM, Ogg (단, IE의 경우 WebM, Ogg 불가)
2. 태그
   • 메인 : video
   • 하위 : source(종료태그 불필요 / 메인 태그안에 2개가 있다면 전자 먼저 실시 후, 미동작시 후자를 실행함)
3. 속성 - video태그 하위 속성
   • autoplay : 음악 자동재생 여부
   • controls : 음악재생도구 출력 여부
   • loop : 반복여부
   • preload : 음악 재생전 모두 불러올지 / 재생시작시 불러올지 여부
   • width/height
   • poster : 비디오 로딩 화면 이미지
4. 속성 - source태그 하위 속성
   • src : Source / URL
   • type : mime(source의 타입으로 제시가능한 포맷)값 입력
     • MP4 : video/mp4
     • WebM : video/webm
     • Ogg : video/ogg
       
       

입력양식 태그 - form, input, textarea, select, fieldset, legend

form

1. 속성
   • accept-charset : 입력데이터에 사용될 문자 인코딩 지정. 대부분 UTF-8 사용 (문자열 인코딩 참고 : w3schools.com)
   • action : 입력데이터의 전달 위치를 지정. (폼에서 선택한 내용들을 보낼 위치를 의미 / 주로 특정 php파일로 보내는데, 이는 DB의 일종임)
   • method : 전달 방식 선택
   • enctype : encrypt type. 입력데이터를 서버에 보낼 때 인코딩할 방법을 지정(method를 post로 할 때만 사용 가능)
   • name : 입력데이터의 form 양식의 이름을 지정
   • novalidate : 데이터 전달시 데이터 유효성 검사 미실시
   • target : 데이터 전달후 서버 응답을 표시할 위치를 지정 (_blank / _self / _parent / _top)
     
     

input

1. 특징
   • 사용자가 데이터를 입력할 수 있는 입력 필드를 지정(보통 짧은 줄)
   • 입력 컨트롤 선언을 위하여 form요소 내에서 사용
   • Input태그 선언시 type속성을 이용하여 컨트롤을 지정
   • Input으로 지정된 파일업로드 개체의 경우도, Send_Keys를 통해 str전송이 가능하다
2. 태그 : input
3. 속성 - type : button / checkbox / color / month / tel / email …
   • radio : 원형 체크박스
   • reset : 초기화
   • submit : 제출(action으로 데이터 전달)
   • datetime : 날짜 선택 양식
   • datetime-local : 지역 날짜 선택 양식
     
     

textarea

1. 기능 : 여러줄의 긴 문장을 입력할 수 있는 양식(자소서 입력 양식 생각하면 쉽다)
2. 속성
   • cols : 너비(글자수)
   • rows : 높이(줄 수)
   • disabled : 영역 비활성화
   • maxlength : 최대 길이 지정
   • placeholder : 한글의 누름틀 기능에 해당하며, 텍스트 영역의 예상값을 설명하는 짧은 힌트( “ID” / “Password” / “메모를 입력하세요” 등…)
   • required : 필수 입력 여부 지정
     
     

Select

1. 태그
   • 메인 태그 : select - 드롭다운 목록 선언
   • 하위 태그 : option, optgroup
     • option : 목록에서 사용 가능한 옵션을 정의
     • optgroup : 목록의 옵션 그룹 정의
2. 속성
   • select
     • autofocus : 페이지가 로드될 때 드롭다운 목록에 자동으로 포커스가 됨
     • required : 필수 입력 여부 지정
     • size : 드롭 다운 목록에 표시되는 옵션의 수 지정
   • option
     • disable : 해당 옵션 비활성화
     • selected : 옵션 중 기본값(초기값) 설정
     • value : 선택한 옵션의 정보를 서버로 보낼 때, 그 값을 지정
       
       

fieldset

1. 특징 : 양식의 관련 요소들을 그룹화하는데 사용 / 당연히 form안에서 사용함
2. 속성
   • disabled : 관련 요소 그룹을 비활성화
   • form : 필드셋이 속한 하나 이상의 form을 지정
   • name : 필드셋의 이름 지정
     
     

legend

필드셋 요소에 대한 캡션을 정의하는데 사용 / 당연히 form안에서 사용함