HTML; HyperText Markup Language은 웹 페이지의 가장 기초적인 틀 만든다.
HTML은 tag들의 집합이다. <html> <head> ...
(출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=pjh445&logNo=220071333957)
위 사진은 HTML Tree 구조를 보여준다.
여기서, <head>와 <body> 같은 이름에 의미를 붙여 부르는 태그들을 시맨틱 태그(semantic tag)라고 부른다.
기본적으로 태그는 여는 태그와 닫는 태그로 구성된다.
그러나, Self-Closing Tag처럼 닫는 태그를 따로 써주지 않는 태그도 존재한다.
<img src="example.jpg"> </img>
<img src="example.jpg" />
XHTML에서는 이렇게 닫는 룰을 강제화하였지만, HTML5에서는 굳이 닫아주지 않아도 된다.
<img src="example.jpg">
수많은 Tag들이 존재하지만, 자주 쓰이는 태그들 10개만 추려보자면
| <html> ... </html> | The root element |
| <head> ... </head> | The document head |
| <title> ... </title> | The page title |
| <body> ... </body> | The page's content |
| <h1> ... </h1> | A section heading |
| <p> ... </p> | A paragraph |
| <a> ... </a> | A link |
| <img> | An image |
| <div> ... </div> | A block-level container for content |
| <span> ... </span> | An inline container for content |
다음으로 추려볼 수 있을 것 같다.
각 태그들에 대한 자세한 설명을 확인하려면 https://www.elated.com/first-10-html-tags/ 을 참고해보자.
<div> vs <span>
- div 태그는 block-level element로, 한 줄을 차지한다.
- span 태그는 inline element로, 컨텐츠의 크기만큼 공간을 차지한다.
이미지 삽입과 링크 삽입
- 이미지 삽입은 <img> 태그를 이용한다.
<img src="apple.jpg">
- 링크 삽입은 <a> 태그와 href 속성을 이용해주면 된다.
<a href="http://naver.com" target="_blank">네이버</a>
target 속성은 새 창으로 열게끔하는 속성이다.
<ul> vs <ol>
- unordered list의 약자로 숫자의 순서가 없는 리스트로 입력할 때 사용한다. 숫자 대신 bullet point가 나오게 된다.
- ordered list의 약자로 숫자의 순서가 있는 리스트 표현에 사용한다.
텍스트박스 삽입과 체크박스 삽입
- <input> 태그를 사용한다.
<input type="text">
<input type="checkbox">
체크박스 vs 라디오박스
<input type="checkbox">
<input type="radio">
- 체크박스는 다중으로 선택이 가능하게 박스가 설정된다.
- 라디오박스는 둘 중 하나, 다수 중 하나, 이렇게 중복 선택이 불가하다. (name 속성을 이용해 하나의 그룹으로 지정해준다면)
이외에도, 글을 쓰고 줄바꿈이 가능한 <textarea> 태그와 <button> 태그가 존재한다.
'Develop' 카테고리의 다른 글
| 와이어프레임과 목업 (0) | 2022.08.24 |
|---|---|
| 페이지 레이아웃 (0) | 2022.08.24 |
| 웹 클라이언트와 웹 서버 (0) | 2022.08.22 |
| 컴퓨터와 프로그래밍 (0) | 2022.08.22 |
| Verification 과 Validation (0) | 2022.08.18 |
