[Crawling]Python Study - PPT Presentation Material - 3

• 기본 구조(3.4.html)

• 순서 없는 목록 태그

• 기본 목록을 생성할 때 사용

• 웹페이지의 네비게이션 메뉴를 생성할 때에 사용

• 참고 : https://devdocs.io/html/element/ul

DevDocs

• 참고 : https://devdocs.io/html/element/li

DevDocs

• 기본 구조(3.5.html)

• 표를 생성할 때 사용

• tr : 표 내부의 행 태그

• th : 행 내부의 제목 셀 태그 / 굵은글씨 / 머리말

• td : 행 내부의 일반 셀 태그

• table 태그에 들어가는 태그 : tr, td, th, col, colgroup,row, caption, tbody, tfoot, thead, summary

• table 태그에 들어있는 속성 : width, height, border, cellpadding, cellspacing, bordercolor, bgcolor, background

• tr과 td에 들어가는 속성 : align, valign, width, height, colspan, rowspan, bgcolor, backgrouond

• 참고 : https://devdocs.io/html/element/table

DevDocs

• 기본 구조(3.6.html)

• 입력 양식 태그

    • type 속성

    • button : 버튼

    • checkbox : 체크박스

    • file : 파일 입력 양식

    • hidden : 숨기기

    • image : 이미지 형태

    • password : 비밀번호 입력 양식(* 로 표기)

    • radio : 라디오 버튼

    • reset : 초기화 버튼

    • submit : 제출 버튼

    • text : 글자 입력 양식

• 참고 : https://devdocs.io/html/element/input

DevDocs

• 참고 : https://devdocs.io/html/element/button

DevDocs

• 기본 구조(3.7.html)

• 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소

• select 속성

    • select : 선택 양식을 생성

    • optgroup : 옵션을 그룹화

    • option : 옵션을 생성

• 참고 : https://devdocs.io/html/element/select

DevDocs

• 기본 구조(3.8.html)

• 하이퍼링크

• 해당 주소로 이동

• 참고 : https://devdocs.io/html/element/a

DevDocs

• 기본 구조(3.9.html)

• 페이지에 이미지 추가

• src : 이미지 파일 경로 지정

• art : 이미지를 볼 수 없는 경우 이미지에 대한 설명을 제공

• height, width : 이미지의 세로, 가로 폭 지정

• 참고 : https://devdocs.io/html/element/img

DevDocs

• 기본 구조(3.10.html / 3.11.html)

• 문단

• 인라인글자

• 가로 세로 크기변경이 안됨

• 가로로 배치

• 참고 : https://devdocs.io/html/element/span

DevDocs

• 기본 구조(3.12.html)

• 박스

• 세로로 배치

• 가로 세로 크기 변경 가능

• 참고 : https://devdocs.io/html/element/div

DevDocs

• 기본 구조(3.13.html)

• css 속성과 값을 바로 정의하는 방식

• 별도의 소스 삽입 부분이 없어 자동으로 적용

• 문서의 모든 태그가 같은 형태로 적용

• 참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors

Type selectors

• 기본 구조(3.14.html / 3.15.html)

• 사용자정의 선택자

• 태그 안에 'class=클래스이름' 으로 삽입

• 참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

Class selectors