TIL

(23.04.17) 파이썬크롤링1 - HTML/CSS/JS

이영애님 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 표준