모스카토

html css 시작 본문

프런트엔드

html css 시작

라리라밤 2020. 8. 19. 22:50

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)
  • 텍스트

html 기본 구조

 

<!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) 을 클릭

패키지 설치 과정1

 

live server 검색해서 나오면 클릭 후 설치.

패키지 설치 과정2

구글에 vsc 패키지, vsc 익스텐션, vscode 패키지 등을 검색하면 유용한 패키지들을 찾을 수 있다.

'프런트엔드' 카테고리의 다른 글

[css] flex  (0) 2020.09.03
[css ] block v.s inline  (0) 2020.09.02
CSS 시작  (0) 2020.09.01
[html] form 태그  (0) 2020.08.21
[html ] 태그  (0) 2020.08.21
'프런트엔드' Related Articles more
Comments