React js와 Vue js 등의 자바스크립트 프레임워크를 공부하고 사용하며 프로젝트를 하고 있지만, 그 기본이 되는 바닐라 자바스크립트나 html, css 에 대한 이해가 솔직히 거의 없다고 생각해서 노마드 코더 강의를 선택해서 그에 관해 수강하기로 했다. 그래서 첫번째로 코코아톡 클론코딩이라는 강의를 수강하기로 했고, 2주마다 매일 아침 6시마다 숙제가오고 그 숙제를 모두 완료하면 30퍼센트 할인쿠폰을 주는 챌린지라는 프로그램이 있다고 해서 그것도 같이 신청했다.
사실 웹, html, css 전반적으로 완전히 입문자 혹은 초보자는 아니기때문에 초반에 그냥 지나쳐도 될부분이 있다고 생각했는데 그런 생각은 버리고 다 체득하기 위해서 강의를 구매한 거기 때문에 강의를 들으면서 내가 필요하다고 생각하는 부분을 따로 여기에 간단하게 정리하려고한다.
하루에 하나씩 과제가 나가는 챌린지의 범위에 맞게 강의를 듣고 있기 때문에 그에 맞춰 한단위를 1일차로 하고 내용이 이어지는 부분이있으면 나중에 보기 편하게 묶어서 정리하려고 한다. 그리고 따로 궁금한 부분이 있으면 나중에 찾아보고 추가하기로 하고 우선은 강의에서 설명해준 내용으로만 정리하려고 한다.
1일차
웹사이트는 단 3가지 언어로만 구성되어있다.
1. HTML (Hyper Text Markup Language)
2. CSS (Cascading Style Sheets)
3. JS (Java Script)
한마디로 웹사이트를 인간으로 비유를 하자면
1. 뼈
2. 근육
3. 뇌
이렇게 대치 될 수 있다.
1. HTML
HTML은 브라우저에게 content의 구조가 어떤지, '무엇'인지를 설명한다. 뼈대가 있으면 그것을 하나의 인간의 형상으로 보고 어디에 어느것이 있는지 알 수 있듯이 HTML은 웹사이트의 뼈대를 담당한다.
2. CSS
CSS는 브라우저에게 웹사이트가 어떻게 '보여야하는지', content가 어떻게 보여야할지 설명한다. HTML이 뼈대라면 CSS는 근육으로 설명된다. 뼈대와 함께 움직이며 뼈대가 어떻게 보이는지 나타낸다.
3. JS
JS는 동적인부분이 필요할 때 사용된다. 뇌로 비유하는 것이 웹사이트가 어떤식으로 동작(동적인 행위)를 할지를 명령해준다.
2일차
브라우저는 HTML 규칙에 따르지 않더라도 컨텐츠를 보여준다. 다만, 그것을 이해하지 못할 뿐이다.
그렇기 에 브라우저는 언제나 사용자에게 컨텐츠를 보여준다. 이것은 장점이자 단점이다.
웹은 수많은 텍스트들로 이루어져있다. 그리고 수많은 태그들로 이루어져있다.
태그는 그 텍스트들이 무엇인지, 특정 컨텐츠가 무엇인지 브라우저에게 알려준다.
태그는 무엇이든 될 수있다.
<food>김치</food>
위의 경우도 태그이다. 하지만 이것 역시 브라우저는 이해하지 못한다.
그렇기 때문에 올바른 작동을 원한다면 브라우저가 이해할수 있는 태그를 써야할 것이다.
그러한 태그는 브라우저에게 특정 컨텐츠가 무엇인지 알려준다.
그리고 그 태그에는 attribute란 것이 있다. 바로 태그에 추가적으로 부여하는 속성이다.
태그에는 수많은 attribute들이 있고 공유할 수 도 있다.
예를 들어 a 라는 태그가 있다. 그 태그를 사용하면 특정 웹사이트로 이동할 수 있다.
<a href="http://google.com" target="_blank">Go to google.com</a>
여기서 attribute 는 href, target이 되겠다. a라는 태그에 추가적으로 부여해준 속성이고, href는 이동할 웹사이트의 URL을 지정하는 것이고, target = "_blank" 라고 하게 되면 새창에서 이동할 웹사이트가 띄어지게 된다.
이 태그와 속성들로 Go to google.com이라는 단순한 텍스트가 동작하는 컨텐츠를 브라우저에게 알려주는 것이다.
3일차
HTML에는 규칙이 있다.
첫번째 규칙
<!DOCTYPE html>
이 코드는 브라우저에게 이게 text파일이 아닌 html 파일임을 알려준다.
이거 없어도 실행은 되지만 규칙이다.
모든 HTML파일의 첫번째 라인이다.
HTML 파일을 작성하려면 써야한다.
두번째 규칙
HTML 파일을 작성하려면 <html>태그를 열고 사용해야한다.
그리고 <head> 라는 태그와 <body>라는 태그가 있다.
<head> 태그 안의 태그들은 브라우저에 보여지지않는다.
이러한 실제로 보여지지 않는 태그들로 사이트를 설정한다.
그러므로 <head> 태그 에는 사이트의 부가적인 정보가 모두 들어간다.
그리고 브라우저 화면 상에 보여질 내용들은 <body> 태그안에 있어야한다.
브라우저에게 웹사이트가 어떻게 보여질지, <body> 태그 안에서 알려주어야한다.
id
<body> 태그 안의 어느 태그에든 넣을수 있다.
하나의 태그에는 하나의 id만 들어간다.
왜냐하면 id는 고유식별자이고 고유해야한다
HTML 은 뼈대 이고 css는 그 뼈대를 감싸는 근육으로 어떤 뼈대에 붙을지 가르키게된다.
이렇게 할수있는 이유는 HTML을 이 id로 식별할 수 있기 때문이다.
태그중에는 아무 의미 없는 태그들이있다.
여기서 의미란, 그 태그가 의미하는 바가 없다라기 보다는,
사용자 입장에서 딱 그 코드를 보았을 때 아무 의미가 없다는 것이다.
예를 들어 가장 많이 사용하는 <div> 태그를 들 수 있겠다.
div는 division (분할, 경계)라는 뜻을 담은 태그로써 하나의 박스를 생성하게 된다.
예전에는 이러한 코드만 보고서는 그 의미를 명확하게 알수 없는 태그들로 웹사이트가 구성되어있었다.
하지만 의미가 담긴 태그, 즉 코드를 보면 이 텍스트, 혹은 태그가 어떤 부분인지,
어디에 있는 지 등을 알 수 있는 태그가 코드자체로 의미가 부여되어있는 태그인 semantic 태그이다.
예를들어 <header> 라는 태그가 있다.
<header> 태그는 <div> 태그로 대체해도 보여지는 화면에서나, 기능상 다를바가 없다.
하지만 개발을 같이 하는 팀원이 보았을 때 이것이 웹의 구성에서 어떤 부분인지는 모르는 것이다.
<main>, <footer> 와 같은 태그들 모두 마찬가지이다.
이 semantic 태그는 코드만 보고도 이 웹사이트가 어떻게 구성되어있는 지를 이해하는데 빨라진다.
'노마드코더 강의 > 코코아 클론' 카테고리의 다른 글
| [9일차] Media Query (0) | 2020.10.15 |
|---|---|
| [8일차-2] transition 과 animation (0) | 2020.10.06 |
| [8일차 - 1] state, pseudo element, color system, custom property (0) | 2020.10.06 |
| [8일차] position 과 pseudo selector (0) | 2020.10.05 |
| [5일차~6일차] CSS (0) | 2020.10.01 |