[HTML][국비교육] Day 34

Ga02·2023년 2월 14일

eclipse html

국비교육

목록 보기

32/82

🔍 HTML, HyperText Markup Language

➰ HyperText

하이퍼링크가 적용된 문서

다른 문서들과 하이퍼링크로 연결된 문서(= 웹문서)

➰ Markup Language, 마크업 언어

태그(tag) 요소를 이용하여 표현되는 언어 👉🏻 태그를 이용해 데이터의 구조를 표현

웹 페이지의 골격(정적인 구조)을 표현하는 언어 👉🏻 웹 UI 레이아웃(Layout)을 결정

🔍 HTML 태그, tag

HTML 문서에서 사용하는 문법 요소

<여는태그>와 </닫는태그> 두 개를 한 쌍으로 구성됨
<div> </div>, <butont> </button>, <a> </a>
HTML문서의 기본 태그 : <html>, <head>, <body>
👉🏻 기본태그 3가지는 HTML문서에 반드시 포함되어있어야 함
태그들은 계층적(hirerarchy)으로 작성됨
✔ 들여쓰기로 작성하면 구분 및 보기 좋지만 너무 길어지면 불편할 수 있음 ➡ 바디 안쪽에 작성하는 애들 들여쓰기
부모태그 - 자식태그 구조로 이루어짐
- 자식태그 : 여는태그~닫는태그 사이에 다른 태그가 들어있으면 자식태그라고 함

➰ 기본 HTML 태그들의 형식

<html>
  	<head>
    </head>
  
    <body>
    </body>
</html>

<html>태그 : HTML문서의 최상위 부모태그 ( Root Tag )
- HTML문서의 모든 태그들을 감싸고 있음
- <head>, <body> 태그들을 자식태그로 가지고 있음
  ❗ Markup Language는 문서에 하나의 최상위 태그만 존재
<head>태그 : HTML문서의 정보를 입력해놓는 태그
- 해당 문서에 대한 자체 정보 또는 설정값을 넣어둠 👉🏻 화면에 보이지 않는 태그요소들이 많이 들어감
<body>태그 : 화면에 보여질 내용을 작성하는 태그

🔍 DTD, Document Type Definition

DOCTYPE, 문서 유형 정의

브라우저가 마크업 문서(HTML 등)를 해석할 때 어떤 유형의 문법으로 작성되었는지 알 수 있도록 작성된 태그 👉🏻 브라우저는 마크업 문서를 해석하고 화면으로 보여주는 역할
브라우저가 DTD를 먼저 확인하고 유형에 맞게 문서를 검사
유효성 검사를 할 수 있도록 함(적합한 문법인지 검사) ➡ 검사에 실패하면 경고창
DTD 버전 종류
- HTML 4.01 / HYML 5
- XHTML 1.0 / XHTML 1.1
- XML

🔍 XML, xEtensible Markup Language

확장 가능한 태그 사용 문서

표준 태그가 정해져있지 않음 👉🏻 문서를 작성하는 사람이 임의로 태그를 작성할 수 있는 형태의 문서
데이터를 표현할 때 사용 👉🏻 통신할 때 많이 활용
특정 프로그램, 라이브러리의 설정값을 저장하는 용도로 사용됨 / 불러올 값(변수)을 저장하는 용도
특정 소프트웨어에 맞는 DTD를 적용하면 해당 DTD문법에 맞는 태그들을 이용하여 작성하도록 적용할 수 있음

ex. HTML은 <!DOCTYPE html>
브라우저는 HTML전용이라 없어도 잘 읽음

ex. 사람에 대한 데이터를 작성하고 싶은 경우
<person>
	<name>
	Alice
	</name>
  
	<age>
    33
	</age>
</person>

ex. 3명의 사람에 대한 데이터
<list>
	<count>3</count>
	<person>
    
    </person>
    <person>
    
    </person>
    <person>
    
    </person>
</list>

🔍 태그의 속성, Attribute

태그를 보조하거나 추가 설정을 적용할 때 사용

속성명, 속성값으로 구성됨
여는 태그에 띄어쓰기로 구분하여 작성

➰ 속성 작성법

속성값에는 "큰 따옴표, '작은 따옴표 둘 다 사용할 수 있음
속성명 = "속성값" / 속성명 = '속성값'

<p style="color : red;"> 사과 </p>

속성명 ➡ style			(CSS를 적용하는 속성)
속성값 ➡ color : red	(글자색상 빨강색)

🔍 태그의 기본 레이아웃 속성

태그들의 기본 모양(보여질 모습)을 결정하는 속성
CSS문법을 이용해서 변경 가능

➰ block 요소, 블록요소

화면의 일부 영역을 차지하면서 구역을 설정할 때 사용하는 태그 요소들

화면에서 공간을 만들어내는 요소 👉🏻 전체적인 레이아웃(구역)을 구성할 때 사용
한 줄을 전부 차지하려는 특성을 가지고 있음 👉🏻 화면 크기가 달라져도 한 줄 전체를 차지하고 다른 태그에 자리를 내주지 않음

<div>, <h1>~<h6>, <p>, <ul>, <ol>, ...

➰ inline 요소, 인라인 요소

내용물(컨텐츠)의 영역을 감싸는 태그 요소들

블록(block)요소의 내부에 포함하여 작성 👉🏻 자식 태그로 사용됨
태그없이 단순 텍스트를 작성해도 inline 요소처럼 취급

<span>, <a>, <img>, ...
  
<p style="color:red;" onclick='alert("HI")'>안녕하세요</p> 👉🏻  인라인으로 취급됨
								  👇🏻
<p style="color:red;" onclick='alert("HI")'><span>안녕하세요</sapn></p>

🔍 글자 관련 태그

➰ `<h1>~<h6>`, `<hn>`, `<hx>`

Heading 태그 👉🏻 제목을 표현하는 태그

h1이 큰 텍스트, h6으로 갈수록 점점 작아짐
고정된 크기가 아니라 기본텍스트에 대한 배율로 크기가 달라짐
h6은 2em으로 기본 텍스트의 2배, h4는 기본텍스트와 크기가 같음

➰ `<p>`

paragraph 태그, 문단을 표현

p 태그를 연속으로 사용하면 문단 사이의 간격을 넓혀서 표현 👉🏻 상하여백(margin)을 가지고 있음
닫는 태그 없이 다음 p태그가 나오면 안되지만, p는 자식태그를 가지지 못하므로 브라우저가 자체적으로 </p>를 넣어줌 but, 잘 작성된 코드는 아님
공백문자(띄어쓰기, 탭, 개행)이 개별적으로 표현되지 않음 👉🏻 띄어쓰기 한 개로 대체되어 표현됨
- 개행 : <br>태그 이용
- 띄어쓰기 :   키워드 이용
- 수평탭 : 없음
  - nbsp, No Breaking SPace : 개행없이 띄어쓰기(한 칸)
  - emsp, EleMent SPace : em크기(글자크기)만틈 띄어쓰기 한 칸
    ➡ element라는 글자크기를 나타내는 단위
  - ensp : emsp의 반절만큼 띄어쓰기 한 칸
    👉🏻 이들로 글자사이 간격을 조정하는 것이 아니라 div로 margin간격을 조정하는 것이 좋음 / 문단 시작 들여쓰기 정도에만 쓰도록

➰ `<pre>`

PREformatted text

입력한 문단(텍스트)의 서식형태를 그대로 브라우저에 표현하는 태그
공백문자를 입력한대로 표현
기본스타일이 없어서 직접 스타일을 일일이 지정해야 함
프로그래밍 코드와 같이 공백문자 서식이 유지되어야 할 때 사용하면 좋음

➰ blockqoute

BLOCK QUOTEd

인용된 문구에 적용하는 태그
작성된 텍스트가 들여쓰기된 상태로 표현됨

🔍 목록 태그

➰ `<ul>`

Unordered List

순서가 없이 표현되는 목록 👉🏻 도형으로 항목을 구분
스스로를 자기자식으로 가질 수 없음
👉🏻 필요한 경우 li로 감싸고 그 안에 쓰면 됨
disc, circle, ...

➰ `<ol>`

Ordered List

순서를 가지고 표현되는 목록 👉🏻 숫자로 항목을 구분
스스로를 자기자식으로 가질 수 없음
👉🏻 필요한 경우 li로 감싸고 그 안에 쓰면 됨
number, demical, ...

➰ `<li>`

List Item, 리스트의 항목을 표현

목록태그 ol, ul은 중첩하여 사용할 수 있음
중첩된 목록은 들여쓰기되어 표현됨

🔍 정의 목록 태그

용어에 대한 설명(정의)목록을 표현하는 태그

<dl> : Description List, 설명(정의)목록
<dt> : Desscription Terms, 정의 용어의 이름
<dd> : Description Descripe, 정의 용어의 설명
dl내에서 br은 사용하지 않는 것이 좋음 👉🏻 CSS로 간격 넣어줄 것

🔍 하이퍼링크 태그

➰ `<a>`

Anchor 태그, 닻

클릭시 다른 페이지로 이동하는 하이퍼링크를 적용하는 태그
글자나 문단, 이미지 또는 다른 태그들을 이용하여 적용할 수 있음
a태그는 inline 태그 👉🏻 글자로 취급됨

➰ href 속성

a태그가 연결될 링크를 URL로 지정

아무 링크를 적지 않으면 자기 자신을 참조
절대경로 URL, Absolute Path URL
도메인 주소를 포함한 URL로, 다른 사이트로 하이퍼링크를 적용할 대 사용 👉🏻 다른 도메인 페이지로 링크를 적용
상대경로 URL, Relative Path URL
도메인 주소를 생략하고 자원(파일)의 경로는 적는 URL 👉🏻 같은 도메인 페이지로 링크를 적용
사이트의 기준점이 자기자신이 됨 👉🏻 메뉴를 구성할 때 사용할 수 있음
#id
다른 태그에 속성으로 id를 부여하고 href에 #id를 적용하여 같은 페이지 내에서 다른 태그로 링크를 적용

경로지정문자
/ : 디렉토리(폴더)를 나타내는 기호
상대경로를 표현할 때 제일 앞 글자로 사용되면 루트 디렉토리(Root Diretory)를 표현함 👉🏻 도메인의 최상위 디렉토리

. : 현재 디렉토리를 표현하는 기로
현재 페이지(파일)이 보관된 폴더로, 지정문자 없이 곧바로 파일이름으로 시작해도 현재 디렉토리로 적용됨

.. : 부모디렉토리를 나타내는 기호
현재 페이지(파일)의 상위폴더를 나타냄

➰ target 속성

링크된 페이지가 열리는 방식(위치)을 지정

_blank : 새탭, 새 윈도우
_self : 현재 탭 👉🏻 default값

각 태그들 태그 레퍼런스에서 정의 찾아보기~

메타데이터
데이터를 표현하기 위해 만들어진 구성물
데이터가 가진 특성을 설명, 자기 자신에 대한 설정, 설명
메타태그는 빈 태그
닫을 필요가 없음
보통 속성이 중요한 역할을 함

브라우저
HTML 해석하고 화면으로 보여주기

작성된 HTML은 하드에, 화면에 띄워진 코드는 메모리에
-> 화면에 띄어진 코드를 건들여도 원본이 상하지 않는 이유

웹사이트 디자인 구글링해서 참고하기

ctrl + shift + f 자동정렬 -> 안쓰도록 -> 틀어질 수 있음 / 자바랑은 다름
사용할거면 ctrl + i 정도만! 아님 부분에서만 사용

주황색으로 칠해진 영역이 margin > CSS 용어 / CSS 문법으로 조절 가능
약간 영역싸움 느낌

같은 문단 내 br로 개행시 마진 없음

💡

HTML 주석 단축키
현재 커서 위치 or 선택한 영역 주석 : ctrl + shift + /
한 줄 주석 토글 : ctrl + shift + c

주석은 브라우저에서 개발자모드로 보면 다 볼 수 있으므로 핵심로직이나 중요한거 작성해두지 않도록!

Ga02

IT꿈나무 댓츠미

이전 포스트

[HTML][국비교육] Day 33

다음 포스트

[HTML][국비교육] Day 34

국비교육

🔍 HTML, HyperText Markup Language

➰ HyperText

➰ Markup Language, 마크업 언어

🔍 HTML 태그, tag

➰ 기본 HTML 태그들의 형식

🔍 DTD, Document Type Definition

🔍 XML, xEtensible Markup Language

🔍 태그의 속성, Attribute

➰ 속성 작성법

🔍 태그의 기본 레이아웃 속성

➰ block 요소, 블록요소

➰ inline 요소, 인라인 요소

🔍 글자 관련 태그

➰ `<h1>~<h6>`, `<hn>`, `<hx>`

➰ `<p>`

➰ `<pre>`

➰ blockqoute

🔍 목록 태그

➰ `<ul>`

➰ `<ol>`

➰ `<li>`

🔍 정의 목록 태그

🔍 하이퍼링크 태그

➰ `<a>`

➰ href 속성

➰ target 속성

💡

[HTML][국비교육] Day 33

[HTML][국비교육] Day 35

0개의 댓글

[HTML][국비교육] Day 34

국비교육

🔍 HTML, HyperText Markup Language

➰ HyperText

➰ Markup Language, 마크업 언어

🔍 HTML 태그, tag

➰ 기본 HTML 태그들의 형식

🔍 DTD, Document Type Definition

🔍 XML, xEtensible Markup Language

🔍 태그의 속성, Attribute

➰ 속성 작성법

🔍 태그의 기본 레이아웃 속성

➰ block 요소, 블록요소

➰ inline 요소, 인라인 요소

🔍 글자 관련 태그

➰ <h1>~<h6>, <hn>, <hx>

➰ <p>

➰ <pre>

➰ blockqoute

🔍 목록 태그

➰ <ul>

➰ <ol>

➰ <li>

🔍 정의 목록 태그

🔍 하이퍼링크 태그

➰ <a>

➰ href 속성

➰ target 속성

💡

[HTML][국비교육] Day 33

[HTML][국비교육] Day 35

0개의 댓글

➰ `<h1>~<h6>`, `<hn>`, `<hx>`

➰ `<p>`

➰ `<pre>`

➰ `<ul>`

➰ `<ol>`

➰ `<li>`

➰ `<a>`