-
(23.04.17) 파이썬크롤링1 - HTML/CSS/JSTIL 2023. 4. 18. 12:43더보기
TIL은 그날 하루 본인이 어떤 공부를 하였는지 파악하기 위함입니다.
상세하게 기록하여 이후 본인이 어떤 공부를 어떻게 하였는지 파악할 수 있도록 하는 것이 중요합니다.학습 주제
1. HTML, CSS , JS 개념을 이해한다
2. HTML 요소
- 시맨틱 태그의 등장배경과 특징을 이해한다
주요 메모 사항
CSS (Cascading Style Sheets)
- 문서를 예쁘게 꾸미는 언어
JavaScript
- 문서에 기능을 만들어 주는 언어
HTML (Hypertext Markup Language)
- 웹 브라우저가 이해할 수 있는 언어
- Display level
종류 설명 예 block 블록 처럼 쌓이고 너비가 꽉 차는 요소
블록 크기와 내/외부 여백을 지정할 수 있는 구조적 요소<div>
<section>inline 옆으로 나열되는 블록 요소 내에 포함되는 요소
좌/우 여백만 지정<span>
<strong>inline-block 인라인 요소가 CSS에 의해 성질만 변화한 것 (inline level)
block 처럼 크기, 내/외부 여백을 지정할 수 있다 - <head> : 사람 눈에 보이지 않는 “문서의 정보”가 담긴 영역
- <tiltle>
- <meta>
- <style>
- <link>
- <script> 단일태그나 셀프 클로징이 아닌, 종료태그를 명시적으로 기재해야 한다
- <body> : 사람 눈에 보이는 “문서의 정보”가 담긴 영역
- <div> : 구역을 나누기 위한 태그
- 레이아웃 태그
- <header> : 제목, 작성일 등 주요정보를 담는 태그
- <footer> : 페이지 바닥줄에 사용되며, 페이지의 부가적인 정보를 담는 태그
- <main> : 내용, 페이지의 주요 콘텐츠를 담는 태그 (페이지에 1개만 존재)
- <section> : 콘텐츠의 구역을 나누는 태그
- <article> : 독립적인 문서를 전달하는 태그
- <aside> : 문서의 간접적인 정보를 전달하는 태그 (ex- 오늘 본 상품)
- 콘텐츠 태그
- <h1 - h6> : 제목태그 (h1은 페이지 내에 1개만 존재하며, 제목태그는 순차적으로 배치한다)
- <p>
- <b>, <strong>
- <i> , <em>
- <u> : 밑줄을 넣고 주석을 가지는 단어 (밑줄 용도로만 쓰려면 span + css 효과를 권장)
- <s> , <del>
- <a>
- <iframe>
- 멀티미디어 태그
- <figure> , <figcaption> : 독립적인 콘텐츠로 분리 및 설명을 추가하는 태그
- <img>
- <video>
- <audio>
- <svg>
- 코드로 이루어진 이미지로, 해상도의 영향을 안받고 확대/축소가 가능한 태그
- 크기를 자주 바꾸어야 하는 작은 아이콘, 로고에 많이 사용
- 리스트 태그
- <ul> / <ol> ,<li>
- <dl> , <dt> , <dd>
- 테이블 태그
- <table> , <caption>
- <thead>, <tr>, <th>
- <tbody>, <tr>, <td>
- <tfoot>
- 양식 태그
- <form>
- <label for=”{id}”>
- <input id=”{id}” type=”{*text}” name=”{..}” value=”{default_value}”>
- type → checkbox , radio , file , button, hidden
- <select> , <option>
- <button type=”*submit”> (form 내 button 의 타입 기본값은 submit 이다)
💡 Semantic 태그
- HTML 문서에서 적절한 의미를 가진 태그를 사용하여 내용을 구조화한 태그
- 레이아웃 태그, h1 - h6 , p , ul , ol , table 등 ..
- 검색 엔진, 웹 크롤러가 문서의 구조를 빠르게 파악해 검색 엔진 최적화(SEO)가 용이해진다
- 브라우저의 처리속도 개선에 영향을 준다 (웹 성능 최적화)
공부하며 어려웠던 내용
HTML Living Standard(HTML5.3)
- 번호를 표기하지 않고 지속적인 업데이트로 유지되고 있다
- 현재 웹 개발에서 가장 일반적으로 사용되는 HTML 표준
'TIL' 카테고리의 다른 글
(23.04.19) 파이썬크롤링3 - beautifulsoup4, 스크래핑기법 (0) 2023.04.19 (23.04.18) 파이썬크롤링2 - HTTP 통신, requests (1) 2023.04.18 (23.04.12) 자료구조/알고리즘3 - 큐, 트리, 힙 (2) 2023.04.13 (23.04.11) 자료구조/알고리즘2 - 연결리스트, 스택 (0) 2023.04.12 (23.04.10) 자료구조/알고리즘1 - 선형배열, 시간복잡도 (0) 2023.04.10