DAY-31. HTML 기초와 태그

🎨 2022-04-15

HTML 기초

❗ 수업을 듣고, 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

HTML

HyperText Markup Language의 약자 웹 페이지를 구성하는 언어

Markup Language : 구조화된 언어 → 각각의 요소들을 태그로 구조화 시킨 언어 ⇒ A라는 태그를 보면 이런 의미를 가지고 있구나 해석할 수 있게 해줌

HTTP HyperText Transfer Protocol의 약자 웹에서 이루어지는 모든 데이터 교환(클라이언트 - 서버)은 HTTP 통신규약을 통해 이루어짐

🔔 a 태그

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

• target=”_blank”를 넣어서 새로운 페이지를 열어 연결된 링크로 이동 기본값은 현재 페이지에서 이동
• a태그는 inline속성이기 때문에 a태그를 연달아 써도 한줄 안에 출력

🔔 href 태그

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔 input 태그

• 사용자의 입력값을 받기 위해 사용하는 요소

기본

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

체크 사용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

여러가지 사용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔 select 태그

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

텍스트 관련 태그

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔 list 태그

1. : unordered list -> 순서가 없는 리스트
2. : ordered list -> 순서가 있는 리스트

ul 사용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

ol 사용

1.

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

2.

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔 table 태그

• 페이지의 레이아웃을 잡는 용도

Semantic tag 적용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

colspan과 rowspan 적용

1. 예제

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

1. 실습

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.