오늘은 여러 태그에 대해서 작성하겠다.
주의할 점
- 태그 이름은 대소문자를 구별하지 않는다. <head>와 <HEAD>는 같은 의미이다.
- 하나의 요소 안에 다른 요소들이 포함될 수 있다. 예를 들어 <body>태그 안에 <p> 태그가 있다는 의미이다
- 뭐 당연한 소리니까
- 시작 태그와 종료 태그 사이의 연속된 공백은 하나의 공백으로 취급한다.
속성
HTML 요소는 속성을 가질 수 있다. 속성은 요소에 대해 추가적인 정보를 제공한다.
속성의 종류
- class : 요소의 클래스 이름
- id : 요소의 아이디
- style : 요소에 대한 인라인 CSS 스타일
- title : 요소에 대한 추가 정보, 툴팁으로 표시된다.
텍스트 표시
텍스트는 특별한 태그없이도 <body> 텍스트 </body> 안에서 표시할 수 있다.
하지만 단락을 생성하지 않으면 모든 텍스트가 연결되어서 하나의 긴 줄로 표시된다.
태그 종류
<p>태그
<p>태그는 paragraphs란 하나의 짧은 이야기 토막을 의미한다. p태그 사용 시 문단의 전후에 빈 줄이 추가된다.
<br>태그 (줄바꿈)
줄 바꿈 태그이다. <br>태그를 사용하여 줄바꿈을 할 수 있다.
<br>이용 및 텍스트 입력 시 주의할 점
HTML 코드에서 엔터키를 눌러서 줄을 바꾸었다고 해서 웹 브라우저에서 줄이 바뀌는 것이 아니다. 따라서 위의 br태그를 이용해야 한다.
<pre> 태그
<pre>태그를 이용하면 개발자가 입력한 그대로 화면에 표시된다.
하지만 가끔 깨지는 경우가 있기 때문에 사용하지 않는 것을 추천한다
<h>태그
h는 headline을 의미한다. h태그는 h1 h2 h3 h4 h5 h6 총 6개가 있으며 번호가 낮아질수록 텍스트의 크기가 작아진다.
텍스트 서식 태그
우리는 웹 개발을 하면서 글자에 굵기를 높이거나 다양한 스타일 적 요소를 바꾸고 싶은 경우가 있다. 보통은 CSS로 스타일을 지정하지만
태그를 이용하여 지정할 수도 있다.
<hr> 태그 (수평선 그리기)
특수문자 나타내기
태그 안에서 특수문자를 보이게 하기 위해서 필요하다.
<ol> 태그
ordered list로 번호 있는 리스트를 표현하기 위해 사용한다.
<ul> 태그
unordered list로 번호 없는 리스트를 표현하기 위해 사용한다.
리스트 태그 사용 방법
<ol>, <ul>태그 모두 <li>태그와 함께 사용해야 한다.
<img> 태그 (이미지 넣기)
여기서 주의할 점
블록 요소 vs 인라인 요소
- 블록 요소 : 한 줄을 다 차지한다.
- 인라인 요소 : 한 줄에 차례대로 표시된다.
- 이미지는 인라인 요소이다!
alt 속성
이미지가 불러오지 않거나 서버와의 통신이 원활하지 않을 때 대체 텍스트를 지정하는 것이다.
<a>태그 (링크)
<a> 태그는 anchor의 약자로 하이퍼링크 또는 다른 문서로 점프할 수 있다.
이해하기 쉽게 클릭 시 다른 페이지 및 섹션으로 넘어가는 것을 의미한다
href 속성
여러 방법으로 경로를 지정할 수 있다.
id 경로 지정
해당하는 id의 화면 부분으로 이동한다.
email 경로지정
파일 다운로드
target 속성
링크 클릭 시 새로운 페이지가 어디에 열리는지 지정할 수 있다.
<video> 태그
비디오를 삽입할 때 사용하는 태그이다.
지원하는 비디오 파일 형식
- mp4
- ogg
- webm
참고로 위와 같이 코드를 작성 시 두 개의 비디오 type중 재생이 되는 걸로 재생한다.
이는 호환성을 높여 에러 발생 상황을 방지할 수 있다.
<audio>태그
오디오를 삽입할 때 사용하는 태그이다.
지원하는 오디오 파일 형식
- mp3
- wav
- ogg
비디오와 동일하게 위와 같이 코드를 작성 시 두 개의 오디오 type중 재생이 되는 걸로 재생한다.
똑같이 호환성을 높여 에러 발생 상황을 방지할 수 있다.
이렇게 태그 설명이 끝났다. 참고로 모든 태그에 대해서 설명하지는 않았다.
실제로 사용하지 않는 태그들도 있기 때문이다.
쉬운 내용이지만 이 게시글이 당신의 웹 개발에 도움이 되었으면 좋겠다.😀
'HTML' 카테고리의 다른 글
| [HTML] Input에 대해서 (1) | 2024.04.08 |
|---|---|
| [HTML] 시맨틱 태그 (1) | 2024.04.08 |
| [HTML]의 코드에 대한 기초 지식 (1) | 2024.04.06 |
| [HTML]을 이용하여 Web을 개발하기 위한 세팅! (0) | 2024.04.06 |
| [HTML] 기초사항 (0) | 2024.04.06 |
