제대로 된 프로젝트를 만들기 위해서, HTML + CSS + JavaScript 공부를 하려고 한다.
먼저 내가 파일 안에 두가지 html로 만들어진 소스와 사진 한 장을 넣어놨다.
Codes
각자 코드는 다음과 같다.
<!doctype html>
<html>
<title>Hwan's HTML world</title>
<meta charset="utf-8">
<head>
made by Hypertext Markup Language (HTML)
</head>
<body>
<p><strong>hello my name is <u>Hwan</u></strong></p>
<img src="codingPic.jpg" width="50%">
<p style="margin-top:100px"> Guten Tag, ich heisse Hwan</p>
<p>Things We Are Going to Learn
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
<br>
Ways of Saying Hello in Multiple Languages
<ul>
<li>hi</li>
<li>hola</li>
<li>guten tag</li>
<li>annyeong</li>
</ul>
</p>
<p>
<a href="https://www.google.com/" target="_blank" title="google">Google Here!</a></p>
<p>
<a href="2.html" target="_blank" title="what is one plus one"> What is 1+1?</a>
</p>
</body>
</html>1.html
<!DOCTYPE html>
<html>
<title>
What is 1+1?
</title>
<head>
plus one is cutie
</head>
</html>2.html
그리고 사진은 다음과 같다.
html이란?
우리는 html을 통해서 웹사이트를 제작할 수 있다.
각종 text를 적을 수도 있고, 사진, 동영상 뿐만 아니라 다른 Website로의 Link도 포함시킬 수 있다.
1.html 파일을 같이 보면서 중요한 함수들에 대해서 정리하고자 한다.
<!doctype html>
<html>
<title>Hwan's HTML world</title>
<meta charset="utf-8">
<head>
made by Hypertext Markup Language (HTML)
</head>
<body>
<p><strong>hello my name is <u>Hwan</u></strong></p>
<img src="codingPic.jpg" width="50%">
<p style="margin-top:100px"> Guten Tag, ich heisse Hwan</p>
<p>Things We Are Going to Learn
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
<br>
Ways of Saying Hello in Multiple Languages
<ul>
<li>hi</li>
<li>hola</li>
<li>guten tag</li>
<li>annyeong</li>
</ul>
</p>
<p>
<a href="https://www.google.com/" target="_blank" title="google">Google Here!</a></p>
<p>
<a href="2.html" target="_blank" title="what is one plus one"> What is 1+1?</a>
</p>
</body>
</html>
우선적으로, <!doctype html>은 해당 파일이 html 파일임을 알려주는 일종의 표시, 약속이자 선언이다.
우리 모두가 보는 웹사이트를 F12를 통해서 눌러보면, 모두 이 함수가 적혀있을 것이다.
또한 <html> 함수를 통해 <title>, <head>, <body>를 포함시킨다.
참고로 <html> 함수와 같이 몇몇 함수들은 </html>과 같이 다시 닫아줘야 한다.
(ex. <head>, <body>, <p> , <li>, <a> 등등)
<title> 함수는 웹사이트에서의 탭의 제목을 입력하는 함수이다.
<meta charset= "utf-8">은 한국어를 사용하게끔 해주는 html이다.
이 함수가 없다면 한글이 모두 다 이상하게 보여진다.
<head>는 보통 글의 앞 부분의 제목을 보여주는 용도로 쓰고, <body>는 본문이다.
html에서는 문단을 두 가지 방법으로 나눌 수 있다.
첫째로, <p>이다.
paragraph의 약자로, 한 문단을 <p>와 </p> 사이에 둬서 문단을 구분한다.
두번째는, <br>이다.
이 함수를 통해서 문단을 띄어쓰기 할 수 있다.
또한 <p>에서 style (css 함수이다)을 이용하여 띄어쓰기의 폭을 customize할 수 있다.
<strong> 함수는 bold체로 글씨체를 바꿔주고, <u>는 밑줄을 만든다.
<img> 함수는 image의 줄임말로, 사진을 나타낼 때 쓴다.
src (source)를 통해 사진의 주소를 적어주고, width를 통해 사진의 사이즈를 정할 수 있다.
나열을 할 수 있는 방법이 있다.
<li>를 통해 pinpoint할 수 있고,
<li>들의 부모 포인트를 나타낼 수 있는 방법이 바로 <ul>이다.
<a>는 link를 표시해주는 함수이다.
href는 html reference의 줄임말로, website의 주소를 적어주면 된다.
<a> 안에 있는 target은 새로운 페이지를 열 것인지, 해당 페이지에서 오픈할 것인지 정할 수 있다.
title을 통해 새 탭의 제목을 무엇으로 할 것인지 정할 수 있다.
html 이후 css와 js를 통해 더욱 페이지를 예쁘게 만들어 보겠다.
내가 만든 웹사이트는
https://acupoframen.github.io/WebProgramming/1
Hwan's HTML world
made by Hypertext Markup Language (HTML) hello my name is Hwan Guten Tag, ich heisse Hwan Things We Are Going to Learn 1. HTML 2. CSS 3. JavaScript Ways of Saying Hello in Multiple Languages hi hola guten tag annyeong Google Here! What is 1+1?
acupoframen.github.io
에서 볼 수 있다.
'Computer Science > html + css + js' 카테고리의 다른 글
| CSS #2: 클래스, 박스모델, 그리드, 미디어 쿼리 (0) | 2022.12.28 |
|---|---|
| css #1: Selector, Declaration,Property (0) | 2022.12.23 |
| html+css 2일차: 웹의 기본 내용 (0) | 2022.01.08 |
| html 1일차: 드디어 첫 시작 (0) | 2022.01.06 |