오뚝이개발자

[HTML]HTML 기초(실습 포함) 본문

Front-end/HTML

[HTML]HTML 기초(실습 포함)

땅어 2020. 6. 27. 16:25
728x90
300x250

HELLO WORLD 출력

VScode로 test.html이란 파일을 만들고 hello world를 입력한 후 저장한다.

크롬을 열어 ctrl+o를 누르고 test.html 파일을 선택하면 아래 그림과 같이 해당 html파일이 크롬으로 열리는 것을 볼 수있다.

test.html파일을 연 모습

 

<strong>, <u> 태크

- html에서 태그란 그 안의 내용을 설명해주는 것을 말한다.

- strong 태그는 태그 안의 내용을 Bold체로 바꿔준다.

  - EX) <strong>hello world</strong>

- u 태그는 태그 안의 내용에 밑줄을 쳐준다.(underline)

  - EX) <u>hello world</u>

strong 태그 적용 모습
u 태그 적용 모습

 

Heading 태그

heading 태그란 제목을 표현하는 태그를 말한다. <h1>, <h2>, ... , <h6>까지 6가지가 있다. 숫자가 작을수록 크기가 큰 제목이다.

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

 

줄바꿈 태그

1. <br> 태그

br태그는 단순한 줄바꿈 태그이다.

Hello I'm Ddangeo.<br> Nice to meet you.

2. <p> 태그

p태그는 문단을 구분하는 태그이다. p태그는 문단을 명확히 구분하도록 문단 사이에 공백 한줄을 더 넣어준다. 문단을 구분할 땐 <br>을 두번 사용하는 것보단 p태그를 사용하는 것이 좋다. p태그를 사용할 땐 </p>를 사용해 문단의 끝을 명시해준다.

<p>Hello I'm Ddangeo.</p>Nice to meet you.

cf) 시각적으로 보충이 필요한 부분은 CSS를 이용해 원하는 만큼 조절할 수 있다. 

- EX) <p style=”margin-top:60px;”> => 60픽셀 만큼 위 쪽 공백을 띄워준다.

 

적절한 HTML 태그 사용이 중요한 이유

예컨대, 크기는 비슷하지만 태그가 다음과 같이 다른 두 경우가 있다고 해보자.

A.     <span style=”font-size:24px;”>coding</span>

B.     <h3>coding</h3>

둘 중 검색 엔진은 B를 더 잘 검색해준다. 제목이라는 것을 h태그를 활용해 명확히 표시해주었기 때문이다.

 

속성(attribute)

속성은 태그만으로 부족한 정보를 설명해준다.

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

위의 코드는 coding.jpg라는 이미지 파일을 100% 비율의 width 삽입해준다. 이 때 속성을 나타내는 src와 width의 순서는 바뀌어도 무관하다.

img 태그로 이미지를 삽입한 모습

 

부모 자식 태그와 목록

<li>태그는 list의 앞 두글자로 목록을 나열할 때 쓰인다.

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

이 때 순서를 나타내는 것이 필요할 때는 <ol>(ordered list), 순서를 나타내는 것이 필요없을 때는 <ul>(unordered list) 태그를 부모태그로 붙여준다. 참고로 <ol> 태그를 붙인 곳은 자동으로 넘버링이 되어 중간의 내용을 지우더라도 알아서 넘버링이 수정된다.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

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

 

<title> 태그

<title> 태그는 웹페이지 창의 제목을 바꿔준다. 

<title>WEB</title>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

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

위와 동일한 코드에 title 태그를 넣어 제목을 WEB으로 해주었더니 창의 제목이 test.html에서 WEB으로 바뀐 것을 볼 수 있다.

 

인코딩 태그

인코딩과 관련된 태그도 있다. 한글을 표현하고자 할 땐 일반적으로 아래의 태그를 html문서 상단에 포함시켜준다.

<meta charset="utf-8">

 

doctype, html태그, head와 body

<head>태그는 일반적으로 title이나 인코딩 meta태그 같이 문서 전체를 설명해주는 것들을 포함하는 부모태그이다. 반면, <body>태그는 그 외의 본문을 포함하는 부모태그이다.

<!doctype html>
<html>
    <head>
        <title>WEB1 - HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <ul>
            <li>1. HTML</li>
            <li>2. CSS</li>
            <li>3. JavaScript</li>
        </ul>
    </body>
</html>

일반적으로 본 문서가 html이라는 것을 명시하기 위해 맨 상단에 <!doctype html>태그를 넣어준다.

그 다음 <html></html>태그로 전체를 감싸주고 위와 같이 head와 body로 구분을 한다.

 

링크 달기 - <a> 태그

- a는 anchor(앵커)에서 따온 것으로 닻을 내린다는 의미에서 링크를 달아주는 태그를 의미한다.

- <a href="링크주소입력"> 와 같이 사용한다.

- href = hypertext(링크) + ref(참조)

- <a href=”~~~” target=”_blank” title=”html5 specification”>

  - target 속성을 위와 같이 설정하면 새탭으로 열리도록 한다.

  - title 속성은 링크가 달린 텍스트에 커서를 가져다 두었을 때 설명이 나오도록 한다.

- 아래의 코드에서 p태그로 감싸진 부분을 참고하면 된다.

<!doctype html>
<html>
    <head>
        <title>WEB1 - HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <ul>
            <li>1. HTML</li>
            <li>2. CSS</li>
            <li>3. JavaScript</li>
        </ul>
        <p><a href="https://www.w3.org/TR/html51/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
    </body>
</html>

링크가 달린 모습

 

WEB Hosting

- 본래 위와 같은 html파일을 만들면 server가 이를 가지고 있으면서 client가 server에 요청을 하면 server는 이에 대한 응답으로 본인이 갖고 있는 html파일을 넘겨주는 형식으로 서로 다른 PC끼리 통신할 수 있는 것이다.

- 하지만 server를 직접 개설하고 운영하는 것이 힘든데 이를 대신해주는 업체에 맡기는 것이 hosting이다.

- 대표적인 web hosting을 무료로 제공해주는 곳은 github의 github page기능이다.(방법은 아래의 사진 참고)

- github은 자신이 만든 html파일을 업로드하면 이를 주소로 배포해 다른 PC들에서도 볼 수 있도록 서버처럼 작동한다.

1. 자신이 만든 html파일을 github의 레포지토리를 추가해 여기에 업로드한다.
2. 상단의 settings에 들어간다.
3. 아래로 스크롤해 GitHub Pages의 Source를 master branch로 설정해준다. 그럼 Youre site is published at ~~에 자신의 페이지 주소가 뜬다.

 

동영상 삽입

- 일반적으로 대부분의 동영상들은 공유버튼을 눌러보면 페이지에 삽입하는데 사용할 수 있도록 html태그를 제공한다.

- 여기선 유튜브를 예시로 하여 동영상 삽입하는 것을 알아보자.

생활코딩님의 동영상에서 공유버튼을 누른다
퍼가기를 클릭
우측의 html 태그 복사

- 복사한 태그를 자신의 html 파일에 넣어주면 다음과 같이 동영상이 삽입된 페이지를 볼 수 있다.

짜잔! 동영상이 삽입된 페이지

 

 

 

728x90
300x250
저작자표시

'Front-end > HTML' 카테고리의 다른 글

[HTML] netlify로 web hosting하기  (0) 2020.07.11
[HTML]방문자 분석 기능 추가  (0) 2020.06.28
[HTML]채팅 기능 추가  (0) 2020.06.28
[HTML]댓글 기능 추가  (0) 2020.06.28
'Front-end/HTML' Related Articles more
Comments