강의제목 : 비전공자를 위한 HTML/CSS
제공 : 네이버부스트코스
공부일자 : 2021.11.27-14
🌏2.HTML 태그
💫2-1 HTML 태그 소개
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
💫2-2 제목과 단락요소
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
developer.mozilla.org
💫2-3 텍스트를 꾸며주는 태그
텍스트 표현 태그
웹 표준화가 대두하면서 웹 문서의 구조와 표현을 분리하였습니다.
그 과정에서 많은 표현용 태그들이 사라졌고, 지금은 표현용 태그가 얼마 남지 않았습니다.
그 중 <b>, <i>, <u>, <s>에 대해 살펴보도록 하겠습니다.
- <b> : bold 태그는 글자를 굵게 표현하는 태그입니다.
- <i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.
- <u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.
- <s> : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)
위 태그들은 의미가 없는 표현용 태그이기 때문에 사용하실 때는 각별히 주의를 하셔야 합니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
💫+)시멘틱마크업
컴퓨터(브라우저)가 잘 이해할 수 있는 코드
-의미에 맞는 요소 사용
-문서의 구조화
-인간과 기계가 모두 이해할 수 있는 것이 목표
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)
developer.mozilla.org
💫2-5 앵커
-다른 문서로 이동할 수 있는 링크를 생성
-href : 링크의 목적지가 되는 URL을 지정
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
<a>: The Anchor element - HTML: HyperText Markup Language | MDN
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
developer.mozilla.org
💫2-6 의미가 없는 컨테이너 요소
의미가 없는 컨테이너 요소
태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그입니다.
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용됩니다.
이런 의미 없는 태그의 사용빈도는 매우 높습니다.
그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에
최적화되어있는의미를 지니는데,
현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문입니다.
다행히 HTML 버전이 업그레이드되면서 웹에 알맞은 태그들이 많이 생겼습니다.
가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>입니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
<div>: The Content Division element - HTML: HyperText Markup Language | MDN
The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent eleme
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
<span>: The Content Span element - HTML: HyperText Markup Language | MDN
The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such
developer.mozilla.org
💫2-7 리스트 요소
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
<ul>: The Unordered List element - HTML: HyperText Markup Language | MDN
The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
<ol>: The Ordered List element - HTML: HyperText Markup Language | MDN
The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
<dl>: The Description List element - HTML: HyperText Markup Language | MDN
The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display meta
developer.mozilla.org
💫2-8 이미지 요소
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org
💫2-9 테이블요소
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
<table>: The Table element - HTML: HyperText Markup Language | MDN
The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
developer.mozilla.org
💫2-10 폼요소
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
💫3-4 블록&인라인
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Block-level elements - HTML: HyperText Markup Language | MDN
In this article, we'll examine HTML block-level elements and how they differ from inline-level elements.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
Inline elements - HTML: HyperText Markup Language | MDN
In this article, we'll examine HTML inline-level elements and how they differ from block-level elements.
developer.mozilla.org
'언어 > HTML, CSS' 카테고리의 다른 글
| [강의] 비전공자를 위한 HTML/CSS : PART5 단위, 배경, 박스모델 (0) | 2021.11.29 |
|---|---|
| [강의] 비전공자를 위한 HTML/CSS : PART4 CSS 이해하기 (0) | 2021.11.29 |
| [강의] 비전공자를 위한 HTML/CSS : PART1 HTML이해하기 (0) | 2021.11.27 |