TIL 210723 - 오늘은 웹 개발 기초, HTML

자자 아침부터

맥북에 듀얼 모니터 인식시키는 게 잘 안되서

버벅 대다가 해결하지 못하고 학습을 시작합니다. 유야호~~

 

오늘 하루도 집중하게 하소서!

힘내게 하소서!

좌절하지 않고 긍정적인 마음으로

미래의 청사진을 그리고

전진하게 하소서!

 

 HTML 시작! 

오늘의 목표를 보자.

 

Achievement Goals

• HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
• HTML이 Markup language라는 것을 이해할 수 있다.
  • "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
• HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
  • Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
• 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
  • div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
  • ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
  • input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
• 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
  • 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
  • id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
  • HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.

 

HTML tag 모두 다 알 필요없다!!!(아주 중요하다!)

 

가장 많이 쓰이는 태그만 공부하고 나머지는 차차 알아도 된다.

 

<div> 와 <span>

div는 한 줄을 다 차지하기 때문에 줄바꿈이 이루어지고

(전문용어로 블록 레벨 엘리먼트)

 

span은 설정해준 영역만 차지하게 된다.

(인라인 엘리먼트(한 줄에서도 정해진 영역만 차지))

 

추가 설명 나의 블로그에 좀 더 설명이 있다.

https://jobcoding.tistory.com/11

이것들로 암기할 필요 없다. 필요할 때마다 찾으면 됨!

이런 것들은 모두 실습이 중요하다고 생각하고

실제로 작업을 하면서 습득, 하는게 더욱 중요하다고 생각한다.

 

그리고 풀어 본 퀴즈의 해설들

옹 그렇구나. 난 저 <p class=~~/p> 까지도 모두 태그라고 생각했는데

시작태그와 종료태그로 구성되어 있구나.

 

왜 아래와 같은 것들도 알려주지 않고 문제를 풀어보라고할까?

검색해서 찾아보라는 의도로 짐작된다.

 

자바스크립트가 많이 발전했네

예전에는 그냥 웹에서 표현만 해주는 기능했는데

동적으로 서버에 정보를 입력, 저장, 호출도 다되고

예전에는 자바에서 그런 것들을 DB에서 SQL사용해서

불러오고 그랬는데 기술이 점점 진보하네.(옛날 사람 느낌 물신)

 

• JavaScript는 본래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였으나, 이제는 node.js를 활용하여 서버 제작은 물론이고, PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어가 되었습니다.

JS실행 

 

HTML의 설명들을 보고 있는데

큰 원칙을 한 가지 언급하자면

HTML은 문서의 구조를 만드는 기능이기 때문에

문서의 제목 영역은 <h>태그

문서의 내용 영역은 <p>태그

이미지 영역은 <img>태그 등

영역에 알맞은(혹은 매칭되는) 태그를 사용하는게

그 콘텐츠를 보는 누군가에 도움이 된다고 생각한다.

 

왜냐하면 웹 브라우저는 인터넷의 정보의 바다에서

검색을 할 때 아마 태그를 보고 검색을 할거 같기 때문이다.

 

퀴즈 풀고 있다.

보기를 보지 않고 문제만 보았을 때는 <div> 라고 생각했다.

그런데 2014년 그러니까 HTML5 가 나온 이후는 

<section> 태그가 생겼나 보다.

그래서 위의 문제처럼

본래의 페이지 위와는 분리된 독립적인 영역은

section 태그로 바꾸어 준다고 한다.

나머지는 아는 내용들이라서 생략한다!

 

HTML 끝!!

 

코플릿 반복문 다시 씹어먹는 중.

다음 번에는 이런 문제들 한번 싸그리 리뷰하겠다.

 

동기부여 세션

긍정의 마음으로!!! 주여 도우소서!