홍카나의 공부방

[DE 데브코스] 04.17 TIL - HTML 본문

Data Engineering/프로그래머스 데브코스

[DE 데브코스] 04.17 TIL - HTML

홍문관카페나무 2023. 4. 17. 18:16

HTML

  • VScode의 Live server로 html 문서를 작성한 후, 실시간으로 웹 문서를 확인하는 과정을 거쳤다.
  • <head>는 문서의 정보가 담기는 영역이라는 것과, <title>, <meta>, <script>, <link>에 대한 내용을 복습했다.
  • <link rel="stylesheet" href="style.css" /> : style.css의 내용을 include하는 코드
  • <script src="script.js"></script> : script.js의 내용을 include하는 코드
  • <body>는 <block>이냐 <inline>이냐 구분이 된다. ( 자매품 : inline-block )
  • 쉽게 이야기하면 block 요소인 <div>를 이용하면 한 줄을 다먹고,  inline 요소인 <span>을 이용하면 그 원소의 크기 만큼만 공간을 차지하게 된다.
  • <header>, <footer>, <main>도 오랜만에 보는 태그들이었다. 구역을 나누는 데 사용되는 태그들이다.
  • <main>은 한 번만 사용한다.
  • <section>은 구역을 나누는 태그인데, 나는 그냥 <div>에 id나 class 속성명을 줘서 구분하며 사용한 경우가 더 많았다.
  • 시맨틱하게 작성하기 위해 <main>, <nav>, <footer>등은 사용했다.

예시

  • <img src="/logo.png" alt="로고">  : 문서에 이미지 넣을 수 있는 방법 1
  • HTML에서 src를 걸며 이미지를 넣지 않고, css단에서 백그라운드 이미지를 넣는 식으로 이미지를 넣을 수도 있다.
  • <video> 태그와 autoplay 속성으로 비디오를 로딩하여 재생할수도 있고, 
  • <video> 태그 안에 자식 태그로 <source>를 넣어서 비디오를 포함시킬 수 있다.
  • <audio> 태그는 오디오를 로딩하여 재생시킬 수 있는 태그다.
  • <audio> 태그는 controls 라는 속성을 넣으면 자동으로 오디오 컨트롤러가 웹 페이지에 포함된다.

 

 

 

오늘 공부하며 어려웠던 내용

  • 없었다. 다 아는 내용들을 복습한 시간이었다.

 

  • 아 이런게 있었지. 맞다. 맞네 이거 이렇게 썼었지 <- 오늘의 강의를 수강하며 들었던 생각들
  • 저번 프로젝트때 ChatGPT를 적극 활용해서 html과 css 코드를 작성했었는데, html은 나보다 얘가 더 잘 짤것같다.
  • 그래서 나는 엄청 세부적인 HTML 코드 구현능력보단 프로젝트를 요구사항에 알맞게 어떻게 설계할 수 있는지 전체적으로 알아가는 능력. 어차피 나는 web쪽 커리어를 가질 건 아니라서.. Specialist처럼 html 단을 파고들 이유는 없다.
  • 모르면 구글링 or GPT에서 찾기
반응형
저작자표시 비영리 변경금지

'Data Engineering > 프로그래머스 데브코스' 카테고리의 다른 글

[DE 데브코스] 04.19 TIL - Beautifulsoup, Locater, 알고리즘 문제  (0) 2023.04.19
[DE 데브코스] 04.18 TIL - 웹 스크래핑을 위한 HTTP 기초  (0) 2023.04.18
[DE 데브코스] 04.15 TIL - 팀미팅 1차, 반성.., 코딩테스트 문제 풀이(Heap, DFS/BFS, DP)  (0) 2023.04.15
[DE 데브코스] 04.14 TIL - ChatGPT 특강, 코딩테스트 연습(Hash, Greedy, Sort)  (0) 2023.04.14
[DE 데브코스] 04.13 TIL - Queue, PQ, Tree, Binary Tree, BST, Heap  (0) 2023.04.13
'Data Engineering/프로그래머스 데브코스' Related Articles more