노마드 코더 코코아톡 클론코딩 1일차
노마드 코더 코코아톡 클론코딩 1일차
잡담
어제 생활 코딩의 HTML과 CSS 강의를 완강한 후, 오늘부터 노마드 코더의 코코아톡 클론코딩 강의를 시작한다.
이미 이전에 생활 코딩에서 배운 내용을 정리해놓아서 중복된 내용도 있겠지만 일일이 수정하기도 귀찮으니 그냥 새로 정리를 할 생각이다.
아쉽게도 노마드 코더에서 제공하는 챌린지 시작일이 아직 많이 남아 있어서 타이밍이 애매하긴 하지만, 뭐 그동안 놀 수도 없으니 일단 무작정 시작해본다. 두 번 듣지 뭐..
클론 코딩을 함에 있어서 많은 우려의 글들을 보았다. 결국 핵심은 하나다. 무지성으로 코드만 따라 쓰면 안된다는 것. 그동안 생활 코딩에서 배운 내용을 필기할 땐 단순히 이론적인 부분만 적어놨었는데 이번 필기에는 이론 강의를 제외한 나머지 실습 파트에서는 코딩을 하면서 들었던 의문들, 내가 바꿔본 코드 등등을 하나하나 적어 갈 예정이다.
일단 박죠?
정리
Introduction
- 웹 사이트: 단지 텍스트 파일일 뿐이다. 사실 우리가 웹 사이트를 만드는 게 아니라 브라우저가 만드는 것이다. 우리가 하는 일은 브라우저에게 줄 코드를 구현하는 것.
- 개발자가 배워야 할 것: 어떤 종류의 텍스트(언어)를 쓰고, 텍스트를 어디에 써야 하는 가? a. 어떤 종류? : HTML, CSS, Javascript, 단 3개
- HTML a. 브라우저는 멍청해서? 우리 웹사이트의 content를 이해하지 못한다. >> content가 뭔지 알려줘야 한다. 그걸 알려 주는 언어가 HTML.
- CSS a. HTML과 함께 사용한다. HTML은 뼈대만 있는 웹사이트, CSS는 근육이다. 두 개가 합쳐져야 사람이지.
- Javascript a. 웹사이트의 뇌.
- javascript 만이 유일한 프로그래밍 언어다.
b. HTML로 브라우저에게 content 구조가 어떤 지(content가 뭔지)를 설명해 준다. ex) 이게 title 이야~
b. 브라우저에게 웹사이트의 content가 어떻게 보여야 하는 지에 대해 알려 준다. ex) 그 title은 녹색이야~
b. 동적 상호작용. 뭔가 클릭하면 어떤 일이 생긴다. 이 강의에서는 안 다룸.
@ markup: content
HTML
- 브라우저는 사용자에게 오류가 있다고 말해주지 않는다. 늘 컨텐츠를 보여주려고 한다.
텍스트만 있는 html 파일은 그저 html 확장자를 가진 텍스트 파일일 뿐 html이 아니다. - "여기부터 여기까지는 ~~야" 라고 브라우저에게 알려 줄 때 '여기부터 여기'가 html 태그를 의미한다.
- 태그에 추가하는 부가적인 정보를 속성이라고 한다. 모든 태그가 그 자체로 명확하진 않으니까.
ex) a 태그의 속성으로 href를 사용한다. 모든 태그에 작동하는 속성도 있다.
a. target 속성: _self 가 기본 값, _blank의 경우 링크 연결 시 새 창으로 열린다.
b. img 태그: 닫는 태그가 없다. self-closing tag. 따라서 content가 없다(텍스트가 없으니까. 이미지는 이미지). 속성으로 src 를 가진다.
* 이미지 파일은 같은 폴더에 없으면 오류가 발생한다. 만약 다른 폴더에 있는 이미지를 사용하려면 경로를 적어줘야 한다. ex)img/logo.jpg - 반드시 따라야 하는 html 문서의 구조
a. <!doctype html> : 이 파일은 텍스트 파일이 아니라 html 파일임을 알려준다.
b. html: html 태그 사이에 넣는 게 html 코드.
* lang 속성: 주로 사용되는 언어를 검색 엔진에게 알려줌.
head: 웹사이트 환경, 외부적으로 보여지지 않는 부분. 사이트 설정(브라우저에게 사이트가 어떻게 보여지는지)
* meta 태그: 부가적인 정보, name, content, charset 속성 등을 가지고 있다. self closing tag.
* meta property="og:image"는 카카오톡으로 공유될 때 보여지는 이미지다. 먼저 카카오톡은 og:title을 찾고(공유할 때 보이는 제목), og:description(공유할 때 나오는 글)을 찾은 뒤, og:image를 본다.
* link 태그: rel, sizes, href 속성 등을 가진다. 탭에 이미지를 넣을 수 있다.
body: 사용자가 볼 수 있는 부분
link 태그 부분에서 한 가지 의문이 들었다.
rel = “shortcut icon” 에서 shortcut icon을 어떤 식으로 바꾸든(아예 없애버려도) href의 링크만 잘 작성되어 있으면 탭에 이미지가 잘 보인다.
그래서 shortcut icon은 임의로 붙이는 이름이라고 이해를 했는데 넷플릭스 사이트나 다른 사이트에서도 마치 문법처럼 shortcut icon을 사용하고 있다.
검색을 해보니 rel 속성은 href 가 설명하는 링크가 현재 html 사이트와 무슨 관계에 있는지 설명하는 속성이다. 그러므로 반드시 작성해야 브라우저가 코드를 해석할 수 있을 것이다.
그런데 검색을 해보면 icon 속성은 있는데 shortcut icon 속성은 없었다. 또한 아예 rel 부분을 지워버려도 링크만 있으면 작동을 하는데 어떻게 가능한 걸까?
그런데
어이없게도 아예 링크를 지워버려도 작동이 잘 된다? 왜 작동이 되는 거냐..? 아예 link 태그를 지워버려도 결과는 같다.
다행히 구글에 비슷한 고민을 한 글의 답변을 찾았다.
딴 건 모르겠지만, 어쨌든 브라우저가 해당 아이콘을 알아서 찾는다? 정도로 해석된다. 따로 내 PC에 저장해놓지 않고 주소를 복사해 놓은 거니까 브라우저가 그 기록을 찾아서 알아서 적용 시키는 게 아닐까?
이 부분은 확실하게 답변을 들은 뒤 다시 작성하겠다.
일단 이 문제는 차치해두고, 웹 사이트 주소를 복사해놓으면 shortcut icon과 icon의 결과를 비교할 수가 없을 것 같아서 일단 별도의 이미지 파일을 저장해보았지만, 그래도 결과는 같았다 ㅋㅋ.. 도대체 무슨 차이가 있는 걸까?
MDN 라는 외국 사이트에서 찾은 글이다. icon 속성에 대한 설명에 warning 표시로 써져 있다. 대충 shortcut icon은 부적합하고 무시되고 웹 저자는 그것을 더 이상 사용하면 안 된다고 한다.
넷플릭스같은 대기업도 사용하는 속성을 사용하지 말라고 하는 게 좀 의문이긴 하지만 정확한 차이점은 확실한 답변을 들은 뒤 작성하겠다.
어쨌든 정리해보면, rel은 링크와 사이트의 관계를 설명하는 속성으로, 브라우저에게 제대로 코드를 인식하기 위해선 반드시 적어줘야 하는 속성이다. 이는 임의로 정해져 있는 게 아니라, 태그와 속성처럼 고정적으로 정해 진 문법과 같다. rel 뿐만 아니라 여타 다른 속성도 마찬가지다. 또한 shortcut icon과 icon 기능 자체는 유사하지만, shortcut icon의 사용은 권장되지 않는다.
요약
- HTML은 content가 뭔 지를 설명한다.
CSS는 content가 어떻게 보여야 하는 지를 설명한다.
Javascript는 뭔가 클릭했을 때 무슨 일이 일어나는 지를 결정한다. - HTML에는 수많은 태그가 있고, 태그 자체 만으로 완전하지 않는 태그들은 속성을 통해 부가적인 설명이 필요하다.
- HTML에는 반드시 따라야 하는 문법이 있다. <!doctype html>, head body 태그. head 태그는 보이지 않는 부분. 브라우저에게 사이트가 어떻게 보여지는 지를 결정한다.
body 태그는 사용자의 눈으로 보이는 부분. head 태그에는 meta, link 태그 등이 있다. meta의 속성으로는 name, content, charset, property 등이 있다.