본문 바로가기
[HTML & CSS]/[HTML]

[HTML] 간단한 글자 태그

by 북방바다코끼리표범 2023. 8. 1.

복습

https://shins99.tistory.com/10

 

[HTML] HTML의 개요와 기본 문법

모바일 기기에서 보여줄 비율을 조정하는 코드 HTML 개요 HTML은 웹 페이지를 만드는 데 사용하는 언어이며 매우 쉽게 배울 수 있습니다. 모든 태그는 미리 정의되어 있으며, 각각의 태그와 속성을

shins99.tistory.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<!-- html 앙크 태그 == 링크 태그 : 페이지 이동 태그-->
    <!-- 사용법 : <a href = "페이지주소">내용</a> -->
    <!-- 줄복사 단축키 : ctrl + d  -->
    <a href="https://www.naver.com/">네이버</a>
    <a href="https://www.daum.net/">다음</a>
    <a href="https://www.google.com">구글</a>
    
    <a href="#">언론사 전체보기</a>
    <a href="#alpha">알파 부분</a>
    <a href="#beta">베타 부분</a>
    <a href="#gamma">감마 부분</a>
    <h1 id="alpha">알파</h1>
    <p>안녕하세요 홍길동입니다.</p>
	
    <h1 id="beta">베타</h1>
    <p>안녕하세요 홍길동입니다.</p>
    
    <h1 id="gamma">감마</h1>
    <p>안녕하세요 홍길동입니다.</p>
    
    <!-- 태그 공통속성 : id(#변수), class() = 이름 부여 가능 -->
    <!-- 문서 자동 정렬 : ctrl + alt + L -->
    <!-- h1 : 제목태그 (굵은글씨) h1 ~ h5(크기에따라 화면에 다르게 보임) -->
    <!-- 자동 줄바꿈 일어난다. -->
    <!-- b 태그 = (bold) 굵은 글씨 -->
    <!-- p = 단락태그 (paragraph), 일반글씨 사용  -->

    <p><h1><b>Loram ipsum dolor</b></h1></p>
    <h5>Loram ipsum dolor</h5>
    <!-- i태그 = 글자 기울이기 (italic)-->
    <h5><i>Loram ipsum dolor</i></h5>
    <!-- small = 글자 작게 보임 태그 -->
    <h5><small>Loram ipsum dolor</small></h5>
    <!-- sub : 아래 첨자 -->
    <h5>Loram <sub>ipsum</sub> dolor</h5>
    <!-- sup : 윗 첨자-->
    <h5>Loram <sup>ipsum</sup> dolor</h5>
    <!-- ins : 밑줄 -->
    <h5><ins>Loram ipsum dolor</ins></h5>
    <!-- del : 취소선-->
    <h5><del>Loram ipsum dolor</del></h5>
    <!-- hr : 중앙선 -->
    <hr>
    <!-- br : 줄바꿈 -->
    Lorem ipsum dolor<br>
    Lorem ipsum dolor

</body>
</html>

목록 태그

목록태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록태그</title>
</head>
<body>
    <!-- ol : 순서있는 목록 태그(ordered list) -->
    <ol>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ol>
    
    <!-- 참고 에밋기능 : ul>li*3 = 부모태그>자식태그*개수-->
    <!-- ul : 순서없는 목록 태그 (unordered list) -->
    <!-- li : 자식태그 (항목) (list) -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>
</body>
</html>

출력 결과

비디오 파일을 넣어서 화면을 만들어보기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 파일명.확장자 (.css  .js 등등) -->
    <!-- 동영상 파일 : .mp4, .webm -->
    <!-- 비디오 태그 : video(부모태그) > source(자식태그) src="비디오경로" type = "video/확장자"-->
    <!-- video 속성 : width(가로크기), controls(동영상컨트롤패널) -->
    <video width="720" controls="controls">
      <source
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4"
      />
      <source
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.webm"
        type="video/webm"
      />
    </video>
  </body>
</html>

출력한 화면

Document

오디오 삽입하는 법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 첫번째 오디오 -->
    <!-- audio 속성 src="오디오파일경로" -->
    <!-- 인터넷 주소 : http://주소(url) -->
    <!-- https(보안 프로토콜), http : 프로토콜 -->
    <!-- 오디오 확장자 : .mp3, .ogg -->
    <!--  <source src="오디오파일경로"  type="audio/확장자" -->
    <audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls="controls"></audio>
    <hr>

    <!-- 두번째 오디오 -->
    <audio controls="controls">
      <source src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" type="audio/mp3" />
      <source src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.ogg" type="audio/ogg" />
    </audio>
</body>
</html>

출력한 화면

이미지 삽입하는 방법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- img = 이미지 태그 -->
    <!-- 주요속성 : src="이미지경로"  alt="이미지설명글" -->
    <img
      src="http://www.hanbit.co.kr/images/common/logo_hanbit.png"
      alt="한빛미디어"
      width="300"
    /><br />
    <img
      src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
      alt="토끼"
      width="300"
    /><br />
    <!-- alt 속성 : 그림이 없으면 대체텍스트를 화면에 보여줌 -->
    <img src="Nothing" alt="그림이 존재하지 않습니다." width="300">
  </body>
</html>

출력한 화면

 

저작자표시

'[HTML & CSS] > [HTML]' 카테고리의 다른 글

[HTML] 입력 양식과 태그를 활용해서 간단한 예제 만들기  (0) 2023.08.03
[HTML] 입력 양식  (0) 2023.08.02
[HTML] HTML의 개요와 기본 문법  (0) 2023.07.27

관련글

티스토리툴바