본문 바로가기
Example

[E-HTML] text, list, table, audio, video, image 예시

by 송기동 2023. 8. 1.
728x90

HelloWorld 가 나오게 해보자!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- css파일 링크 -->
    <link rel="stylesheet" href="./css/indext.css" />
  </head>
  <body>
    <!-- 주석 단축키 : ctrl + /(슬래쉬) -->
    <!-- HTML : 마크업 언어, 여는태그 + 닫는태그로 이루어져 있음 -->
    <!-- html 템플릿 만들기 : ! + tap(탭키) -->
    <!-- 저장 : ctrl + s -->
    <!-- 실행취소 : ctrl + z -->
    <!-- h1, h2 -> 여는태그 + 닫는태그 작성됨(자동 완성) -->
    <h1>hello world</h1>

    <!-- js 파일 링크 위치 -->
    <script src="./js/index.js"></script>
  </body>
</html>

 

h1 {
  color: white;
  background: black;
}

css를 사용해 배경색과 글자색을 바꿀수 있다.

Text

text_anchor

<!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="http://naver.com">네이버</a>
    <a href="http://daum.net">다음</a>
    <a href="http://google.com">구글</a>
  </body>
</html>

결과

Document 네이버 다음 구글

text_anchorinner

<!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>
    <!-- 취소 : ctrl + z -->
    <a href="#">언론사 전체보기</a>
    <a href="#alpha">알파 부분</a>
    <a href="#beta">베타 부분</a>
    <a href="#gamma">감마 부분</a>

    <!-- 태그 공통속성 : id(#변수), class 등 -->
    <h1 id="alpha">알파</h1>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <h1 id="beta">베타</h1>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <h1 id="gamma">감마</h1>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
    <p>안녕하세요 강태경입니다.</p>
  </body>
</html>

결과

Document 언론사 전체보기 알파 부분 베타 부분 감마 부분

알파

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

베타

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

감마

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

안녕하세요 강태경입니다.

text_font

<!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>
    <!-- 문서 자동 정렬 : ctrl + alt + l -->
    <!-- h1 : 제목태그(굵은글씨) h1 ~ h5(크기에따라 화면에 다르게 보임) -->
    <!-- 자동으로 줄바꿈 일어남 -->
    <!-- b : 굵은글씨(bold) -->
    <!-- p : 단란태그(paragraph), 일반글씨 사용 -->
    <p><b>Lorem ipsum dolor</b></p>
    <h1>Lorem ipsum dolor</h1>
    <h5>Lorem ipsum dolor</h5>
    <!-- i : 글자 기울림(italic) -->
    <h5><i>Lorem ipsum dolor</i></h5>
    <!-- small : 글자 작게 보임 태그 -->
    <h5><small>Lorem ipsum dolor</small></h5>
    <!-- sub : 아래 첨자 -->
    <h5>Lorem <sub>ipsum</sub> dolor</h5>
    <!-- sup : 위 첨자 -->
    <h5>Lorem <sup>ipsum</sup> dolor</h5>
    <!-- ins : 밑줄 -->
    <h5><ins>Lorem ipsum dolor</ins></h5>
    <!-- del : 취소선 -->
    <h5><del>Lorem ipsum dolor</del></h5>
    <!-- hr : 중앙선 -->
    <hr />
    Lorem ipsum dolor<br>
    <!-- br : 줄바꿈(*) -->
    Lorem ipsum dolor
  </body>
</html>

결과

Document

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

text_content

<!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>
    <h1>홍차</h1>
    <hr />
    <h2>정의</h2>
    <p>홍차는 백차, 녹차, 우롱차</p>
    <br />
    <h2>등급</h2>
    <p>홍차는 여러가지로 등급이 매겨진다.</p>
    <p>- 브로큰 페코</p>
    <p>- 브로큰 페코 수숑</p>
    <p>- 브로큰 오렌지 페코</p>
  </body>
</html>

결과

Document

홍차

정의

홍차는 백차, 녹차, 우롱차


등급

홍차는 여러가지로 등급이 매겨진다.

- 브로큰 페코

- 브로큰 페코 수숑

- 브로큰 오렌지 페코

List

list_ordered

<!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>
    <!-- ol : 순서있는 목록 태그(ordered list) -->
    <ol>
      <li>사과</li>
      <li>바나나</li>
      <li>오렌지</li>
    </ol>
  </body>
</html>

결과

Document
  1. 사과
  2. 바나나
  3. 오렌지

list_unordered

<!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>
    <!-- 참고) 에밋기능 : 부모태그>자식태그*개수 -->
    <!-- ul : 순서없는 목록 태그(unordered list) -->
    <!-- li : 자식태그(항목) (list) -->
    <!-- ul>li*3 치면 밑에 모양으로 생성됨 -->
    <ul>
      <li>사과</li>
      <li>바나나</li>
      <li>오렌지</li>
    </ul>
  </body>
</html>

결과

Document
  • 사과
  • 바나나
  • 오렌지

Table

<!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>
    <!-- 사용법 : table - thead(제목태그) [tr(행), th(열), 굵은 글씨] -->
    <!--                 본문 : tr(행), td(열), 일반글씨 -->
    <table border="1">
      <!-- 제목 : 테이블 -->
      <thead>
        <tr>
          <th></th>
          <th>월</th>
          <th>화</th>
          <th>수</th>
          <th>목</th>
          <th>금</th>
        </tr>
      </thead>
      <!-- 본문 시작 -->
      <tr>
        <td>2교시</td>
        <td>영어</td>
        <td>국어</td>
        <td>과학</td>
        <td>미술</td>
        <td>기술</td>
      </tr>
      <!-- 본문 끝 -->
    </table>
  </body>
</html>

결과

Document
월 화 수 목 금
2교시 영어 국어 과학 미술 기술

Video

<!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="640" 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

Audio

<!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>

결과

Document

Image

<!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>

결과

Document 한빛미디어
토끼
그림이 존재하지 않습니다.

 

728x90

'Example' 카테고리의 다른 글

[E-HTML&CSS] 선택자 예시  (15) 2023.08.04
[E-HTML&CSS] 연습문제 + div, span, 시멘틱태그 예시, css 기본선택자  (16) 2023.08.03
[E-HTML] input, select, textarea, lable 예시 + 연습문제  (14) 2023.08.02
[E-Java] 접근 제어자 예시  (20) 2023.08.01
[E-Java] 생성자 사용 예시  (16) 2023.07.31

관련글

티스토리툴바