Dev/Web

[Web] HTLM & Internet

사과당근 2021. 10. 12. 17:34

웹은 Public Domain으로 저작권이 없다.

HTML (HyperText Markup Language)은 웹 페이지를 만드는데 필요한 마크업 언어이다.

 

Tag

<strong> 내가 원하는 내용 </strong>

= "내가 원하는 내용"이 굵게 표시된다

 

<u> 내용 </u>

= u는 underline의 약자로 "내용"에 밑줄이 그어진다

 

<h1> 내용 </h1>

= h1부터 h6까지 존재하는 이 태그는, 제목을 나타내는 태그이다. headings의 약자이고 숫자가 올라갈 수록 글씨가 작아진다. 이 태그에 감싸진 내용은 자동 줄바꿈이 된다.

 

<br>

= 줄 바꿈 태그, 상당히 자주 쓴다. 닫는 태그가 없다.

 

<p> 내용 </p>

= 단락을 변경하는 태그. br 태그와 보여지는 것에 큰 차이는 없다. 단락이 정해진 여백만큼 구별되는데 css를 이용하면 조절할 수 있다. <p style="margin-top:40px;">라는 css을 이용하면 단락이 40픽셀 단위로 구별된다.

 

속성

=태그의 심화된 문법

 

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

= 이미지 삽입, src는 source의 줄임말. 이미지가 html파일과 같은 디렉토리에 있고, 이미지 이름이 coding.jpg라고 가정한다. width는 크기를 조절한다.

 

<parent>

    <child></child>

</parent>

= 이 형태에서 다른 태그를 포함하는 태그를 부모태그, 포함된 태그를 자식태그라고 한다.

<li> 내용1 </li>

<li> 내용2 </li>

= list 로 나타낼 수 있는 태그

 

  • 내용1
  • 내용2

처럼 나타낼 수 있다. li로 묶을 경우 어디서부터 어디까지 li가 속하는지 그룹핑을 하기 위해 ul 태그를 이용한다.

<ul>

    <li> 내용1 </li>

    <li> 내용2 </li>

</ul>

위와 같이 ul을 이용해서 그룹핑할 수 있다.

 

<ol>

    <li> 내용1 </li>

    <li> 내용2 </li>

</ol>

= ul은 unordered list, ol은 ordered list의 약자로 ol로 묶게 된다면 넘버링이 된다.

1. 내용1

2. 내용2

위와 같은 형태인 숫자 리스트로 나타난다.

 

<table>

    <tr>

        <td> 내용 <td>

        <td> 설명 <td>

    </tr>

    <tr>

        <td> 내용2 <td>

        <td> 설명2 <td>

    </tr>

</table>

 = table 태그는 3대가 같이 다닌다. 이를 이용하면

내용 설명
내용2 설명2

위와 같은 table, 표가 생성된다.

 

중요한 것

<title> 제목 </title>

= title 태그를 이용해서 파일 제목을 설정할 수 있다.

 

<meta charset="utf-8">

= 한글은 파일의 저장방식에 따라 오류가 생길 수도 있다. UTF-8 파일 형식일 경우 오류가 생기지 않으니 열 때 UTF-8  형식으로 열도록 알려줘야한다.

 

위와 같은 제목과 파일형식은 <head> - </head> 태그에 묶어주어야 한다.

ul, ol, h1, br등 본문을 나타내는 태그들은 <body> - <body> 태그로 묶어주어야 한다.

 

head태그는 body태그를 감싼다. head 태그 또한 <html> - </html> 태그에 감싸진다.

<html> 태그 위에는 관용적으로 <!doctype html>을 작성해준다. 이 문서가 html임을 나타낸다.

.

.

.

<a href="https://sxyzn.tistory.com" target="_blank" title="클릭 전 정보"> 블로그 </a>

= a는 anchor의 약자이다. "블로그" 를 누르면 https://sxyzn.tistory.com 라는 주소로 이동한다. target="_blank"를 사용했기 때문에 새 탭에서 열린다. 뒤에 쓰인 title=... 을 이용하면 클릭하기 전에 "클릭 전 정보" 라는 간단한 설명을 띄워준다.

 

서버와 클라이언트

클라이언트 : 서비스를 이용하는 사람, 혹은 컴퓨터 (웹 브라우저를 이용하여)

서버 : 서비스를 제공하는 사람, 혹은 컴퓨터

 

웹 서버를 이용하면 내 컴퓨터에 있는 문서를 전 세계에서 웹 브라우저를 통해 볼 수 있다.

이 일을 하기 위해 두 가지 방법을 사용할 수 있다.

1. 직접 웹 서버 설치하기

2. 대행해주는 업체 이용하기 (=웹 호스팅)

 

웹 호스팅

인터넷이 연결된 컴퓨터를 호스트라고 한다.

웹 서버를 운영하기 위한 컴퓨터, 즉 호스트를 빌려주는 업체를 web hosting 업체라고 한다.

대표적이면서 현재 무료로 운영 중인 서비스는 github이다.

우리가 제작한 html 파일을 업로드하면 깃허브를 통해 사람들이 볼 수 있다. 또한 웹 서버를 활성화 하면 주소가 생성되며 사람들에게 공유할 수 있다. 사람들은 해당 주소를 인터넷 브라우저에 입력하여 나의 문서를 볼 수 있다.

 

 

 

 

 

 

 

 

 

 

 

[참고자료] 생활코딩 WEB1 - HTML & Internet 

저작자표시