Easy ways

자주쓰는 HTML 태그 종류 본문

프론트엔드/Html Css

자주쓰는 HTML 태그 종류

softColors 2022. 9. 22. 19:09
반응형

 

오늘은 HTML 태그 종류에 대해서 정리해보려 합니다.

딱히 외울 필요가 없다고 생각해서 매번 찾으려니 힘드네요 ㅎㅎ

그래서 제가 보려고! 한번 쭉 정리하려 합니다. 

이 포스트는 지속적으로 업데이트가 될 것 같네요ㅎㅎ

 

HTML TAG 란?

<strong> TAG, Text를 굵게 표시

태그는 HTML 에서 정보를 표기하고, 정보의 형태등을 결정짓는 등의 역할을 합니다. 

태그를 해독하는 존재는 크롬과 같은 브라우저 입니다. 

이런 예약된 언어들을 브라우저에서 다르게 해독한다면 원했던 결과와 다른 결과를 표출되는 경우도 있다고 합니다. 

 

 

자주쓰는 TAG 

이름 기능 활용 예시
<html> Html 코드임을 표현
<head> 웹 페이지 헤드부분
<body> 문서의 내용
<title> 사이트 제목 <title> 웹사이트 제목 </title>
<meta> 메타데이터 표현,
웹사이트 정보를 포함하지만 사용자 화면엔 표기되지 않음		 <head>
    </meta name= "name" content = "sample"/>
</head>
<div> 콘텐츠 그릇 (줄 바꿈 O) <div> 콘텐츠 </div>
<span> 콘텐츠 그릇 (줄 바꿈 X) <span style = "color:red"> 콘텐츠 </span>
<a> 하이퍼링크 <a href = "url"> 콘텐츠</a>
<script> 자바스크립트 삽입 <script> 자바스크립트 코드 </script>
<link> 외부 파일을 HTML 문서와 연결 < link rel = "style.css" type ="text/css" />
<img> 문서에 이미지 삽입 < img src = "이미지 경로" >
<p> 문단 (줄 바꿈  O) <p> 안녕하세요 SoftColors 입니다 </p>
<li>와 <ul> 목록(리스트를) 그리기 위해 사용
Ex)
•이런 식의 리스트
 <ul>
    <li> 항목 1 </li>
    <li> 항목 2 </li>
</ul>
<style> CSS 코드 삽입
<br> 줄 바꿈 줄 <br/> 바꿈



 

자주쓰진 않지만 알아두면 좋은 TAG

이름 기능 활용 예시
<h*> 제목을 표현하는 태그(1~6) <h1>제일 큰 제목</h1>
<body> 문서의 내용
<iframe> 다른 콘텐츠를 현재 문서에 삽입 <iframe src = " 유튜브 링크"/>
<nav> 하이퍼링크를 모아 두는 영역 표시 <nav>
    <a href = "#"> 링크1 </a>
    <a href = "#contact"> 링크2 </a>
</nav>
<strong> 글자 굵게 <strong> 두꺼운 글자 </strong>
<input> 화면에 입력창 삽입 <input type="text" name = "name"/>
<button> 화면에 버튼 삽입 <button type="submit"> 버튼이름 </button>

 

 

<h*> 시리즈

 

참조
반병헌, "코딩만 따라 해도 웹페이지가 만들어지는 HTML+CSS+자바스크립트"

반응형

'프론트엔드 > Html Css' 카테고리의 다른 글

[CSS] 스타일 색상, 폰트 설정 법  (0) 2023.08.25
[Html, CSS] 웹페이지 이미지 표현 (margin,padding, border, visibility)  (0) 2022.12.17
[웹 기초] CSS란? CSS의 기초와 예제  (0) 2022.12.04
[HTML] Input Tag 총 정리  (0) 2022.11.17
[웹서버 기초]HTML 이란? (개념설명, 환경구축, 예제)  (0) 2022.09.23
'프론트엔드/Html Css' Related Articles more
Comments