이번 강의는 웹 크롤링에 대한 강의 이전에 각 OS별 vscode 설치 및 환경 설정과 HTML에 대한 강의가 이루어졌습니다!

학부 시절 배운 내용이기도 하고, 처음 접하는 관점에서 설명해주셔서 어렵지 않게 이해할 수 있었습니다.

크롤링을 위해 알아두면 좋은 내용이나 필수적인 기본 내용을 정리해보겠습니다!!

HTML 기본 문법

  • 콘텐츠를 가지는 태그 : <> 콘텐츠 </>. 형태로 열리는 태그, 닫히는 태그를 모두 가진다!
  • 콘텐츠를 갖지 않는 태그 : < />. 셀프 클로징을 가지는 단일 태그 형태로 사용이 가능하다!
  • 태그는 각각 갖는 속성이 다르다
  • 주석 : <!-- 주석 내용 -->
  • <head>
    • <head>에 담을 수 있는 정보의 종류
      1. 타이틀
      2. 메타 데이터(인코딩 정보, 문서 설명, 문서 작성자 ..)
      3. CSS, Script
    • css를 head에 담으면 너무 길어지기에 css 파일을 분리하고, link 태그를 통해 css 파일의 링크를 걸어준다!
    • script는 link태그를 통해 링크를 거는 것이 아닌, script 태그를 통해 걸어준다!
  • <body>
    • 사람 눈에 실제로 보이는 콘텐츠 영역!
    • block(블록 레벨 요소)
      • 배열처럼 적재되는 요소로 화면 너비가 꽉 차는 요소
      • 크기 조정 가능!
      • <div>, <article>, <section> ...
    • inline(인라인 레벨 요소)
      • 블록 요소 내에 포함되는 요소
      • 크기 조정이 불가하며, 좌/우에 여백을 넣는 것만 허용! -> 상/하단에 여백이 불가능한 이유는 블록에 종속적이기 때문!
      • <span>, <a>, <strong> ...
    • inline-block
      • 글자처럼 취급되나, block 태그의 성질을 가지는 요소.
      • block과 동일하게, 크기 조정 및 여백 설정 가능
      • css로 성질을 바꾼 것이므로 사실상 인라인 레벨 요소!!
  • 레이아웃
    • 웹 문서가 담은 정보와 구조를 의미있게 전달하고 로딩 속도를 높이기 위해 Semantic 태그를 사용하여 문서 구조 작성!! 
    • 콘텐츠 분할 요소(div)
      • 구역을 나누기(div) 위한 태그
    • <header>
      • 페이지의 주요 정보를 담는 태그
    • <footer>
      • 페이지 바닥 줄에 사용.
      • 페이지의 부가적인 정보를 담는 태그
    • <main>
      • 페이지의 주요 콘텐츠를 담는 태그
      • 한 페이지에 무조건 1번만 사용!
    • <section>
      • 콘텐츠의 구역을 나누는 태그
    • <article>
      • 독립적인 문서를 전달하는 태그
    • <aside>
      • 문서의 주요 내용에 간접적인 정보를 전달하는 태그
  • 콘텐츠
    • 제목 태그(<h1> ~ <h6>)
      • 문서 구획 제목을 나타내는 태그!
      • <h1> 태그는 페이지 내에서 한번만!
      • 구획 순서는 필수로 지켜야!
    • 문단 태그(<p>)
      • 하나의 문단을 나타내는 태그
      • 제목 태그와 같이 or 단독 사용 가능
    • <b>, <strong>
      • 글씨의 두께 조절
      • <strong>은 두께 조절뿐만 아니라 강조의 의미 부여까지!
    • <i>, <em>
      • 글씨의 기울기 조절
      • <em>은 기울기 조절뿐만 아니라 강조의 의미 부여까지!
    • <u>
      • 글씨에 밑줄을 넣고 주석을 가지는 태그
      • 단순하게 밑줄만 긋는 용도로 사용하면 안된다!!!
    • <s>, <del>
      • 글씨에 취소선
      • <s>는 단순한 취소선
      • <del>은 문서에서 제거된 텍스트 표현 가능
        -> <ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트 표현 가능!
    • <a>
      • 클릭하면 페이지를 이동할 수 있는 링크 요소 제작 가능!
      • href 속성을 통해 타겟 URL, file 작성
      • target 속성을 통해 새 창(_blank), 현재 창(_self) 지정 가능
    • <img>
      • 이미지 삽입 태그
      • src 속성에 이미지의 경로
      • alt 속성에 문제 발생 시에 대체 텍스트
    • <figure>, <figcaption>
      • 하나의 독립적인 콘텐츠로 분리하고 설명을 작성할 수 있는 태그
      • figcaption을 중간에 삽입하지 말자!!
    • 멀티미디어
      • <video>
        • 영상 첨부 태그
        • src 속성에 비디오의 경로
        • poster 속성을 통해 비디오 로드 전 썸네일 설정 가능
      • <audio>
        • 문서에 소리 첨부 가능하게 하는 태그
      • <svg>
        • 그래픽으로 만들어진 이미지
        • 수학 공식을 통해 그려지기에 해상도의 영향을 받지 않는다!!! -> 이미지가 안깨진다!!
    • 리스트
      • <ul>, <li>
        • 정렬되지 않은 리스트 태그
        • <ul> 태그의 자식 태그는 무조건 <li> 태그만 가능
      • <dl>, <dt>, <dd>
        • 설명 리스트 태그
        • <dl> 내 여러개의 <dt>를 가질 수 있으며, <dt> 내 여러개의 <dd>를 가질 수 있다.
        • <dd> 태그는 <dt> 태그의 설명을 작성!
    • 표
      • <table>
        • 표 생성 태그
        • <tr> : 행(row)
        • <td> : 열(col)
        • <th> : 열 제목 -> 속성
        • <thead> : 열 제목 그룹 -> 테이블 내에 1번만!!!
        • <tbody> : 테이블 데이터 그룹 -> 테이블 내에 1번만!!!
        • <tfoot> : 테이블의 바닥글
        • <caption> : 테이블 설명
    • iframe(외부 콘텐츠)
      • 현재 문서 안에 다른 HTML 페이지를 삽입할 수 잇는 태그
      • 외부 페이지를 불러오기에 외부 페이지의 영향을 받을 수 있다!!
  • 양식태그
    • <form>
      • 정보를 제출하기 위한 태그
      • <input> 태그의 type 속성을 password로 설정하면, 실제 password 입력처럼 가려진 값이 보인다!
  • 설명 및 입력
    • <label>
      • input, textarea, selectbox와 같은 입력 태그의 설명을 작성할 수 있는 태그
      • label 태그의 for 속성을 이용해 연결하고자 하는 태그의 id 속성을 작성하면 연결!
    • <input>
      • 사용자에게 데이터를 입력 받을 수 있는 태그
        • type에 따라 값을 받을 수 있는 타입이 바뀌며, 기본 값은 text
    • <select>
      • 옵션 메뉴를 제공하는 태그
      • <option> 태그를 사용해 옵션 정의 가능
        • 첫번째 option은 이름!
    • <textarea>
      • 여러 줄 입력 가능한 대화형 태그
    • <button>
      • 클릭 가능한 버튼으로 <form> 태그 내 어디서든 사용 가능
      • type="reset" : 입력한 값 모두 초기화
      • type='submit" : form 양식 제출 가능! -> form 태그 내 button의 기본 type!
      • button 태그 내 다른 태그를 사용 가능하지만, 블록 레벨 요소는 사용 불가능!!
  • 주의사항
    • 태그는 소문자로 통일!
    • 태그의 id는 문서 내에서 유일하게!
    • 닫는 태그 생략 주의!
    • 한글 사용X!!
    • 계층 구조 잘 지키기!
    • 시작 태그 - 닫는 태그가 꼬이지 않게! -> 괄호 작성하듯이!
    • 같은 혹은 유사한 의미의 태그를 중첩으로 작성하지 않기!

 

회고

분명 대학시절 배웠던 내용이지만, 웹 프로그래밍에 그다지 큰 관심을 갖고 있지 않아 지금은 다 까먹은 내용이었습니다.. 강의 내에 실습 장면까지 포함되어있어서 대학에서 배웠을 때 보다 훨씬 이해하기 좋았습니다!

웹에 대한 지식또한 갖추어야 데이터 엔지니어 역량을 채우기에 유리하다는 생각을 다시 한 번 하게 되었습니다.

물론.. 실습을 모두 따라하지는 않았지만.. 강의 내용을 이해하려하고, 정리하면서 진행하였습니다!

 

사실 아직 데이터 엔지니어가 다루는 기술을 다루거나 설명하는 강의가 진행되지 않았기에, 조금은 내가 지금 뭐 듣는거지.. 하는 생각도 있지만 기본기를 쌓아야 취업할 수 있겠죠...! ㅠ

 

강의 질은 좋지만, 배속 안되는 점 말고는 아직까지 만족스러워요!!

추가로 같은 팀 팀원 한 분이 수강 취소를 하고 나가셔서 아쉬웠습니당...

초반에 아는 분을 만들어 놔야 나중에 좋지 않을까라고 생각했지만, 각자의 사정이 있는 것이니까!

그분의 앞날과 제 앞날을 응원합니다!!!!!

저작자표시

'데이터 엔지니어링 데브코스' 카테고리의 다른 글

[데이터 엔지니어링 데브코스 4기] 4주차 10/8 TIL  (2) 2024.10.08
[데이터 엔지니어링 데브코스 4기] 4주차 10/7 TIL  (2) 2024.10.07
[데이터 엔지니어링 데브코스 4기] 3주차 10/4 TIL  (2) 2024.10.04
[데이터 엔지니어링 데브코스 4기] 3주차 10/2 TIL  (3) 2024.10.02
[데이터 엔지니어링 데브코스 4기] 1주차 WIL  (0) 2024.09.29

티스토리툴바