Marking up text(텍스트 마크업)

티스토리 뷰

Web/HTML

Marking up text(텍스트 마크업)

HAN_PY 2020. 6. 29. 16:09

HTML5의 역사와 기초

HTML이란

Hyper Text Markup Language
- Markup 언어는 연산이 안된다
웹용콘텐츠(글 또는 그림 등)의 구조를 지정하는 컴퓨터 언어
웹 서버에 저자오디어 클라이언트 웹 브라우저의 요구에 따라 불려지는 문서
웹 브라우저에 불려진 HTML은 웹 브라우저에 의해 해석되어 내용이 화면에 보여짐

HTML5

실용적 설계

기존 기술을 바탕으로 새로운 기술 추가
문법 강요하지 않음
기존 HTML의 효율적인 요소 추가
안전한 보안

표현과 내용의 완벽한 분리

플러그 인 없이 미디어 처리 및 동적 작동

자체적으로 2D, 3D처리 가능
웹 브라우저가 다양한 미디어 처리
다양한 이벤트 제공

HTML5 시작하기

텍스터 에디터 준비
- HTML은 텍스트 파일
- 단순 펙스트 파일을 생성하는 어떠한 '텍스트 에디터'에서도 작성가능
  - 메모장, 워드패드, 워드프로세서(한글,워드 등에서 text포맷으로 저장)
- 전문적인 텍스트 에디터 : 각종 컴퓨터 언어 프로그래밍에 최적화
  - Notepad++(간단하고 가벼운 에디터)
  - Komodo Edit(강력한 기능의 무료 텍스트 에디터) -초보자 추천
  - Aptana Studio 3(강력한 기능의 통합 웹 개발 IDE)-사용법 복잡
  - 비쥬얼스튜디오 사용하자.

Doctype 지정하기

HTML은 여러 버전이 존재하므로 Doctype을 명시해야 한다.
기존 Doctype은 매우 길고 복잡한 DTD를 명시해야 했었다.
HTML5의 실용성 원직으로 인해 짧아졌다.
```
<!DOCTYPE html>
```

HTML 작성 규칙

요소(Element)

HTML의 마크업 명령어
- HTML은 마크업 언어이므로 콘텐츠와 함께 사용
- 요소들은 대소문자를 구분하지 않음
HTML 요소의 표현
- 콘텐츠와 HTML요소와 분리하기 위해 요소를 꺽쇠로 둘러쌈
- HTML 요소의 예
```
<p>: 문단의미 <a>:행커의미 <div>:구별을 위한 요소
```
  태그(tag) : 위와 같이 꺽쇠로 둘러싼 요소(element)
요소의 범위
- 요소가 콘텐츠의 구조 정의
  
  요소가 영향력을 미치는 콘텐츠의 범위 중요
  - 시작태그:<요소명>
  - 마침태그:</요소명>
- 단독으로 사용되는 요소
  - 단독으로 사용되는 요소의 예
```
<br>:줄바꿈 요소
<img>:이미지 요소
<meta>
```
    빈요소 (Empty Element)
```
<br>, </br>
<br/>, </br>
로 사용 가능
```
    HTML5에서는 단독으로 사용 권장
요소의 속성 기술
- 요소의 속성 : HTML요소의 필수적, 부가적인 설정 값 의미
- 요소의 속성 기술 법:
  1. 요소명 뒤에 공백을 하나 두고 속성명="속성값"의 형식으로 기술
```
예: <a href = "next.html">
```
  2. 요소의 속성이 하나 이상일 경우
    첫 번째 속성 다음에 공백을 두고 속성명="속성값"을 연결해 기술
  3. 속성값은 따옴표 또는 쌍따옴표 표시

HTML의 헤드와 바디

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

HTML CSS 자바스크립트가 모두들어가므로 구별 잘해야한다.
HTML은 head와 body부분으로 나뉜다
head
- 내용이 담긴 바디 처리 전, 처리되어야 하는 설정 부분
- HTML 파일의 메타데이터 스크립트와 CSS등이 위치
- 웹 브라우저에 나타나는 콘텐츠는 넣지 않음
Body
- 콘텐츠가 담기는 곳
- 입력한 내용 웹 브라우저에 표시

HEAD 설정하기

웹브라우져에는 보이지 않음

타이틀 지정

타이틀 : HTML 파일의 제목
웹 브라우저 타이틀바에 타이틀이 나타남
즐겨찾기나 북마크를 저장 할 떄도 사용되므로 적절한 제목을 선택해야함
```
<title>웹 페이지 제목</title>
```

문자 인코딩

사용하는 텍스트 에디터의 문자 인코딩과 HTML의 문자 인코딩과 동일해야 웹 브라우저에서 올바르게 표시된다.
유니코드인 UTF-8로 지정한다.
반드시 텍스트 에디터의 문자 인코딩 설정과 HTML 헤더 부분에 설정한 문자 인코딩을 일치 시키자
문자 인코딩 지정하지 않으면 기본으로 설정한 문자 인코딩으로 화면 표시.
이상한 메일의 이메일이 문자 인코딩을 정의하지 않고 HTML로 보내서 그렇다.

메타데이터

파일에 관한 정보를 가지고 있는 데이터
- 사진 찍으면 찰영 날짜, 카메라 모델명, 노출 등이 나타남
- MP3음원에서 연주자, 앨범 정보 기사 등 나타남
- HTML에서는 문자 인코딩, 설명,키워드, 저작권, 연락처 등
필요성
- 구글 등 유명 검색 로봇에 의해 수집되는 정보라서 사이트 홍보에 유리하다.
메타데이터를 기술 하면 웹 검색에 유리하다
HTML에 대한 정보르 기록할 수 있다.
마침 요소가 필요 없는 단독요소
- description : HTML 파일의 간략한 설명 기술
- keywords : HTML 파일의 간략한 설명 기술
- author : HTML 파일 작성자
- copyright : 저작권 정보
- reply-to : 연락처 메일 입력
- date : HTML 파일의 작성일

<meta name="description" content="HTML5와 Javascript 학습콘텐츠"> 
<meta name="keywords" content="HTML5, CSS, JavaScript"> 
<meta name="author" content="Lee HaeBum"> 
<meta name=”copyright” content=”©2012 Lee HaeBum”> 
<meta name=”reply-to” content=gomtomi@imacca.com> 
<meta name=”date” content=”2012-05-30T12:35:20+09:00”>

메타 요소 중 문자 인코딩 설정만 다른 형식.
나머지는 동일

외부 파일 연결

웹 페이지는 HTML, CSS, JavaScript 3가지로 이루어짐
- HTML : 콘텐츠의 구조 정의
- CSS : 콘텐츠의 레이아웃과 표현 등 외향을 정의
- JavaScript : 코넨츠의 작동을 정의
- HTML, CSS, JavaScript를 HTML 페이지에 같이 넣을 수 있지만 다른 파일로 분리하는 것이 유지보수에 유리
외부 CSS 파일을 HTML 파일에 연결(href 사용)

<link rel="stylesheet" href="css/style.css">

외주 자바스크립트를 HTML 파일에 연결(src 사용)

<script src="js/script.js"></script>

Marking up text(텍스트 마크업)

This section will cover some of the essential HTML elements you'll use for marking up the text.

Headings(제목)

HTML contains 6 heading levels,

-

, although you'll commonly only use 3 to 4 at most:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO (SEO-검색 엔진 최적화). Try to create a meaningful sequence of headings on your pages, without skipping levels.

Paragraphs(단락)

요소는 텍스트 단락 일반 텐스트 컨텐츠를 표시 할 때 자주 사용

Lists

Marking up lists always consist of at least 2 emenents.

Unordered Lists - <ul>
ordered Lists-<ol>

Each item inside the lists is put inside an <il> (list item) element.

Links

Links are very important
<a> being the short form for "anchor"

"Mozilla Manifesto"라는 텍스트를 선택

아래와 같이 요소에 href 속성을 넣자.
```
<a href="">Mozilla Manifesto</a>
```

링크에 연결할 웹 주소로이 속성 값을 채워.

<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

https:// 꼭 적어

href - If you are having trouble remembering it, remember that it stands for hypertext reference.

What's in the head? Metadata in HTML

HTML head

the head's content is not displayed on the page. Instead, the head's job is to contain metadata about the document.

Metadata: theelement

<meta charset="utf-8">

utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language

Applying CSS and JavaScript to HTML

<link rel="stylesheet" href="my-css-file.css">

rel - 문서의 스타일 스트임을 나타냄
href - 스타일 시트 파일의 경로를 포함

<script src="my-js-file.js"></script>

자바스크립 불러오기

Setting the primary language of the document

<html lang="en-US">

Why do we need semantics?

Semantics are relied on everywhere around us

신호등 빨강뜨면 멈추라는 뜻

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

In this context the <h1> element is also a semantic element(의미론적요소), which gives the text it wraps around the role (or meaning) of "a top level heading(최상위 제목) on your page."

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

This is a <span>element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course).

Creating hyperlinks

Anatomy of a link (링크해부)

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

<a>로 감싸고 href속성을 포함시켜준다.

Adding supporting information with the title attribute

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
   title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepage</a>.
</p>

title; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of.

마우스 가져다 대면 정보 뜬다.

Document and website structure

Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.

Basic sections of a document(시멘틱 태그)

header - 상단의 큰줄로 페이지 내에서 이동시 동일하게 유지

navigation bar - 메뉴 버튼. 해더와 마친가지로 유지

main content - 페이지의 고유한 콘텐츠가 포함된 영역

sidebar - 광고, 링크, 인용문, 반복요소

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

header: <header>
navigation bar: <nav>
main content: <main>, with various content subsections represented by <article>, <section> and <dic> elements.
sidebar: <aside>; often placed inside <aside>.
footer: <footer>.

HTML layout elements in more detail

<main>
- 페이지의 내용.
- <body>안에 들어가서 페이지당 하나만 써야한다
<article>
- 의미 있는 관련 내용 블록
- encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
<section>
- <article>과 유사
- note that you can break s up into differents, or s up into differents, depending on the context.
<aside>
- contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
<header>
- represents a group of introductory content.
<nav>
- contains the main navigation functionality for the page
<footer>
- represents a group of end content for a page.

Nosemactic

div, span

'Web > HTML' 카테고리의 다른 글

[html] 비디오(mp4) 영상 태크 (0)	2021.12.19
[html] 이미지 태그 기초 (0)	2021.12.16
HTML 기초 알아보기 (0)	2021.12.07
HTML5 섹션 요소+ text 요소 (0)	2020.06.29
HTML basic (0)	2020.06.29

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

티스토리 뷰

Marking up text(텍스트 마크업)

HTML이란

HTML5

실용적 설계

표현과 내용의 완벽한 분리

플러그 인 없이 미디어 처리 및 동적 작동

최신 웹 기술 수용

HTML5 시작하기

Doctype 지정하기

HTML 작성 규칙

HTML의 헤드와 바디

HEAD 설정하기

타이틀 지정

문자 인코딩

메타데이터

외부 파일 연결

Marking up text(텍스트 마크업)

Headings(제목)

-

, although you'll commonly only use 3 to 4 at most:

Paragraphs(단락)

Lists

Links

What's in the head? Metadata in HTML

HTML head

Metadata: theelement

Applying CSS and JavaScript to HTML

Setting the primary language of the document

Why do we need semantics?

Creating hyperlinks

Anatomy of a link (링크해부)

Adding supporting information with the title attribute

Document and website structure

Basic sections of a document(시멘틱 태그)

header - 상단의 큰줄로 페이지 내에서 이동시 동일하게 유지

navigation bar - 메뉴 버튼. 해더와 마친가지로 유지

main content - 페이지의 고유한 콘텐츠가 포함된 영역

sidebar - 광고, 링크, 인용문, 반복요소

footer - 하단의 스크립. 연락처나, 저작권 고지. seo(검색엔진 최적화) 로 사용되기도 함

HTML layout elements in more detail

Nosemactic

'Web > HTML' 카테고리의 다른 글

티스토리툴바