작성 일시: 2023년 2월 14일 오전 8:57
태그: 데일리
오늘 배운 것✏️
-
Unit2 - HTML 기초
-
Chapter 1. 웹 개발 이해하기
💡 학습목표-
웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
-
VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
-
VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.
간단개념
-
Web Dev === Building a Dog House
-
HTML ⇒ 구조(Structure)
- Blueprint === Structure
-
CSS ⇒ 스타일(Presentation)
- Design === Presentation
-
JS ⇒ 상호작용(Interaction)
- Electronics === Behaviour
-
-
Chapter 2. HTML 기초
💡 학습 목표
-
HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
-
HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
-
자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
<div>,<span>요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.<ul>,<ol>,<li>요소가 무엇이고, 언제 사용해야 하는지 알고 있다.<input>요소에type을 설정하여 다양한 종류의<input>요소를 활용할 수 있다.
-
id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(semantic) HTML 문서를 작성할 수 있다.
-
HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
-
시맨틱 요소가 무엇인지 설명할 수 있다.
-
시맨틱 요소를 사용하는 이유에 대하여 이해한다.
-
검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.
개념학습
💡 What is HTML?
-
HyperText Markup Language의 약자
-
웹 페이지의 틀을 만드는 마크업 언어
💡 How to use HTML?
-
HTML은 tag들의 집합
-
Tag : 부등호 (< >)로 묶인 HTML의 기본 구성 요소
-
html 확장자 사용
🌲 Tree Structure
-
HTML 문서 시작
- html
- head
- title : Page title
- body
- h1 : Hello world
- div : Contents here
- span : Here too!
Self - Closing Tag
-
태그 내부에 내용이 없다면, (와 같이 표현되는 경우) 와 같이 표현 가능
-
tag에 들어갈수 있는 속성 ⇒ ex) src, class 등
-
<ul>&<ol><ul>/<li>⇒ •<ol>/<li>⇒ 1.
-
-
Chapter 3. HTML 심화
-
느낀점 / 다짐👏
- 충분히 공부했다고 생각했던 Html을 다시 기초부터 배우니 놓쳤던 부분도 정확히 다시 짚고 넘어 가는 것 같아 좋았다!
꼭 생각해 볼 것❗
- 고정형 vs 성장형 마인드셋
👥 생각해 보면 좋을 질문들
- 개발자가 되기 위해 새로운 도전을 시작하신 여러분은 고정형 vs 성장형 마인드셋 중 어떤 마인드셋을 가지고 계시나요?
- 성장형 마인드셋을 가지기 위해 필요한 것은 무엇이 있을까요?
- 메타인지, 자기주도학습의 열쇠
생각해 보면 좋을 질문들
- 앞으로 학습을 진행하며 나의 학습상태가 어떤지 최대한 객관적으로 생각해 봅시다. 어느 부분이 상대적으로 부족하다고 생각하는지, 부족한 부분을 보완할 수 있는 방법에는 어떤 게 있을지 생각해 봅시다.
- 이번 섹션에 대한 구글 캘린더 일정을 한번 확인해 봅시다. 나만의 학습 전략에 대해서 생각해 보고 학습 계획을 세워 봅시다.
- 앞서 고민했던 리사 손 교수가 설명하는 메타인지의 세 가지 내용 중 나에게 가장 필요한 부분이 무엇인지 생각해 봅시다. 어떻게 보완할 수 있을지 시간을 충분히 가지고 고민해 보고, 생각을 정리해서 기록해 봅시다.
