바닐라 코딩 사전 학습 가이드
코딩과 친해지기 위해 그리고 바닐라코딩 준비를 위해 먼저 바닐라코딩에서 공지한 학습가이드를 참고하여 공부를 시작하기로 했다.
PoiemaWeb
먼저 poiemaWeb에 있는 HTML 공부부터 시작하기로 했다. 그리고 오늘 5강까지 들었다. 코딩이라 해서 조금 쫄았는데.. 생각보다 재미있다..! 그렇지만 아직 첫 시작에 불과하니 겸손함을 유지하자.
1강은 프론트엔트 개발자 학습 방향에 대해서 설명하는 동영상으로 시작한다. 총 5가지 섹션으로 설명을 하는데..
- 프론트엔드 개발자가 하는 일
- 프론트엔드 개발에 필요한 기술
- 초심자가 경험하는 3가지 어려움
- 효율적인 프로그래밍 학습 방법
- 마음가짐
이다.
바닐라코딩에서 사전 학습가이드로 이 강의를 먼저 보라고 권유한 이유가 바로 이것이 아니었나 생각했다. 개발을 하는데 있어서 무엇보다 마음가짐과 끊임없이 공부하는 습관이 중요하다는 것을 이 영상을 통해 깨달았다.
이 영상을 시작으로 어제는 3강까지 듣고, 오늘은 5강까지 학습을 했다. 어제를 복습하는 개념에서 요점 정리를 해봐야겠다.
HTML5 기본문법
HTML은 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.
출처) https://poiemaweb.com/html5-syntax
아직 CSS와 JS 강의를 진행하지 않아서 정확히는 모르겠지만 위에 이미지를 통해 유추해볼 수 있는 것은.. HTML은 내용과 구조를 담당하는 언어, CSS는 HTML을 토대로 화면에 다양한 것들은 보여주는 언어, 그리고 JS는 어떤 여러가지의 행동, 실행을 할 수 있게끔 하는 언어인듯하다. (나중에 모든 강의를 듣고 이 글을 봤을 때 어떨지 궁금하다...)
HTML5 문서는 반드시
<!DOCTYPE html>으로 시작한다.
HTML 요소는 시작태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성된다. HTML document는 요소(Element)들의 집합으로 이루어진다.
보기 좋은 코드는 읽기 쉬우며 읽기 쉬운 코드는 좋은 코드이다.
어트리뷰트(Attribute 속성)이란 요소의 성질, 특징을 정의하는 명세다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다.
시맨틱 요소와 검색 엔진
검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다. 이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.
검색사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다. 이것은 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.
검색엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
위의 말이 아직 100% 와닿지는 않지만 마케팅을 하면서 자주 접했던 용어나 개념들이 조금 있어서 대략 어떤 느낌인지는 알 것 같다.
<font size="6"><b>안녕!</b></font>
<h1>안녕!</h1>위 내용을 출력하면, 똑같은 결과값이 나온다. 그러나,
여기서 첫번째 행의 요소는 어떤 의미도 가지고 있지 않다고 한다. 의도가 명확하지 않다는 말. 두번째 행은 header에 가장 상위 개념을 포함하고 있기 때문에 의도가 명확하다. 그렇기 때문에 2행이 코드의 가독성을 높이고 유지보수를 쉽게한다.
또한 검색엔진이 2행의 h1 요소의 콘텐츠를 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다.
시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
출처) https://poiemaweb.com/html5-semantic-web
.png)