[2024-2 웹기초 스터디 #1주차] 김민재 - HTML

1주차 - HTML

**HTML** (HyperText Markup Language)

---

HTML이란?

- HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
- Markup: (콘텐츠를) 표시하다
- Language: 언어

⇒ 하이퍼 텍스트와 콘텐츠를 표시해주는 언어

쉽게 말해, 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다

문법 및 태그

---

HTML 기초 문법

**태그란?**

HTML 코드에서 정보(콘텐츠)를 정의하는 형식

- 시작과 끝
- <>과 </> 기호를 사용해 시작과 끝을 표시
- 태그명은 동일해야 어떤 콘텐츠인지 명확하게 표시 가능
- 단일 태그
- <> 또는 </> 를 사용해 표시
- ex) 공백
- 속성
- 태그의 부가적인 기능을 정의하는 것으로 선택사항임
- ex) Color
- <태그명 속성명 = “속성값”> 내용 </태그명>
- 주석
- <!— 내용 —>

---

HTML 문서 구조

```jsx
**일반적으로 다음과 같은 기본 구조를 가짐**

최신 표준 문법으로 작성되었다는 의미

# 실제 문서가 시작되고 끝나는 것을 나타냄 # html 문서에 대한 설명 태그 실제 웹페이지에 표시할 내용

\`\`\`

---

텍스트 태그

- 문단
- p 태그는 문단의 요소를 나타내는 텍스트 태그
-

,

형태
- 제목
- h 태그는 제목 요소를 나타내는 태그
-

,

- 수평선
-

---

- 특징
- html은 enter를 무시, space 공백도 한번만 가능

→ br태그 </br> 을 이용해 줄바꿈, 두번이상의 공백은 &nbsp; 사용  

---

태그의 구분

볼록 레벨 요소를 만드는 태그 vs 인라인 요소를 만드는 태그

**블록 레벨 요소**: 자기가 속한 영역의 너비를 모두 차지해 블록 형성

**인라인 요소**: 자기에게 필요한 공간만 차지

---

이미지 태그

- img 태그는 이미지를 표시할 때 사용하는 태그이며 단일 태그임
-
- src 속성: 이미지의 url
- alt 속성: 이미지 로딩이나 실패한 경우 대체 택스트 역할을 함
- 추가로 width와 height 속성을 사용해 크기 조절 가능

---

컨테이너 태그

- 콘텐츠나 레이아웃에 아무런 영향을 주지 않고, 단지 다른 요소 여럿을 묶어 관리하게 편하게 만드는 태그
-

: 블록 레벨 컨테이너
- : 인라인 컨테이너

---

전역 속성

- 모든 HTML태그에서 공통으로 사용할 수 있는 속성
- id: 요소에 고유한 이름을 부여하는 식별자 역할 속성 (태그 당 하나씩)
- class: 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성 (다중 지정 및 중복 가능)
- style: 요소에 적용할 CSS 스타일을 선언하는 속성
- title: 요소의 추가 정보를 제공하는 텍스트 속성

---

링크 만들기

- 링크: 현재 문서에서 다른 문서로 이동할 수 있는 수단이다.
- 링크는 anchor
- a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호 등 다른 url로 연결할 수 있는 링크를 만든다
- : 인라인 요소이다.
- traget 속성을 이용해 현재탭 Or 새로운 탭에서 열지 결정할 수 있다.

---

목록 표시

- 목록은 연관있는 항목들을 나열한 것 (블록 레벨 요소)
- 순서 없는 목록 :

1. 순서 있는 목록 :

-

태그는 항목 하나 하나를 표현할 때 사용하는 태그

---

입력 요소 만들기

- input 태그: 사용자로부터 값을 입력 받을 수 있는 대화형 컨트롤
- 인라인 요소이며, 단일 태그이다
-
- type 속성
- type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다
- 기본값은 text이며, 20여가지를 사용할 수 있다.
- name 식별자를 추가할 수 있다.
- 또한 다른 속성들을 추가해 다양하게 사용 가능 하다 (길이 제한, 숫자 제한, 메세지 안내 등)

---

Select & Textarea

- Select
- 다수의 옵션을 포함한 선택 메뉴이다
- option 태그를 이용해 포함되는 옵션들 표시
- input과 마찬가지로 name 지정, option에는 value 지정 가능

- textarea
- 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소
- textarea 동일하게 name 속성 사용 가능
-

---

폼

💡

**폼이란?**

사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그

- 서버와 클라이언트
- 클라이언트가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다

- 폼 태그
- 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출할 수 있다
-

- 폼의 속성
- action: 입력값을 전송할 서버의 url
- method: 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET or POST)
- name과 value의 속성이 중요

---

meta 태그

- HTML 문서에 대한 메타데이터를 정의한다.
- 메타데이터는 데이터의 데이터, 즉 ‘정보’를 의미한다
- 웹페이지에 대한 정보를 제공 하므로 페이지를 검색할 때 참고, 검색 결과에도 반영할 수 있다
- 유형 & 속성
- charset: 문자 세팅할 때 사용
- http-equiv: 콘텐츠 속성 정보에 대한 http헤더
- name: 문서 정보
- content: 메타데이터 내용

---

뷰포트

- 현재 화면에 보여지고 있는 영역을 의미 (PC와 모바일의 크기가 다르게 보임)
- 뷰포트 설정을 통해 다른 기기에서 일어나는 배율 조정 현상에 대응 할 수 있다

---

HTML → CSS