TIL 23.09.19

황은하·2023년 9월 19일

TIL

목록 보기

84/146

📌Today I Learned

웹 - client

ex01

DOCTYPE

문서 유형
DTD라는 언어로 선언
선언문
이 문서를 읽는 브라우저에게 해당 문서가 어떤 문서다... 라고 알려주는 역할
<!DOCTYPE html> : 해당 문서가 HTML5로 작성된 문서

HTML 문서 구조

태그는 트리구조(계층구조)로 되어있다.(매우중요)
메모리에 로딩된 트리구조 > DOM

HTML 주석

단일/다중 라인 > Ctrl + Shift + /

`<html>`

문서 전체를 감싸고 있는 역할
루트 태그
스스로 하는 일은 없다. > 문서 컨테이너 역할

`<head>`

문서의 머릿말 역할
브라우저에게 전달할 내용을 작성
내부 정보

`<meta charset="UTF-8">`

브라우저에게 이 문서를 UTF-8로 읽으라는 뜻

`<body>`

문서의 본문 역할
사람에게 전달할 내용을 작성 > 출력할 내용을 작성
출력 정보

ex02_whitespace

공백 문자, Whitespace

엔터, 탭, 스페이스
페이지 소스에 있는 공백 문자들을 브라우저가 처리하는 규칙
소스상의 (종류와 상관없이) 1개 이상 연속된 공백 문자들을 > 단 1개의 공백 문자(스페이스)로 치환해서 화면에 출력한다.

공백문자 처리하는 방법

스페이스 표현

공백 1글자 > 엔티티 1개
&엔티티명;
 
출력할 때 공백 1개로 바꿔서 출력해라!!
non-break space

탭문자

불가능
웹 문서(브라우저)에는 탭의 개념이 없다.

개행문자

<br> 태그 사용
\r\n 역할
line break

ex03_basic

HTML 언어 구성 요소

태그(Tag), 엘리먼트(Element)
속성(Attribute)
텍스트(PCDATA)
엔티티(Entity)
주석(Comment)
선언문(Declaration)
외부요소
등등 …

1. 태그(Tag), 엘리먼트(Element)

예약어(명령어)를 <>로 묶어놓은 요소
출력될 웹페이지의 골격 형성
a. 레이아웃 형성
b. 요소를 배치
출력과 관계된 행동을 한다.

1.1. 태그 표현 방식

a. <태그명>내용물 영역</태그명>

쌍태그
<태그명>: 시작태그
</태그명>: 끝태그
영역을 가지는 태그

b. <태그명>, <태그명></태그명>, <태그명 />

단독태그, 빈태그(Empty Tag)
영역을 가지지 않는 태그

1.2. 태그 내용물 형식, Content Type

<태그명>내용물</태그명>

a. 자식 태그
- 또 다른 태그들이 내용물로 올 수 있다.
- 문자열은 올 수 있다.

b. PCDATA, Parsed Charactor Data > 문자열
- 문자열만 올 수 있다.
- 자식 태그는 올 수 없다.

c. Empty
- 아무것도 가지지 않는다.
- 단독태그, 빈태그

d. Mixed
- 혼합형
- 자식으로 태그와 문자열이 모두 올 수 있다
- a + b + c
- HTML 태그 대부분이 혼합형이다.

2. 속성(Attribute)

태그의 성질을 정의하는 요소
태그가 가지는 데이터의 한 종류
용도: 태그의 성질을 정의하는 데이터
표기법
a. <시작태그 속성명="값"></끝태그>
<시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그>
b. <단독태그 속성명="값">
c. <시작태그 속성명="값"></끝태그> : 사용O
<시작태그 속성명='값'></끝태그> : 사용O
<시작태그 속성명=값></끝태그> : 절대 사용 금지

3. 텍스트(PCDATA)

태그가 가지는 데이터의 한 종류
용도: 화면에 출력하는 데이터

4. 엔티티(Entity)

브라우저와 정해진 약속이 되어있는 표현 > 약속된 표현을 작성하면 브라우저가 화면에 출력하기 전에 약속된 표현으로 바꿔서 출력한다. > Built-in Entity
&엔티티명;
  > 공백 1개
< > less than <
> > greater then >
& > &
© > ©
&#문자코드;

주석(Comment)
선언문(Declaration)
외부요소
등등 …

ex04_head

`<head>`

브라우저가 보는 정보

`<head>` 자식 태그

<meta>

페이지에 대한 여러가지 정보를 기술

<title>

문서 제목
제목 표시줄(탭)
a. 문서의 제목으로 사용
b. 검색 엔진의 수집 대상 + 검색 결과의 제목으로 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="홍길동" />
    <!-- 작성한 개발자 -->
    
    <meta name="generator" content="Eclipse 2022.03" />
    <!-- 개발 도구 -->

    <meta name="keywords" content="HTML,head태그,수업예제" />
    <!-- 키워드 -->
    <!-- 검색때문에 많이 작성했음 -->
    
    <meta name="description" content="HTML 수업예제입니다." />
    <!-- 설명 -->
    <!-- 검색때문에 많이 작성했음 -->

    <!-- <meta http-equiv="refresh" content="10;url=http://naver.com"> -->

    <title>수업 예제</title>
  </head>
  <body>
  </body>
</html>

검색 사이트 종류

디렉토리 서비스
- http://yahoo.com
키워드 검색 서비스
- http://altavista.com, 심마니, 엠파스
- http://google.com
- 검색봇(Bot) > 프로그램 > 웹서핑 > 정보 수집 + URL > DB 저장
- 블로그 > 하루 100명 접속 > 진짜 사람 10명 미만...

ex05_body

`<body>` 태그

화면에 출력되는 모든 내용을 가지는 컨테이너
쌍태그, 혼합형

`<body>` 속성

bgcolor
- background color
- 문서 배경색
background
- background image
- 문서 배경 이미지

HTML 색상 표현 방법

색상명
- Named Color
- Well-known Color
- 미리 약속된 몇 가지 색상명을 사용(140가지)
- http://w3schools.com
RGB
- Red + Green + Blue
- 각 색상의 단계 > 256단계(0~255) > 00 ~ FF
- 256 X 256 X 256 = 16,777,216 개
- 000000(검정색) ~ FFFFFF(흰색)
- #000000
- #FF33AA > #F3A (전부 다 두번 씩 반복될 때만 사용 가능)
- #000 ~ #FFF

황은하

차근차근 하나씩

이전 포스트

TIL 23.09.18

다음 포스트

TIL 23.09.19

TIL

📌Today I Learned

웹 - client

ex01

DOCTYPE

HTML 문서 구조

HTML 주석

`<html>`

`<head>`

`<meta charset="UTF-8">`

`<body>`

ex02_whitespace

공백 문자, Whitespace

공백문자 처리하는 방법

ex03_basic

HTML 언어 구성 요소

1. 태그(Tag), 엘리먼트(Element)

1.1. 태그 표현 방식

1.2. 태그 내용물 형식, Content Type

2. 속성(Attribute)

3. 텍스트(PCDATA)

4. 엔티티(Entity)

ex04_head

`<head>`

`<head>` 자식 태그

검색 사이트 종류

ex05_body

`<body>` 태그

`<body>` 속성

HTML 색상 표현 방법

TIL 23.09.18

TIL 23.09.20

0개의 댓글

TIL 23.09.19

TIL

📌Today I Learned

웹 - client

ex01

DOCTYPE

HTML 문서 구조

HTML 주석

<html>

<head>

<meta charset="UTF-8">

<body>

ex02_whitespace

공백 문자, Whitespace

공백문자 처리하는 방법

ex03_basic

HTML 언어 구성 요소

1. 태그(Tag), 엘리먼트(Element)

1.1. 태그 표현 방식

1.2. 태그 내용물 형식, Content Type

2. 속성(Attribute)

3. 텍스트(PCDATA)

4. 엔티티(Entity)

ex04_head

<head>

<head> 자식 태그

검색 사이트 종류

ex05_body

<body> 태그

<body> 속성

HTML 색상 표현 방법

TIL 23.09.18

TIL 23.09.20

0개의 댓글

`<html>`

`<head>`

`<meta charset="UTF-8">`

`<body>`

`<head>`

`<head>` 자식 태그

`<body>` 태그

`<body>` 속성