일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- React Native
- 코딩독학
- 타입스크립트
- Vue3
- TypeScript
- 코딩공부
- 프론트엔드
- JavaScript
- 리덕스
- 자바스크립트
- 코린이
- redux
- scss
- 비동기
- html기초
- 참조자료형
- http
- 사용하는 이유
- react-router
- SasS
- 리액트 네이티브
- react
- 코딩기초
- git
- 프론트엔드 개발
- 리액트
- async
- CSS
- 코딩초보
- 깃
- Today
- Total
맨 땅에 프론트엔드 개발자 되기
코딩독학) HTML 태그의 종류와 역할 본문
HTML 태그는 너무 많아서 일일이 다 열거하고 설명하긴 힘들다. 그 중에서도 자주 쓰이는 태그만 기록해놓고 공부할 예정이다.
텍스트 태그
<!-- --> : 주석 태그로 웹 브라우저에서 명령을 처리하도록 인식되지 않고 작성자 입장에서 어떤 메모를 기록해둘 때 사용한다. 웹 페이지를 표시할 때는 나타나지 않는다.
<p> : paragraph의 약자로 문단을 구분할 때 사용한다.
<h1>~<h6> : 헤드라인을 표시하는 태그로 제목을 강조하기 위해 진하고 크게 만들어준다. 1이 크고 6으로 갈 수록 글씨 크기가 작아진다. h태그는 영역태그이기도 해서 가로줄 전체를 사용한다.
<hr> : 구분선을 넣어주는 태그, 단일 태그
* HTML 문서에서 스페이스는 연달아 사용해도 1번만 인식되고, 엔터는 아예 인식되지 않으므로 보여지는 화면에서 스페이스와 엔터를 넣고 싶으면 다음과 같은 태그와 문자조합을 사용한다.
: space 역할하는 문자 조합
<br> : 엔터 역할을 하는 태그, 단일 태그
<strong> : 글자를 진하게 표시하는 태그
<mark> : 글자에 노란색 하이라이트를 하는 태그
예제 연습
리스트 태그
<li> : 리스트를 만들어주는 태그
<ol> : ordered list의 약자로 순서가 있는 리스트를 만들어주는 태그
<ul> : unordered list의 약자로 순서가 없는 리스트를 만들어주는 태그
예제 연습
이미지 태그와 링크 태그
<img> : 이미지를 삽입해주는 태그. src라는 속성을 넣어 불러올 이미지의 주소를 적어준다.
img 태그에는 alt 속성과 width 속성 등이 있는데 아래와 같이 적어준다.
<img alt="이미지가 제대로 나오지 않을 경우 표시할 문구", width="브라우저 상의 표시하고 싶은 이미지의 넓이">
<a> : 다른 문서로 이동시켜주는 링크 태그. href라는 속성을 넣어 이동시킬 다른 문서의 주소를 적어준다.
a 태그에는 target 속성이 있는데 아래와 같이 적어준다.
<a target="본 페이지에서 열거면 _self, 새 페이지에서 열거면 _blank">
예제 연습
표 태그
<table> : 표를 만드는 태그.
<thead> : 표의 헤드 부분.
<tbody> : 표의 바디 부분.
<tfoot> : 표의 바닥 부분.
* 표의 헤드, 바디, 풋을 잡는 이유는 이렇게 하지 않아도 레이아웃 상의 영향은 없으나 CSS를 넣기 편리하게 만들기 위해서 구분한다.
<tr> : 표의 행을 만드는 태그.
<th> : 표의 열을 만들며 제목을 넣는 태그. 진하게 표시된다.
<td> : 표의 내용 부분.
예제 연습
출처
https://www.w3schools.com/tags/default.asp
'코딩 공부 일지 > HTML5' 카테고리의 다른 글
HTML 시맨틱 태그를 사용하는 이유 (0) | 2022.02.14 |
---|---|
코딩독학) HTML 태그 ID와 CLASS (0) | 2021.09.19 |
코딩독학) HTML 태그의 종류와 역할3 Form & Input (0) | 2021.09.19 |
코딩독학) HTML 태그의 종류와 역할2 영역 태그 (0) | 2021.09.19 |
코딩독학) HTML이란? HTML 문서의 기본 레이아웃 (0) | 2021.09.17 |