브라우저란?
평소엔 검색을 위한 용도로만 알고 있었지만, 이제는 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 검색해서 설치
파일을 저장 후 저장된 곳에 찾아가서 누르는 것보다 빠르게 실행할 수 있음.
엘리먼트 (태그), 속성
< > 안에 작성하게 되며, <엘리먼트 속성 = ""> 구조를 이룬다.
엘리먼트에 따른 속성이 있다.
| 엘리먼트 | 설명 | 속성 | 형태 |
| 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 형태 |
블럭 형태 : 브라우저에서 한 줄을 차지한다.
인라인 형태 : 브라우저에서 한 줄 안에 여유 공간이 있으면 이어서 작성 가능하다.
엘리먼트마다 다른 속성도 있고 공통된 속성을 가지고 있는 것도 있다.
엘리먼트에서 id, class, name 이라는 공통된 속성이 들어갈 수 있으나 html 만으론 큰 효과 없음. (CSS)
(id, class, name을 쓸 수 있는 엘리먼트가 따로 있다? 모두 사용 가능하다? - 모든 곳에서 사용 가능하다. 아직은.. 뒤에 더 배울 것 같다.)
<html>
<head>
<title>웹사이트</title>
</head>
<body>
hello, world!
엘리먼트...
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<a href= "http://naver.com">네이버 가기</a>
<a href= "http://google.com">구글 가기</a>
<div>block 효과를 주기위해서.(블럭 레이아웃)</div>
<span>inline 효과를 주기위해서. (인라인 레이아웃)</span>
<span>inline 효과를 주기위해서.</span>
<div>block 효과를 주기위해서.</div>
<ul>
<li>1번</li>
<li>2번</li>
<li>3번</li>
<li>4번</li>
<li>5번</li>
</ul>
<div>
<input type="text" />
</div>
<div>
<input type="password" />
</div>
<div>
<input type="radio" /> 남자
<input type="radio"/> 여자
</div>
<div>
<input type="checkbox" />
</div>
<button>로그인</button>
</body>
</html>
스스로 코드 작성해보기
<html>
<head>
</head>
<body>
<h2>회원가입</h2>
<ul>
<li>
<span>아이디</span>
<input type="text" />
</li>
<li>
<span>패스워드</span>
<input type="password" />
</li>
<li>
<select>
<option>남자</option>
<option>여자</option>
</select>
</li>
<li> <button>로그인</button>
<button>회원가입</button>
</li>
</ul>
</body>
</html>
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221013 CSS (0) | 2022.10.13 |
|---|---|
| 221012 CSS (0) | 2022.10.12 |
| [유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 9강 (1) (0) | 2022.10.10 |
| [유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 8강 (2) (0) | 2022.10.08 |
| [유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 8강 (1) (0) | 2022.10.07 |
댓글