생활코딩 : WEBn > WEB1 - HTML & Internet 내용 정리

HTML에는 150여개의 태그가 있음

태그와 element는 같은 의미

<strong></strong>(강조), <u></u>(밑줄), <h1></h1>(제목)
등 을 HTML에서는 태그 라고 부름.

일반적인 텍스트에 bold와 밑줄을 함께 적용할 수 있듯 태그는 중첩해서 사용할 수도 있음.

무엇인가를 설명하지 않는 태그들은 태그를 닫지 않음. (img, input, br, hr, meta 등)

문단 나누기

1. <br> : New Line

br 태그는 연달아 쓸 수 있어 원하는 만큼의 간격을 줄 수 있다.

2. <p></p> : 단락을 표현

p 태그는 단락을 표시해줌으로 정보를 가치있게 해주지만, 시각적으로 단락사이의 간격이 고정된다는 단점이 있음

이 단점은 CSS를 이용하여 극복 할 수 있음

<p style="margin-top:45px;"></p>
위와 같이 p 태그에 style="margin-top:45px" 를 추가하면 p 태그의 위쪽에 45px 만큼의 여백(margin)이 생긴다.

속성(attribute)

<image> 태그 이름만으로는 정보가 부족함

그래서 새로운 문법 속성(attribute)을 적용하게 됨.

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">

부모 자식과 목록

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

1. HTML
2. CSS
3. JavaScript

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

HTML
CSS
JavaScript

문서 구조와 슈퍼스타들

HTML 태그들 중 사용 빈도수가 가장 높은 슈퍼스타들

<title></title> 웹브라우저의 탭 이름
title 태그는 검색 엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그
(title 태그를 쓰지 않으면 검색시 노출 되기 어렵다.)

<meta charset="utf-8">
영어가 아닌 문자가 깨지는 이유는 웹페이지가 저장된 문자 표현 방식과 웹브라우저가 웹페이지를 해석하는 방식이 일치하지 않을 때

웹 브라우저는 이상한 문자를 표시하게 됨

UTF-8로 만들어졌기 때문에 UTF-8로 열어야 한다고 웹브라우저에 알리는 방법

본문은 body 태그로
본문을 설명하는 태그는 head 태그를 사용.

또 body 태그와 head 태그를 감싸는 html 태그를 두기로 약속됨.

또 이 웹페이지가 HTML로서 만들어졌다는 것을 표현하기 위해서 문서의 시작에 아래와 같은 코드를 추가 <!doctype html>

링크

<a href=" ">

<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">
Hypertext Markup Language (HTML)

target="_blank" : 링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성.

title=" " : 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능.

동영상 추가

<iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>