INTRO
웹페이지 언어는 3가지로 구성되어있다.
1) HTML (Hyper Text Markup Language)
2) CSS (Cascading Style Sheet)
3) JavaScript
웹사이트는 여러 content로 구성되어있다.
브라우저는 멍청하기 때문에 우리가 content가 무엇인지(title, image, link, list 등..)
어느 위치에 있는지를 알려줘야한다.
이렇게 웹사이트에게 컨텐츠의 종류와 위치를 알려줄 때 필요한 것이 HTML이다.(구성 및 뼈대)
- Cascading Style Sheets
- browser에게 웹 사이트가 어떻게 보여야하는지에 대해 알려준다.
- HTML이 뼈대라면 CSS는 근육
- HTML이 없다면, CSS는 아무 것도 할 수 없다.
⇒ content가 무엇인지에 대해서는 HTML(내용)
⇒ content 가 어떻게 보일까에 대해서는 CSS(꾸미기)
- 웹사이트는 2 or 3가지 종류의 Text(Language)로 구성되어있다.
- 1 HTML(Hypertext Markup Language) - content 구조 정의 : title, image, text, link, list, sidebar, header..
- 2 CSS(Cascading Style Sheets) - HTML과 같이 쓰이며, content가 어떻게 보여야하는지 정의
- 3 Javascript - 동적 상호작용(interactivity)이 필요하면 사용, 복잡한 에니메이션
Learning HTML
-
HTML파일 만들 때 확장자는 .html
-
파일명, 폴더명은 항상 소문자로 작성되어야 한다.
-
파일 안에 내용이 변경될 때마다 저장을 해야한다. (Ctrl + S)
파일명 옆에 흰색동그라미가 보인다면 아직 저장되지 않은 것이다. -
브라우저 새로고침 : Ctrl + R,
크롬 탭바꾸기 : Ctrl + Tab / Ctrl + 원하는 탭번호 -
웹사이트를 만드는데 꼭 VSC가 필요한 것이 아니다. 메모장으로도 만들수 있다. VSC를 쓰는 이유는 좋은 익스텐션이 많이 때문.
-
WakaTime이라는 확장 프로그램 등 유용한 것들이 많다.
-
익스텐션 추천 : Community Material Theme → VSC 테마 변경 익스텐션
-
Select Color Theme을 통해서 테마 변경 가능.
-
익스텐션 추천 : IMaterial Icon Theme → 아이콘 표시해주는 익스텐션.
-
브라우저와 HTML에서 중요한 부분 : 브라우저는 아무런 오류가 없다. HTML문법을 따르지 않아도 언제나 사용자에게 콘텐츠를 보여준다. 브라우저는 HTML 파일에 에러가 있다고 알려주지 않는다.
-
이와 같은 브라우저의 특징은 장단점이 있다.
-
단점은 브라우저가 무엇이 잘못된거지 알려주지 않는다는 것.
-
장점은 우리가 실수를 하더라도 페이지에 접속한 유저는 콘텐츠를 볼 수 있다는 것.
-
HTML tag 사이에 넣는 텍스트가 무언가가 된다 (title, image, 등등)
-
브라우저는 아무의미가 없어도 이해하려한다
-
h1 = header no.1, h2 = header no.2 . . . h6까지 존재
-
브라우저는 내가 만든 태그를 사용하지 못한다 (텍스트로 표현할 수는 있지만 원하는대로 작동은 안됨)
-index는 대부분의 웹서버가 가장 먼저 읽는 파일 (이는 브라우저가 가진 디폴트 속성)
-
'!'는 html 기본 서식을 빠르게 입력할 수 있는 단축키이다.
-
column이라는 이름은 매우 일반적이기 때문에 (다른 html 파일에서도 많이 사용되는 이름이라), 구분을 짓기 위해 '부모 요소자식요소'로 이름을 짓는다.
예) 〈div id="status-bar"〉
〈div class = "status-barcolumn"〉 〈/div〉
〈/div〉 -
〈!--내용--〉은 브라우저에게 보이지 않고, 사용자만 볼 수 있는 일종의 메모이다. (주석)
+) 단축키
Shift + alt + 방향키 위 아래 : 해당 라인 복붙
div class="name" -> div.name
div id="id" -> div#id
순서가 있는 리스트 태그 : (ol) , 리스트 항목 앞에 1,2,3,4 번호가 붙음
순서가 없는 리스트 태그 : (ul)
리스트안의 항목 : (li)
a = anchor를 뜻함 (link를 떠올리면 됨) (추가적인 정보가 필요함)
attributes = 태그에 추가하는 정보
href = http reference라고 함 (anchor 태그에만 추가 가능)
target = 기본값은 self이고, _blank 입력 시 새 탭에서 링크가 열림
img = 다른 태그와 다르게 /로 닫는 태그가 없다 (자체 닫기 태그이기 때문)
src = img 안에 사진을 집어넣음 (img에서 작동)
같은 폴더에 이미지가 있을 경우 이미지 이름.확장자
다른 폴더일 경우 폴더/이미지.확장자 (경로 표기 법)
모든 HTML 문서는 로 시작
HTML 문서는 HEAD(웹사이트의 환경 설정), BODY(사용자가 볼 수 있는 내용)로 구성됨
title = 제목 설정
브라우저 화면상에 보여질 내용들은 body에 있어야 함.
