HTML 시작하기

1. HTML(HyperText Markup Language)

웹페이지를 구성하는 마크업 언어 ( 마크업 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어)
웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어
대소문자를 구분하지 않지만 가독성과 기타 이유로 소문자로 작성

2. HTML 요소(Element)의 구조

여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다.
닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.

3. 블럭 레벨 요소 vs 인라인 요소(Block versus inline elements)

블록 레벨 요소(Block level element)
- 웹페이지 상에 블록(Block)을 만드는 요소
- 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타냄
- 일반적으로 페이지의 구조적 요소를 나타낼 때 사용
- 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없음
인라인 요소(Inline elements)
- 항상 블록 레벨 요소내에 포함
- 새로운 줄(Line)을 만들지 않음
- 하이퍼링크를 정의하는 요소인 <a> , 텍스트(Text)를 강조하는 요소인 <em>, <strong> 등이 있음

예시

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

결과

firstsecondthird

fourth

fifth

sixth

<em> 은 인라인 요소이므로, 처음 세 개의 요소는 서로 같은 줄에, 사이에 공백이 없이 위치한다.

한편, <p> 는 블록 레벨 요소이므로, 각 요소들은 새로운 줄에 나타난다.

4. 빈 요소(Empty elements)

주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소
예를 들어 img 요소는 해당 위치에 이미지를 삽입하기 위한 요소

예시

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

결과

5. 속성(Attributes)

요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용

사용 조건

요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 한다.
속성 이름 다음엔 등호(=)가 붙는다.
속성 값은 열고 닫는 따옴표로 감싸야 한다.

예시 : 속성에 요소 추가하기

<a> 요소는 "anchor"를 의미하는데, 텍스트를 감싸서 하이퍼링크로 만든다.

href : 이 속성에는 당신이 연결하고자 하는 웹 주소를 지정합니다.

예) href="https://www.mozilla.org/".

title : title 속성은 링크에 대한 추가 정보를 나타냅니다.

예) title="The Mozilla homepage". 이 내용은 링크 위로 마우스를 옮겼을 때 나타날 것입니다.

target : target 속성은 링크가 어떻게 열릴 것인지를 지정합니다.

예) target="_blank" 는 링크를 새 탭에서 보여줍니다.

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

결과

A link to my favorite website.

6. HTML 문서의 구조

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

<!DOCTYPE html> : 유효한 문서 형식을 나타내는 짧은 문장이고, 이 것만 알고 있으면 된다.
<html></html> : 전체 페이지의 콘텐츠를 포함하며, 기본 요소로도 알려져 있습니다.
<head></head> : 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다.
<meta charset="utf-8"> : HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함됩니다. 이 설정을 사용하면 페이지에 포함 된 모든 텍스트 내용을 처리 할 수 있습니다. 이것을 설정하면 나중에 문자 인코딩과 관련된 일부 문제를 피하는 데 도움이 될 수 있으므로 문자 인코딩 설정을 하지 않을 이유가 없습니다.
<title></title> : 요소를 사용하면 페이지 제목이 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용됩니다.
<body></body> : 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다.

7. HTML 시맨틱 (Semantics)

프로그래밍에서,시맨틱은 코드 조각의 의미를 나타낸다.
"이게 어떻게 시각적으로 보여질까?" 보다 "Javascript 라인을 실행하는 것은 어떤 효과가 있는가?"
혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"
정확한 의미, 기능을 담고 사용해야 한다.

예시

<h1>This is a top level heading</h1>

"이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다.

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

이렇게 하면 top level heading 처럼 보이지만 의미적 가치(semantic value)가 없으므로, 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다.

HTML은 채워질 데이터를 나타내도록 코딩해야합니다. 기본 프리젠테이션 스타일기반이 아니라요. 프레젠테이션(어떻게 보여져야만 하는가)은 CSS만의 단독 역할입니다.

의미론적인 마크업의 이점

검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다.
시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.
의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.
개발자에게 태그 안에 채워질 데이터 유형을 제안합니다
의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.

'HTML&CSS' 카테고리의 다른 글

웹 앱 화면 설계하기 (0)	2022.06.29
CSS - Flexbox 레이아웃 (0)	2022.06.28
CSS 기초 (0)	2022.06.28
HTML 텍스트 기본 (0)	2022.06.27