스퐁지송 개발노트

Vscode HTML 본문

HTML,CSS

Vscode HTML

강준석 2022. 12. 14. 11:26
728x90

html 기본 문법들

<!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>
  <h1> 제목을 나타내는 h1태그</h1>
  <h2> 제목을 나타내는 h2태그</h2>
  <h3> 제목을 나타내는 h3태그</h3>
  <h4> 제목을 나타내는 h4태그</h4>
  <h5> 제목을 나타내는 h5태그</h5>
  <h6> 제목을 나타내는 h6태그</h6>

  <p>꾸미기가 없음</p>
  <p><b>b태그 : 글꼴 진하게</b></p>
  <p><i>i태그 : 이탤릭체</i></p>
  <p><i>i태그 : <b>이탤릭체 같이 사용가능<b></i></p>
  <p><em>em태그 : 텍스트 강조</em></p>
  <p><code>code 태그 : 코드임을 알려줌</code></p>
  <p>윗첨자<sup>sup태그</sup>,
  아래첨자<sub>sub태그</sub></p>

  <p><s>s 태그 : 취소선</s></p>
  <p><u>u태그 : 밑줄</u></p>
  <p>q태그 : <q>인용문표시</q></p>

  <p><strong>strong 태그는 진하게 </strong></strong></p>

  <p><big>big 태그 : 큰글자</big></p>
  <p><small>small태그는 작은글자</small></p>
  <p><mark>mark태그는 하이하이트</mark></p>

  <h4>h4태그로 제목을 작성</h4>
  <strong>strong태그로 제목 작성</strong>
  <p>외관상 똑같으나 제목을 쓸땐 제목이라 인식해주는 h4를 써야한다</p>

  <p>공       백</p>

  <p>공 &nbsp;&nbsp;&nbsp;&nbsp; 백</p>

  <p> &lt; p &gt; </p>

  <p>&quot;따옴표&quot;</p>

  <p>&amp; &nbsp; 이거는 스페이스바 하나 입니다</p>
  <!-- &amp;코드를 출력해줌 -->

</body>

</html>

 

검색사이트 소개하는 페이지 만들기

<!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>검색 사이트 소개</title>
</head>
<body>
  <h1>다양한 검색 사이트들</h1>
  
  <p><h2><strong>Google</strong></h2></p>
 
  <p>주소 : google.com</p>
 
  <p><h2><strong>Naver</strong></h2></p>

  <p>주소 : naver.com</p>
  
  <p><h2><strong>Daum</strong></h2></p>

  <p>주소 : daum.net</p>


</body>
</html>

 

이미지 넣어보기

<!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>
  <p>이미지 넣기</p>

  <img src="img/teemo.jpg" alt="캡틴티모" width="200" height="220">

  <img src="img/gifpepe.gif" alt="캡틴티모" width="30%">


</body>
</html>

 

728x90
저작자표시 (새창열림)
Comments