2021.12.13

binary·2021년 12월 14일
2

일팔공

목록 보기
1/20
post-thumbnail

HTML5 페이지의 기본 구조

<!DOCTYPE html>
<!-- HTML5 문서임을 알리는 지시어 -->
<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>180 캠프</title>
    <!-- 문서제목, 자바스크립트 코드, css 스타일, 메타 데이터 등이 들어가는 자리 -->
  </head>
  <body>
    <h1>180캠프</h1>
    <!--  문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등이 들어가는 자리 -->
  </body>
</html>
  • 여기서 !DOCTYPE html, html, title, body 태그는 HTML5 페이지의 필수 태그이다.

HTML 태그들 정리

<!-- 문단 제목, 숫자가 커질수록 크기가 작아짐 -->
<h1> ~ <h6> 

<!-- 툴팁, 마우스를 올리면 툴팁이 나타난다 -->
<h1 title="h1 태그입니다.">안녕</h1>

<!-- 수평선, 닫는 태그 없음-->
<hr>

<!-- 새로운 줄로 넘어가기, 닫는 태그 없음-->
<br>

<!-- 단락 나누기 -->
<p>
여러 개의 빈 칸은 하나로 취급된다. 엔터키 역시 하나의 빈 칸으로 취급한다.
</p>

<!-- 개발자의 포맷 그대로 출력 -->
<pre>
내가 쓴 그대로
		보여진다
       			야호
                   		.
                           		.
                                   		.
                              		  .
           	     		.                                   		
<pre>

<!-- 텍스트 꾸미기 -->
<b>글자가 진하게</b> 
<strong>중요한 글자, 진하게</strong>
<i>기울어진 글자</i>
<em>강조, 기울어진 글자</em>
<del>글자 위에 취소선</del>
글자<sup>윗첨자</sup>
글자<sub>아래첨자</sub>
<mark>하이라이팅</mark>

<!-- 이미지 삽입, BMP, GIF, PNG, JPG, JPEG, animated-GIF 가능 -->
<img src="이미지 파일의 URL" alt="이미지 설명">

<!-- 리스트 만들기 -->
<ol>
  <li>1.순서가 있는 리스트</li>
  <li>2.순서가 있는 리스트</li>
</ol>

<ul>
  <li>순서가 없는 리스트</li>
  <li>순서가 없는 리스트</li>
</ul>

<dl>
  <dt>정의 리스트
  <dd>설명글
</dl>

<!-- 하이퍼링크 만들기, 처음 색은 blue, 방문 후 링크 색은 purple, 마우스로 링크를 누르고 있는 동안 색은 red-->
<a href="https://github.com/pongdang">나의 깃헙</a>

<!-- 링크의 target 속성 -->
<a href="https://github.com/pongdang" target="_blank">(새 창)나의 깃헙</a>
<a href="https://github.com/pongdang" target="_self">(현재 창)나의 깃헙</a>
<a href="https://github.com/pongdang" target="_parent">(부모 창)나의 깃헙</a>
<a href="https://github.com/pongdang target="_top"">(브라우저 창)나의 깃헙</a>

<!-- 다운로드 링크 -->
<a href="이미지.png" download>누르면 다운로드 됩니다</a>

<!-- video 태그 -->
<video src="동영상.mp4" controls autoplay>
  controls => 재생, 재생시간, 중단 음소거 등 제어 버튼 출력
  autoply => 비디오 로딩 즉시 재생
  loop => 반복 재생
  muted => 오디오를 끌 때 사용
</video>

<!-- audio 태그 -->
<audio src="음악.mp3" controls autoplay loop>
  controls => 재생, 재생시간, 중단 음소거 등 제어 버튼 출력
  autoply => 비디오 로딩 즉시 재생
  loop => 반복 재생
</audio>

<!-- 블록 태그, 한 라인 독점 -->
<p>, <h1>~<h6>,<div>,<ul>

<!-- 인라인 태그, 자기의 크기만큼만 차지 -->
<strong>, <a>, <img>, <span>

<!-- 메타 태그들, <head> 태그 안에 작성한다 -->

<!-- base 태그 -->
<base href="http://www.study.com/(기본 주소)">
<a href="math.html(상세 주소)">수학</a>
<a href="science.html(상세 주소)">과학</a>

<!-- link 태그, 외부 자원 연결에 사용 -->
<link rel="stylesheet" href="main.css">

<!-- meta 태그, 외부 자원 연결에 사용 -->

<!-- 웹 페이지의 저작자가 pongdang임을 표기 -->
<meta name="author" content="pongdang">

<!-- 웹 페이지 내용 설명 -->
<meta name="description content="공부한 것들 정리">

<!-- 웹 페이지 키워드 (검색 엔진에 의해 검색되게 하기 위함) -->
<meta name="keyword" content="html, css, js, react, 코딩공부">

<!-- charset 속성으로 웹 페이지에 사용하는 문자 코드 지정 -->
<meta charset="UTF-8">



++ table 표 만들기

0개의 댓글