HTML

브라우저란? 

평소엔 검색을 위한 용도로만 알고 있었지만, 이제는 HTML을 해석해주는 도구로 확장시키자.

브라우저는 주소창과 , HTML을 해석해서 화면에 보여주는 부분으로 나뉠 수 있다.

 

HTML은? 

Hyper Text Mark-up Language 의 약자로 인터넷의 하이퍼텍스트를 표현하기 위한 언어

<> 로 작성한다. 

 

< > 와 </ > 

시작과 끝을 의미하는 것으로 HTML에선 필수!

 

VScode

HTML을 작성하는 데는 메모장으로도 충분히 할 수 있지만, 작업의 편의성(<> 를 작성하면 까지 작성)을 위해 VScode (Visual Studio Code)를 이용한다.

 

 

VScode - 1. 작업 폴더 생성 및 설정  2. 텍스트 파일 만들기 (.html) 3.  한국어 설정하기 4. Live server 설정하기

 

한국어 설정하기 : vscode 좌측 큐브 모양(확장)을 누르고

Korean Language Pack for Visual Studio Code   설치

 

Live server : 확장에서 live server 검색해서 설치 

파일을 저장 후 저장된 곳에 찾아가서 누르는 것보다 빠르게 실행할 수 있음.

(저장 중요!!-안하면 파일 탭 옆에 o 표시 있음.)

 

엘리먼트 (태그), 속성

< > 안에 작성하게 되며, <엘리먼트 속성 = ""> 구조를 이룬다.

엘리먼트에 따른 속성이 있다.

 

엘리먼트	설명	속성	형태
head	브라우저에 탭에 표시됨.		ㅡ
body	화면에 직접적으로 보이는 곳.		ㅡ
h1~h6	제목 역할(숫자가 커질수록 글자크기가 작아짐)		block 형태
a	URL 링크를 작성할 때 사용	herf...	inline 형태
div	block 효과를 주기위해 사용 (블럭 레이아웃) 자체로는 큰 의미 없음.		block 형태
span	inline 효과를 주기위해 사용 (인라인 레이아웃) 자체로는 큰 의미 없음.		inline 형태
ul,li	li를 쓸 때는 ul로 묶어서 같이 사용해야함. (내용의 느낌)		block 형태
input	지정한 속성이나 값을 넣어준다.	type	inline 형태
button	버튼을 만든다.		inline 형태
select	선택항목 만들기, 옵션을 같이 넣어주어야함.		inline 형태

블럭 형태 : 브라우저에서 한 줄을 차지한다.

인라인 형태 : 브라우저에서 한 줄 안에 여유 공간이 있으면 이어서 작성 가능하다.