S1U4 HTML기초

1. 현재 기분이나 느낌

구체적인 목표 : 나에게 집중하고 어제보다 발전하는 나를 만들어라

남들도 지금 헤매고 있다. 겁먹지말고 긍정적으로 생각하자

 

2. 이해도 자가 점검 리스트

Chapter1. 웹 개발 이해하기

• 웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.(o)
• VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.(o)
• VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.(o)

Chapter2. HTML 기초

• HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.(o)
• HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.(o)
• HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.(o)
• 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
  • <div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.(o)
  • <ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.(o)
  • <input> 요소에 type 을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.(o)
• 시멘틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.(o)

Chapter3. HTML 심화

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.(x)
• 와이어프레임을 보고 HTML로 코딩할 수 있다.(x)
• <div> 요소 또는 <section>, <header> 등의 시멘틱 요소로 영역을 구분하는 이유를 이해할 수 있다.(o)
• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.(o)
• id와 class를 목적에 맞게 사용할 수 있다.(o)
• 사람과 컴퓨터가 읽기 쉬운, 의미 있는(Sementic) HTML 문서를 작성할 수 있다.(o)

 

3. 학습한 내용중 떠오르는 것

 

이미지 주소 뒤에 alt를 같이 꼭 넣어줘라

h1~h6 제목1~6 글자크기가 달라지고 자동으로 마진이 표현됨

div(block)와 span(inline) 차이  디브는 한줄전체를 차지 닫는요소없음, 스펜은 줄바꿈이 안됨(컨텐츠의 길이에 따라 너비가 결정됨)

input 과 label이 같은 속성으로 지정하고싶을때 인풋에 내용과 라벨 내용이 같게 만듬 라벨을 체크하던 인풋을 체크하던 둘다 체크됨(체크박스타입일때)

라디오버튼 하나만 선택가능 

체크박스버튼 다수선택가능

같은 내용 수정시 내용드래그 후 커맨드+d 하고 수정

<br>이란?

type 에는 text, email, password, date, time, color, file, number 등 자동으로 생성

<option>이란?

<texarea>란?

버튼 타입 button(클릭용), submit (제출용), reset(작성한것 없어짐) 등

P 와 div 차이 - p는 문단표현시 단락이 나눠짐 마진포함, div는 영역구분용 마진없음

<script> 요소로 자바스크립트 실행가능

dom 문법?

 

4. 설명하기 어려운 단어가 있다면 왜 그런지?

와이어프레임, 시멘틱 용어가 생소함 (구글검색)

 

 

5. 추가로 알아야하는 것, tip

 

자기주도적 학습,

메타인지(모르는걸 발견하면 빨리 점검하고 보충해야함, 1계획 2점검 3조절)

성장마인드셋 vs고정마인드셋

성장마인드셋-생각을 물질처럼 취급해라, 할 수 있는 구체적인 목표를 가져라, 나는 실력있고 겸손하고 유머있는 개발자가 된다!

당신에게 그릿이 있는가?(그릿: 아이큐 재능 환경을 뛰어넘는 열정 끈기의 힘)1, 지속적인 관심(흥미) 2.꾸준한 노력(회복탄력성,긍정심리)

계획된 우연 이론- 우연한 일들을 기회로 인식하고 진로에 유익한 행동을 촉진(호기심-인내심-유연성-위험감수-낙관성)