html css 시작
1. 정의
html = hypertext markup language
인터넷 페이지를 열고 F12 를 누르거나, 오른쪽 마우스 클릭 + 검사 를 누르면 나오는 페이지에서
Elements 라는 태그를 클릭하면 나오는 글자들이 html이다.
웹페이지를 만드는 것이 다 글자임을 알 수 있다.
2. visual studio code
에디터 프로그램.
다른 언어도 사용할 수 있지만 html을 사용할 땐 주로 vsc를 사용한다.
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
vsc를 사용하지 않아도 메모장에 텍스트를 입력하고 이름.html이라고 저장하면 똑같이 브라우저에서 열린다.
3. html의 구성
- 문서(document)
- 요소(element) ≒ 태그
- 속성(attribute)
- 텍스트
<!DOCTYPE html> : html의 시작,
이 문서가 html임을 나타냄.
<html></html> : 모든 내용을 감쌈
<head></head> : 헤드, 화면에 안보임
<body></body> : 내용, 화면에 나타나는 부분
① visual studio code 에서 파일명.html로 파일을 만들고
② html:5 를 치고 엔터를 치면
위와 같은 html 구조가 저절로 생성된다.
4. 웹페이지 보기
위 사진 같은 상태에서 저장(ctrl + s) 후
파일에서 오른쪽 마우스 + open with으로 브라우저를 선택하거나
live server 패키지를 설치했다면 alt + l + o 로
내가 만든 문서를 브라우저에서 볼 수 있다.
5. 패키지 설치
왼쪽 바에서 제일 아래쪽 아이콘(Extensions) 을 클릭
live server 검색해서 나오면 클릭 후 설치.
구글에 vsc 패키지, vsc 익스텐션, vscode 패키지 등을 검색하면 유용한 패키지들을 찾을 수 있다.