HTML (Hypertext Markup Language)
- 웹 브라우저가 이해할 수 있는 "언어"
<!DOCTYPE html> # 문서 버전
<html lang="ko"> # HTML 문서 시작 선언 및 기본 언어 설정
<head> # 문서에 필요한 정보가 기입되는 곳
<title>문서 제목</title> # 문서의 제목
</head>
<body> # 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
안녕하세요~
</body>
</html>
# 주석처리
<!-- 주석 내용 -->- Body - 실제로 사용가자 눈으로 보는 내용 입력
- block - 레고처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
- 블록의 크기를 조정 가능하고, 페이지의 구조적 요소를 나타냄
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없음
- <div>, <article>, <section> 등이 있음
- inline - 블록 요소 내에 포함되는 요소
- 문장, 단어 같은 작은 부분에 사용, 한 줄에 나열
- 좌/우에 여백을 넣는 것만 허용
- <span>, <a>, <strong> 등이 있음
- inline-block - 글자처럼 취급되나, block 태그의 성질을 가지는 요소
- block과 마찬가지로 크기와 내/외부 여백 지정 가능
- CSS로 성질을 바꾼 것으로 인라인 레벨 요소
- block - 레고처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
- 레이아웃 태그
- HTML5 부터 태그를 의미있게 사용하기 위해 "semantic" 태그를 사용하여 문서 작성
- 단순 구분자 <div>가 아닌 적절한 태그를 사용해 문서가 담은 정보를 의미있게 전달
- 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임 (시멘틱 한 마크업)
- 종류
- 콘텐츠 분할 요소 - <div>
- 레이아웃 태그
- <header> - 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
- <footer> - 페이지 바닥줄에 사용되며 저작권 정보, 연락처 등의 부차적인 정보를 담는 태그
- <main> - 페이지의 가장 큰 부분으로, 사이트의 주요 콘텐츠를 담는 태그
- <section> - 콘텐츠의 구역을 나누는 태그
- <article> - 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
- <aside> - 문서의 주요 내용에 간접적인 정보를 전달하는 태그
- 콘텐츠
- <h1> ~ <h6> - 문서의 구획 제목을 나타내는 태그로 Heading 태그 라고 부름
h1 태그는 페이지 내에 한 번만 사용되고, 1~6 순서를 지켜줘야 함 - <p> - 문단을 나타내는 태그, 제목 태그와 함께 사용되거나 단독으로 사용
- <b>, <strong> - 글씨의 두께를 조절, 서로의 의미가 다름
<b> 태그는 의미 없이 단순하게 굵은 글씨로만 변경
<strong> 태그는 굵은 글씨로 변경 후 강조의 의미를 부여 - <i>, <em> - 글씨의 기울기를 조절
<i> 태그는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용
<em> 태그는 기울임과 내용에 강조를 나타냄 - <u> - 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타냄, CSS로 스타일링이 가능하지만 단순하게 밑줄의 용도로 사용하면 안됨
- <s>, <del> - 글씨에 취소선을 추가
<s> 태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않음
<del> 태그는 문서에서 제거된 텍스트를 나타낼 수 있음, <ins> 태그와 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현 가능 - <a> - 페이지를 이동할 수 있는 링크 요소를 생성
href속성을 사용해 파일 혹은 URL을 작성, target 속성을 사용해 이동해야할 링크를 새창 (_blank), 현재창 (_self) 등 원하는 타겟으로 지정 가능 - <img> - 문서 내에 이미지를 넣을 수 있는 태그, 가장 기본적인 이미지 삽입 방법
"src" 속성을 사용해 이미지의 경로를 넣으면 이미지 출력, "alt" 속성을 사용해 이미지 로딩 실패 시 대체 텍스트를 표시 - <figure>, <figcaption> - 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
인용문, 비디오/오디오 등 문서에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있음 - <video> - 문서 내에 영상을 첨부할 수 있는 태그
"poster" 속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줌, <source> 태그 사용 시 여러 타입의 비디오 제공 - <audio> - 소리를 첨부할 수 있는 태그, "controls" 속성을 사용해 재성/정지 버튼 등의 컨트롤러를 표시
- <svg> - 그래픽으로 만들어진 이미지로 해상도의 영향을 받지 않음, 크기를 자주 바꾸어야 하는 작은 아이콘에 많이 사용
- <ul>, <li> - 정렬되지 않은 목록 태그 (기본 불릿 형식), <li>는 <ul>의 자식 요소
- <dl>, <dt>, <dd> - 설명 목록 태그
- <table> - 표 생성 태그
<tr> - 행 구분 태그 (로우 - row), <td> 열 생성 태그 (셀 - cell), <th> - 열 제목 태그, <thead> - 제목 그룹 태그, <tbody> - 표 본문 요소 태그, <tfoot> - 표 바닥글 요소 태그, <caption> - 표 설명 태그 - <ifram> - 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
- <h1> ~ <h6> - 문서의 구획 제목을 나타내는 태그로 Heading 태그 라고 부름
- 양식 태그
- <form> - 정보를 제출하기 위한 태그
- <lable> - input, textarea, selectbox의 설명을 작성할 수 있는 태그, "for" 속성을 사용하여 연결하고자 하는 태그에 "id" 속성을 지정하면 label 킬릭 시 연결된 태그 선택
- <input> - 사용자에게 데이터를 입력 받을 수 있는 대화형 태그, "value"를 사용해 기본 내용(처음 표시 내용)을 입력 해둘 수 있음
- checkbox - input을 체크박스 형태로 만듦
- radio - 라디오 버튼으로 만듦
- file - 파일을 첨부 할 수 있게 함
- button - "value" 속성에 입력된 값을 이름으로 갖는 버튼으로 만듦
- hidden - input을 숨겨줌 (정보 제출 시 "value" 속성에 입력된 값은 전송)
- <select> - 옵션 메뉴를 제공하는 태그, <option> 태그를 사용해 옵션을 정의
첫번쨰 옵션이 버튼명이기 때문에 "placeholder" 속성을 사용 못함 - <textarea> - 여러 줄을 입력할 수 있는 대화형 태그, "cols/rows" 속성으로 크기 조절 가능
- 주의 사항
- 대소문자 주의
- 태그는 소문자로 작성 - 닫는 태그 생략 주의
- 콘텐츠를 가지는 태그는 닫는 태그가 필수! - 한글 사용
- 영어를 사용해 개발하자 - ID의 중복
- ID는 한 문서, 한 페이지 내에 한 번만 나와야 하는 고유 아이디 - 계층 구조 유지
- 코드는 예뻐야 한다! 계층을 잘 지켜줄 것
- 유지보수가 용이해짐 - 동일한 의미의 태그 중첩 금지
- b, strong
- 링크 이동하는 a 태그, 클릭할 수 있는 buttion 태그의 중첩 등등
- 대소문자 주의
728x90
'ssung_데이터 엔지니어링 > 2주차_파이썬으로 웹 다루기' 카테고리의 다른 글
| Seaborn - 스크래핑 결과 시각화 (1) | 2023.10.27 |
|---|---|
| Selenium 설치 및 사용법 (0) | 2023.10.26 |
| HTML Parser, BeautifulSoup (0) | 2023.10.25 |
| 웹 스크래핑과 웹 크롤링 (0) | 2023.10.24 |