꿈꾸는 새벽하늘

[생활코딩-WEB1] HTML (2) 본문

💻 Programming

[생활코딩-WEB1] HTML (2)

rovemin 2022. 4. 7. 02:21

1. HTML 기본 구조

<!DOCTYPE html>
<html>
	<head>
	    <title>My Web</title>
	</head>
	<body>
	    <h1>What is Web?</h1>
	    <p>This is Web.</p>
	</body>
</html>

<!DOCTYPE html> : 현재 문서가 HTML5 문서 타입임을 명시한다.

<html> : HTML 문서의 루트(root) 요소를 정의한다.

             HTML로 작성된 모든 내용은 <html>과 </html> 사이에 있어야 한다.

<head> : HTML 문서의 메타데이터(metadata)를 정의한다.

             메타데이터란 HTML 문서에 대한 정보로, 웹에는 직접적으로 표현되지 않는 정보이다.

             <head> 안에는 <title>, <meta>, <style> 등이 있다.

             <title>은 웹의 제목을 나타낸다.

<body> : 웹을 통해 사용자에게 보여지는 내용(content) 부분이다.

 

2. 목록 태그

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

 

<ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. JavaScript</li>
</ul>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

ul 태그 : 순서가 없는 목록 - 글머리 기호를 붙여서 목록을 만든다.

ol 태그 : 순서가 있는 목록 - 번호 형식으로 순서를 매기며 목록을 만든다.

li 태그 : 목록의 내용이 되는 실질적인 태그로, ul 태그와 ol 태그 내부에서 사용된다.

 

3. 이미지 삽입

<img src="image.jpg" width="100%">

src="image.jpg" width="100%

이 부분은 속성, Attribute라고 부른다.

태그의 이름만으로 정보가 부족할 때는 위와 같은 속성을 사용해서 더 많은 의미를 부여할 수 있다.

 

4. 링크로 웹 페이지와 웹 페이지 연결하기

<a href="https://www.google.co.kr/" target="_blank" title="Google">Google</a>

<a> 태그의 속성

(1) href : 연결할 웹 페이지의 주소 지정

(2) target : 연결된 주소로 이동할 때 어떤 방법으로 열 지 지정

               target="_self" - 현재 창에서 링크 열기 (설정하지 않을 시 기본값으로 적용)

               target="_blank" - 새 창에서 링크 열기

(3) title : 태그에 대한 설명 표시

            마우스 오버시 title에 적힌 내용이 보임

 

5. 웹호스팅

Host : 인터넷이 연결되어 있는 각각의 컴퓨터

Hosting(=Cloud) : 인터넷이 연결되어 있는 컴퓨터를 빌려주는 비즈니스

Web Hosting : 컴퓨터의 웹 서버처럼 웹이 동작하기 위해 필요한 소프트웨어까지 설치해서 빌려주는 비즈니스

 

저작자표시 (새창열림)

'💻 Programming' 카테고리의 다른 글

[노마드코더] JavaScript (2)  (0) 2022.06.23
[노마드코더] JavaScript (1)  (0) 2022.06.23
[생활코딩-WEB2] CSS (2)  (0) 2022.06.21
[생활코딩-WEB2] CSS (1)  (0) 2022.05.04
[생활코딩-WEB1] HTML (1)  (0) 2022.03.31
'💻 Programming' Related Articles more