성장에 목마른 코린이

TIL - 5일차 220121 (웹 개발, HTML) 본문

Today I Learned

TIL - 5일차 220121 (웹 개발, HTML)

성장하는 코린이 2022. 1. 21. 16:58
728x90

오전 8:30 - 8:45 plan / 나의 하루 목표

HTML 기초를 남에게 설명 할 수 있을정도의 학습, 변수 ~ 반복문 복습하기.

오전 9:00 - 12:00 chapter / 웹 개발 이해하기, HTML 기초

HTML, CSS, Javascript 소개

HTML - 웹페이지의 구조/틀을 담당

CSS - 웹페이지의 스타일을 담당

Javascript - 유저와 웹페이지의 상호작용을 담당

 

What is HTML?

HyperText Markup Language의 약자

웹 페이지의 틀을 만드는 마크업 언어

 

How to use HTML?

- HTML은 tag들의 집합

- Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소

<!DOCTYPE html>			// 이 문서가 HTML 문서임을 명시
<html>				// html 시작 태그로, 문서 전체의 틀을 구성
<head>				// head 태그는 문서의 메타데이터를 선언
  <title>Page title></title>	// 문서의 제목, 브라우저의 탭에 보여짐
</head>				// </태그이름>은 해당 태그가 끝났음을 의미
<body>				// body 태그는 문서의 내요을 담는 곳
  <h1>Hello World</h1>		// heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
  <div>Contents here		// content division을 의미하며, 줄바꿈됨
    <span>Here too!</span>	// 줄바꿈이 없는 content 컨테이너
  </div>			// div 태그가 끝났음을 의미
</body>				// body 태그가 끝났음을 의미
</html>				// html 태그가 끝났음을 의미

- html 확장자 사용

 

HTML 요소(element) <p class="paragraph">This is a paragraph.</p>
   <시작 (속성)  태그   >       콘텐츠         <종료 태그>

 

Self-Closing Tag

태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능

<img src='my-logo.png'></img>

<img src="my-logo.png'/>

Most Used Tags in HTML

<script> 요소(element)가 자바스크립트 실행을 위해 사용됩니다
<script src="my-java-script.js"></script>

<a> 엘리먼트는 anchor(닻; 배의 위치를 고정)의 약자로, 다른 웹페이지로 연결되는 하이퍼링크를 HTML 문서에 표시할 때 사용합니다. 주로 href 속성과 사용됩니다. // 링크 삽입

<a href="http://naver.com">네이버</a>


<p> 엘리먼트는 paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용됩니다. HTML 문서 작성 시, 가능하면 이 엘리먼트의 본래 목적에 맞게 사용하는 것이 권장됩니다.

 

<section> 엘리먼트는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용됩니다.

 

<div> 엘리먼트는 하나의 구역(division)을 나타내기 위해 사용할 수 있지만 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있습니다. 작은구역에서 불가피하게 div를 사용해야 하는 "최악(last resort)"로는 괜찮습니다.

 

<ul> 엘리먼트는 unordered list의 약자로 순서가 없는 데이터를 표현하는데 적절합니다. 

<li> 엘리먼트는 list item의 약자로 목록의 항목을 나타냅니다. ul 태그의 내부에서 사용되는 태그입니다. 목록의 내용이되는 실질적인 태그이며 들여쓰기 및 줄바꿈 기능이 있고 type 속성으로 다양한 기호를 사용 할 수 있습니다.


<img> 엘리먼트는 그림 부분을 사용할때 적절합니다.

 

<span> - Span  // 컨텐츠 크기만큼 공간을 차지합니다.

 

<script> 요소(element)가 자바스크립트 실행을 위해 사용됩니다

<script src="my-java-script.js"></script>

 

<input> - Input(Text, Radio, Checkbox)

<input type="text" placeholder="type here">
<div>
  <input type="radio" name="choice" value="a"> a
  <input type="radio" name="choice" value="b"> b
</div>
<div>
  <input type="checkbox" checked> checked
  <input type="checkbox"> unchecked
</div>

<textarea> - Multi-line Text Input

<button> - 버튼 

 

HTML에서 줄바꿈이 되는 태그는 무엇인가요? 줄바꿈이 적용되지 않은 태그는 무엇인가요?
줄바꿈이 되는 태그: <h1> <p> <div>
줄바꿈이 되지 않는 태그: <span>

 

오후 1:00 - 2:00 zoom / Agora States

오후 2:00 - 5:00 solo / Study - 변수 ~ 반복문

오후 5:00 - 6:00 zoom / 주간 회고

오후 6:00 - 6:30 review / 일일 회고

오후 6:30 - 7:00 survey / Weekly Self Chek & Reflection

'Today I Learned' 카테고리의 다른 글

TIL - 7일차 220125 (HTML, CSS, JS)  (0) 2022.01.25
TIL - 6일차 220124 (CSS)  (0) 2022.01.24
TIL - 4일차 220120 (Javascript 기초)  (0) 2022.01.20
TIL - 3일차 220119 (Javascript 기초)  (0) 2022.01.19
TIL - 2일차 220118 (Javascript 기초)  (0) 2022.01.18
'Today I Learned' Related Articles more
Comments