HTML_기초배우기

요약

HTML은 HyperText Markup Language의 약자로, 마크로 둘러싸인 언어 즉, 태그로 둘러 싸인 언어를 뜻함

웹 페이지는 기본적으로 HTML로 구성되어 있다.
HTML의 구조는 다음과 같다.

블럭 레벨 요소는 요소 사이에 새로운 줄을 삽입하고, 인라인 요소는 블록 레벨 요소 내에 포함되어 진다.
<img> 같은 태그는 </닫는태그> 없이 단일 태그로 사용될 수 있다.
속성은 요소에 실제로 나타내진 않지만, 추가적인 내용을 담고 싶을 때 사용한다.
- 요소 이름과 속성 사이에 공백 있어야 하고, 하나 이상의 속성이 있는 경우 공백으로 구분지어야 함
- 속성 이름 다음엔 = 가 붙는다.
- 속성 값은 따옴표로 열고 닫으며, 작은 따옴표와 큰 따옴표 사용은 상관이 없으나 섞어서 사용하는 것은 안된다.

HTML의 문서는 다음과 같은 형태로 되어 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML의 태그는 자주 쓰이는 것은 기본적으로 알아두고, 그 외의 것은 그때그때 필요에 따라 구글링하는 것이 좋다.

HTML이란 무엇인가?

HyperText Markup Language의 약자이다.

Hypertext = 문서와 문서가 연결되어 있다는 뜻

Markup이라는 것은 마크로 둘러싸인 언어 즉, 태그(Tag)로 둘러싸인 언어를 뜻함

<h1>h1이라는 태그로 둘러싸인 상태</h1>

HTML을 이해하기 위해선 태그를 이해할 필요가 있다.

웹 페이지는 기본적으로 HTML로 구성되어 있다.

HTML의 구조

여는 태그(Opening tag)

요소의 이름과(위의 경우 p) 열고 닫는 꺽쇠 괄호로 구성됨 <>
닫는 태그(Closing tag)

요소 이름 앞에 / 슬래시 표시가 있는 것을 제외하곤 여는 태그와 동일한 형태.

여는태그로 시작점을, 닫는태그로 끝 지점을 지정함
내용(Content)

요소의 내용이며 이 경우 단순한 텍스트
요소 (Element)

여는태그, 닫는태그, 내용을 모두 통틀어 요소(element)라고 한다.

<!--Nesting elements, 요소 안에 다른 요소가 들어간 내포된 요소도 가능하다.-->
<p>My cat is <strong>very</strong> grumpy.</p>

블럭 레벨 요소 vs 인라인 요소

블록 레벨 요소(Block-level elemenets)

블록 레벨 요소는 요소 사이에 새로운 줄을 만든다.
```
fourthfifthsixth
```
일반적으로 블록 레벨 요소는 페이지의 구조적 요소를 나타낼 때 사용된다.
인라인 요소(inline elemenets)

인라인 요소는 항상 블록 레벨 요소 내에 포함되어 있다.

즉, 새로운 줄을 만들지 않는다.
```
firstsecondthird
```

빈 요소(Empty elements)

모든 요소가 <여는태그> 내용 </닫는 태그>의 패턴을 따르는 것은 아니다.

<img> 태그 같은 경우 문서에 무언가 첨부하기 위해 단일 태그로 사용된다.

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

속성(Attribute)

속성은 요소에 실제로 나타내진 않지만, 추가적인 내용을 담고 싶을 때 사용한다.

위 예시의 class가 속성이다.

속성을 사용할 때 지켜야 할 규칙은 다음과 같다.

요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 하고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 한다.
속성 이름 다음엔 등호 = 가 붙는다.
속성 값은 열고 닫는 따옴표 ""로 감싸야 한다. → 작은 따옴표와 큰 따옴표는 스타일의 문제로 선호하는 방식을 사용하면 된다. 다만, 섞어서 쓰는 것은 문제가 될 수 있으니 주의하자

<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>

HTML 문서의 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML 문서는 위와 같은 형태로 되어 있는데 살펴보면,

문서의 형식을 나타낸다.

이 부분은 HTML 초창기에 유효했던 것으로 지금은 컨벤션 정도로 이해하고 넘어가면 된다.
이 요소는 전체 페이지의 콘텐츠를 포함하며 기본 요소이다.
이 요소는 홈페이지 이용자에겐 보이지 않지만, 검색 결과에 노출될 키워드, 홈페이지 설명, CSS 스타일 Charset 등 HTML 페이지의 모든 내용을 담고 있다.
이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이다.
페이지의 제목을 설정하는 태그이다.

브라우저 탭에 표시되는 제목으로 사용된다.
이 요소엔 텍스트, 이미지, 비디오 등 페이지에 표시되는 모든 콘텐츠가 포함된다.

HTML 태그

HTML Study | Advanced Web Ranking

위 사이트에 접속하면 HTML 태그의 사용 빈도를 확인할 수 있다.

자주 쓰이는 태그의 경우 알고 있는 것이 좋고, 그 외의 경우엔 그때그때 검색해서 사용해도 무방하다.

참고

HTML 기초 다지기

HTML 시작하기 - Web 개발 학습하기 | MDN

Author And Source

이 문제에 관하여(HTML_기초배우기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@m-vault/HTML기초배우기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)