HTML와 CSS 기초
크롬, visualstudiocode, 깃 허브 데스크탑
- 3가지 모두 mac, window, linux에서 잘 작동한다
- Github desktop은 linux용이 없다
- Github desktop linux용이 없다면, wine 같은 걸 설치한다 -> window 프로그램을 linux에서 실행 할 수 있게 해주는 것이다
웹사이트는 TEXT일 뿐이다, 언어는 TEXT
예를 들어 이 text 파일을 복사해서 프린트를 한다면 무슨 일이 일어날까?
- 아무 일도 생기지 않는다 아무도 이해하지 못하는 text가 되는 것이다
만약 이 text파일을 브라우저에게 준다면 브라우저가 이 text 파일을 이해해서 지금 보고 있는 text로 이 웹사이트를 만들 것이다
웹사이트를 만들 때, 사실은 본인이 웹사이트를 만드는 것이 아니다 본인을 위해서 브라우저가 웹사이트를 만들어주는 것이다 브라우저는 본인이 쓴 코드를 이해한다 브라우저는 본인의 코드를 생생하게 구현을 해주는 것이다
개발자로써 우리가 해야 할 건 어떤 종류의 text를 써야하고, text를 어디에 써야하는 지를 배우는 것이다
만약 이 두가지 규칙을 잘 따르고, 브라우저에게 text를 준다면 웹사이트를 만들게 되는 것이다.
웹사이트 언어는 HTML, CSS, JAVASCRPIT로 구성되어 있다
HTML : HyperText Markup Language
CSS : Cascading Style Sheets
브라우저는 인간들이 쓰는 언어를 이해하지 못한다
우리가 해야 할 일은 브라우저에게 content가 무엇인지 알려줘야 한다
HTML으로 브라우저에게 content 구조가 어떤지를 설명해야한다
HTML을 어떻게 사용하는지 이해하는 것이다 HTML을 브라우저에게 웹사이트의 content가 어떻게 구성되어 있는 지 설명할 때 사용한다
- title이 무엇이고, link가 무엇이고, list가 무엇인지 설명은 무엇이고, link 목록이 무엇인지 sidebar은 무엇이고, header은 무엇이고 navigation이 무엇인지
오직 HTML만이 브라우저에게 content가 어떻게 구성되었는지에 대해 설명할 수 있다
|
HTML
|
CSS
|
|
- Browser야 이건 Image야
- 이건 LINK
- 뼈대만 있는 웹사이트이다.
(content, text, title, link, list 사진 등)
- HTML Ttitle은 무엇이고, sidebar은 무엇이고, date는 무엇인지에 대한 것이다
- CONTENT가 무엇인지에 대해서
|
- Browser야 그 image는 가로 25px, 세로 100px이어야 돼
즉, 4개의 column으로 디자인 되어 있다
- 색상, 사이즈 등 모든 것들이 CSS이다
- 그 LINK는 블랙
- Link들이 어떻게 보여주는지 알려주는 것이다
- CSS는 근육이다
- CSS가 있으면 title을 크거나 작게 만들 수 있고 사진들을 크거나 작게 만들 수 있다
- CONTENT들이 어떻게 보일까에 대한 것이다
- 디자인과 스타일을 위한 언어이다
|
* 단, HTML과 CSS를 같이 쓰는 이유이다. 절대 각각 따로 쓰지 않는다
|
자바스크립트
|
|
- 웹사이트의 뇌이다
- 웹사이트는 똑똑 해야할 때와 동적이어야 할 때가 있다
동적 상호작용성(Interactivity)이다 뭔가 클릭하면 어떤 일이 생긴다. 이러한 interactivity가 바로 웹사이트의 뇌이다.
모든 웹사이트에서 뇌가 필요한 것은 아니다
뇌를 위한 interactivity를 위한 Javascrpit
이 3가지 언어 중에서 프로그래밍 언어는 오직 Javascrpit
|
* HTML은 프로그래밍 언어가 아니다
CSS는 프로그래밍 언어가 아니다
자바스크립트만 웹 프로그래밍 언어이다
HTML은 Markup Language이고 Markup은 content이다
웹 사이트를 만들려면 HTML과 CSS로 작성해야 한다
HTML로만 작성해도 웹사이트는 정상작동 된다
Visual studio code - 파일명은 항상 소문자로 작성한다. 폴더명은 항상 소문자로 작성한다
* 파일명과 폴더명 앞 첫 글자를 대문자로 만들면 안된다
- 파일과 폴더 이름은 항상 소문자로 작성한다 VSC에 파일들을 생성하기 전에 폴더를 열고 시작한다
파일 이름 뒤에 만들 파일의 형식을 입력한다
(HTML, CSS, MP4 등등) 파일을 수정하고 반드시 저장을 해줘야 반영된다.
HTML 파일은 브라우저로 연다
브라우저에 보이는 버튼을 클릭하거나 COMMAND + R을 누르면 새로 고침 할 수 있다
메모장에서도 html을 만들 수 있다 파일 형식을 html 형식으로 저장한다
Waketime.com/dashboard
브라우저는 에러를 표시해주지 않는다 (코드가 잘못되었는지 개발자도 모른다)
1) 니콜라스와 같은 VSC 환경을 갖추려면 확장프로그램(Extensions)을 다운해야한다
- Community Material Theme (VSC 색깔 변경)
- Material Icon Theme ( 확장명에 맞는 아이콘 표시)
- Prettier ( 자동 줄 바꿈 등)
2) 브라우저는 HTML이 어떻게 작성되어있던지 간에 화면에 보여준다 (오류 발생 X)
즉, 제대로 써도, 이상하게 써도 화면에 출력해준다. (내가 만든 페이지의 어디가 잘못되었는 지 알기 어려움)