본문 바로가기

Python_Crawling/Crawling

[Crawling]Python Study - PPT Presentation Material - 3

기본 구조(3.4.html)

순서 없는 목록 태그

기본 목록을 생성할 때 사용

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

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

 

DevDocs

 

devdocs.io

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

 

DevDocs

 

devdocs.io

기본 구조(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

trtd에 들어가는 속성 : align, valign, width, height, colspan, rowspan, bgcolor, backgrouond

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

 

DevDocs

 

devdocs.io

기본 구조(3.6.html)

입력 양식 태그

    • type 속성

     button : 버튼

     checkbox : 체크박스

     file : 파일 입력 양식

     hidden : 숨기기

     image : 이미지 형태

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

     radio : 라디오 버튼

     reset : 초기화 버튼

     submit : 제출 버튼

     text : 글자 입력 양식

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

 

DevDocs

 

devdocs.io

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

 

DevDocs

 

devdocs.io

기본 구조(3.7.html)

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

select 속성

    • select : 선택 양식을 생성

    • optgroup : 옵션을 그룹화

    • option : 옵션을 생성

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

 

DevDocs

 

devdocs.io

기본 구조(3.8.html)

하이퍼링크

해당 주소로 이동

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

 

DevDocs

 

devdocs.io

기본 구조(3.9.html)

페이지에 이미지 추가

src : 이미지 파일 경로 지정

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

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

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

 

DevDocs

 

devdocs.io

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

문단

인라인글자

가로 세로 크기변경이 안됨

가로로 배치

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

 

DevDocs

 

devdocs.io

기본 구조(3.12.html)

박스

세로로 배치

가로 세로 크기 변경 가능

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

 

DevDocs

 

devdocs.io

기본 구조(3.13.html)

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

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

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

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

 

Type selectors

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

developer.mozilla.org

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

사용자정의 선택자

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

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

 

Class selectors

The CSS class selector matches elements based on the contents of their class attribute.

developer.mozilla.org