HTML 많이 쓰이는 유용한 태그 1. 기본 태그

iberis2·2022년 12월 21일
0

HTML

목록 보기
1/8

기본 틀

! + tap : 기본 form 이 나타남
ctrl + / : 코멘트 단축키

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--한글을 지원하지 않는 브라우져에서도 깨지 않도록 인코딩-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--검색엔진의 기준이 되므로 매우 중요-->
</head>
<body>
<!-- 이것은 코멘트 -->    
</body>
</html>

자주 사용하는 기본 태그와 요소

<!DOCTYPE html>

<head>
  <style>
    <!--CSS 내용 기재 가능-->
  </style>
   
 </head>  
 <body>
    <h1>헤드라인 </h1>
    <h2>좀 더 작은 헤드라인</h2>
    <h3>h6까지 있음</h3>
    
   	<p>본문, 문단</p>

<!-- div, span 태그로 다른 태그들을 하나의 묶음으로 묶을 수 있다 -->
    <div> 한 줄 전체 차지; 다음 내용은 줄 바꿈 됨 
        <span>콘텐츠 크기 만큼만 차지; 한 줄에 계속 기재</span>
    </div>
</body> 

이미지 삽입

<img src="경로">

💡 width="넓이" height="높이" 를 추가로 지정할 수 있음
width height 생략하면 기존 이미지 크기로 삽입
width만 입력하면 비율에 맞춰 height 자동 조절

<img src="https://velog.velcdn.com/images/velog/profile/9aa07f66-5fcd-41f4-84f2-91d73afcec28/green%20favicon.png" width="40" height="40"> 

링크 삽입

<a href="주소"> 링크이름 </a>

💡 target="_blank" 새로운 탭에서 링크 열림

<a href="https://www.google.com" target="_blank"> 구글로 가는 링크 </a> 

구글로 가는 링크

리스트

<ul><li>리스트</li></ul> unordered list 순서가 정해지지 않은 리스트
<ol><li>리스트</li></ol> ordered list 순서가 정해져있는 리스트

<ul> <!---unordered list 순서가 정해지지 않은 리스트-->
  <li> 리스트 </li>
  <ul>
    <li> 리스트 </li> <!--리스트 안에 리스트도 가능-->
  </ul>
  <li> 리스트 </li>
</ul>

<ol> <!--ordered list 순서가 정해져있는 리스트-->
  <li> 리스트 </li>
  <li> 리스트 </li>
  <li> 리스트 </li>
</ol>
  • 리스트
    • 리스트
  • 리스트
  1. 리스트
  2. 리스트
  3. 리스트

profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글