반응형

1) 멀티미디어(multimedia)란?

 

- multi + media 의 합성어로 다중매체라고 한다.

 

2) 음악 파일 종류와 삽입 방법 - mp3, ogg

  <audio src="./media/example.mp3" controls></audio>
  <audio src="./media/example.ogg" controls></audio>

 

3) 동영상 종류와 삽입 방법 - mp4, ogv, webm

  <video src="./media/example.mp4" controls></video>
  <video src="./media/example.ogv" controls></video>
  <video src="./media/example.webm" controls></video>

 

 

반응형

'HTML5' 카테고리의 다른 글

07-2. 양식태그  (0) 2023.07.20
07. 양식 태그  (0) 2023.07.20
05. 테이블 태그  (0) 2023.07.20
04. 하이퍼링크 태그  (0) 2023.07.20
03. 이미지, 이미지 맵 태그  (0) 2023.07.20
반응형

1) table tag 구조

 

table, tr, td, th 태그로 구성되어있다.

 

12_Table_Tag
표 제목, 설명 문구
제목 제목 제목
1 2 3
4 5 6
7 8 9

th는 제목 cell 이기 때문에 굵게, 가운데 정렬로 표시된다.

td는 내용 cell 이기 때문에 왼쪽 정렬로 표시된다.

 

2) table cell 병합하기

 

가로(colspan), 세로(rowspan)

작성방법)
<td colspan="2">cell</td>

<td rowspan="2">cell</td>

 

12_Table_Tag
가로 cell 병합
cell
cell cell
세로 cell 병합
cell cell
cell
반응형

'HTML5' 카테고리의 다른 글

07. 양식 태그  (0) 2023.07.20
06) 멀티미디어 태그  (0) 2023.07.20
04. 하이퍼링크 태그  (0) 2023.07.20
03. 이미지, 이미지 맵 태그  (0) 2023.07.20
02. 글자, 목록 태그  (0) 2023.07.20
반응형

1) 하이퍼링크란 

 

- 하이퍼텍스트로 이뤄진 문서에서 사용자가 마우스로 클릭하였을 때 다른 동작을 일으키는 요소

 

  • text link
<a href="http://example.com" title="example">example</a>

 

  • image link
<a href="http://www.exam.com" title="exam 바로가기">
    <img src="./svg/example.svg" alt="example_image">
</a>

 

  • E-mail link
<a href="mailto:id@naver.com" title="Mail 보내기">관리자에게 Mail 보내기</a>

 

  • tell link
<a href="tel:+1234567890">Call Us</a>

 

  • download link
<a href="download/file.pdf" download>Download PDF</a>

 

  • Anchor link
<a href="#section">Jump to Section</a>
...
<h2 id="section">Section Title</h2>
반응형

'HTML5' 카테고리의 다른 글

06) 멀티미디어 태그  (0) 2023.07.20
05. 테이블 태그  (0) 2023.07.20
03. 이미지, 이미지 맵 태그  (0) 2023.07.20
02. 글자, 목록 태그  (0) 2023.07.20
01. HTML5 소개와 문법  (0) 2023.07.20
반응형

1) 웹에 사용되는 이미지 종류

 

  • .jpg
  • png
  • gif

2) html5 이미지 삽입하기

 

<img src="이미지 경로" alt="이미지가 지원이 되지않을 때 대체 할 문구">
  1. src 속성
    - src안에는 절대주소 또는 상대주소를 사용한 URL 경로를 설정한다.
      URL : Uniform Resource Locator의 약자. 웹 서버의 파일 또는 문서의 정확한 경로나 주소, 위치.
      절대주소 : https:// , http:// 로 시작하며 '폴더이름/파일이름.확장자'로 끝나는 주소.
      상대주소 : html 문서가 있는 곳이 기준이 되며, 상위폴더 기준으로 하위 폴더 작성 (./폴더이름/파일이름.확장자)

  2. alt 속성
    - alt : alternate의 약자. 이미지가 응답되지 않을 때 이미지를 대신해 표시되는 문구.
      시각 장애인이 이미지를 이해하기 위해 도와주는 속성(음성낭녹기가 속성에 저장된 문구를 읽어준다.)
      웹 접근성 규칙중 하나이다.

3) 이미지맵 태그 (image map)

 

-> HTMl 문서에서 하나의 이미지를 여러 개의 맵으로 나누어 클릭가능한 영역으로 나누는 것.

<img src="example.jpg" usemap="#example-map" alt="Example Image" width="300" height="200">

<map name="example-map">
    <area shape="rect" coords="0,0,150,200" href="link1.html" alt="Area 1">
    <area shape="circle" coords="225,100,50" href="link2.html" alt="Area 2">
</map>
  1.   img 태그로 이미지를 표시하고, map 태그로 이미지맵을 정의한다.

  2.  map name=" " 부분에 이미지맵의 이름을 지정한 후 img usemap=" "에 적어 맵과 이미지를 연결한다.

  3.  area shape=" " 부분에 원하는 모양 값을 입력해준다.
    - rect : 직사각형
    - circle : 원형
    - poly : 다각형
    - default : 기본영역 정의

  4. coords=" " 부분에 좌표값을 입력해준다.

    - rect 좌표 값 순서 : x1, y1, x2, y2
    (x1,y1) = 직사각형의 왼쪽 위 모서리 좌표
    (x2,y2) = 직사각형의 오른쪽 아래 모서리 좌표

    -circle 좌표값 순서 : x, y, radius
    (x,y) = 원의 중심 좌표
    radius = 원의 반지름 길이

    - poly 좌표값 순서 : x1, y1, x2, y2, x3, y3 ,...,xn, yn
    다각형의 각 꼭지점 좌표들을 순서대로 나열
반응형

'HTML5' 카테고리의 다른 글

06) 멀티미디어 태그  (0) 2023.07.20
05. 테이블 태그  (0) 2023.07.20
04. 하이퍼링크 태그  (0) 2023.07.20
02. 글자, 목록 태그  (0) 2023.07.20
01. HTML5 소개와 문법  (0) 2023.07.20
반응형

1) 폰트 태그 (Font Tag)

 

b : bold의 약자, 글자를 진하게

strong : 글자를 진하게

위 둘의 차이로는 b: 일반적인 의미없는 강조(눈으로만 강조되는 글), strong : 중요한 단어를 강조(스크린 리더 프로그램을 통해 음성이 나올 때 강한 어조로 음성을 강조)가 있다

 

i : italic의 약자, 글자를 기울이게

em : emphasized의 약자, 글자를 강조하면서 기울이게

 

ins : insert의 약자로서 글자 밑줄 표시

s : 취소선

small : 글자 크기를 3/4 만큼 작게 나타낸다. (기본 글꼴 크기 : 16px)

sup : superscript의 약자. 위첨자

sub : subscript의 약자. 아래첨자

mark : 사용자가 지정한 범위 안에 배경색을 노락색으로 표기

 

2) 리스트 태그 (List Tag)

 

리스트는 관련된 주제에 맞는 내용을 나열하고자 할 때 사용하며, 관련 태그에는 정의목록, 순차목록, 비순차목록이 있다.

 

  • 정의 목록
    -> 용어의 대한 정의를 내릴 때 사용
    - dl (definition list)
    - dt (defintion term)
    - dd (defintion description)

  • 순차목록 (order list)
    ->ol, li, type(숫자, 로마숫자, 알파벳 ...)
순차 목록
  1. 순차목록
  2. 순차목록
  3. 순차목록
  1. 순차목록
  2. 순차목록
  3. 순차목록
  1. 순차목록
  3. 순차목록
  5. 순차목록

 

  • 비순차목록 (unorder list)
    ->ul, li, type(disc, circle, square ...)
비순차 목록
  • 순차목록
  • 순차목록
  • 순차목록
    • 순차목록
    • 순차목록
    • 순차목록
      • 순차목록
      • 순차목록
      • 순차목록
반응형

'HTML5' 카테고리의 다른 글

06) 멀티미디어 태그  (0) 2023.07.20
05. 테이블 태그  (0) 2023.07.20
04. 하이퍼링크 태그  (0) 2023.07.20
03. 이미지, 이미지 맵 태그  (0) 2023.07.20
01. HTML5 소개와 문법  (0) 2023.07.20
반응형

1) HTML 문서의 기본 구조

<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>제목</title>
</head>
<body>
   내용
</body>
</html>

 

  1. <!DOCTYPE HTML>
    - html5 문서임을 브라우저에게 알리는 문서 유형 선언(document type Definition Declaration ,DTD 선언).
      브라우저가 문서를 분석 또는 번역하여 표시할 때 올바른 버전에 맞게 보여주기 위한 선언문.

  2. <html lang="ko">
    - html 문서의 루트 요소, 휴먼 랭귀지 선언.
      lang 속성은 문서의 언어를 지정. en = 영어 | ko = 한국어
      웹 서버 검색 시 문서 안에 내용이 우선 검색되도록 하기 위해 선언.
      ai를 통해 소프트웨어가 내용을 정확하게 이해하고 보여줄 수 있도로함.

  3. <head>
    - 문서의 메타 데이터를 포함하는 부분.

  4.   <meta charset="UTF-8">
    - 문서의 문자 인코딩 지정 태그.
      UTF-8 = 유니코드의 인코딩 방식 중 하나로 웹에서 가장 널리 사용되는 방식.
      
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    - 뷰포트 설정을 지정하는 태그.
      모바일 기기에서 화면 크기와 확대/ 축소 기능을 조절.
  6.   <title>제목</title>
    - 문서의 제목을 지정하는 태그.
      브라우저 탭에 표시되는 제목을 의미.

  7. <body>
    - 실제 웹 페이지의 내용을 담는 부분

2) 제목 태그 (TITLE TAG)

 

html 문서에서 제목을 작성하고자 할 때 사용하는 태그는 h1~h6까지 총 6가지가 있으며, heading의 약자인 'h'를 사용

 

제목

h1 제목태그입니다.

h2 제목태그입니다.

h3 제목태그입니다.

h4 제목태그입니다.

h5 제목태그입니다.
h6 제목태그입니다.

 

3) 문단 태그

 

  1. p - paratraph(문단)의 약자.
    더보기
    <p>This is a paragraph/</p>
  2. hr - horzantal의 약자. 일종의 수평선
    더보기
    <hr>
  3. blockquote - 인용문 표현
    더보기
    <blockquote>This is a quoted text.</blockquote>
  4. br - line break의 약자. 강제 줄바꿈
    더보기
    <br>
  5. pre - preformatted text의 약자. 태그 안 공백 또는 문구를 모두 그대로 반영
    더보기
    <pre> abcdef      g</pre>
    <p>인 경우 결과값 -> aabcdef g
    <pre>인 경우 결과값 -> abcdef      g

 

 

반응형

'HTML5' 카테고리의 다른 글

06) 멀티미디어 태그  (0) 2023.07.20
05. 테이블 태그  (0) 2023.07.20
04. 하이퍼링크 태그  (0) 2023.07.20
03. 이미지, 이미지 맵 태그  (0) 2023.07.20
02. 글자, 목록 태그  (0) 2023.07.20

+ Recent posts

티스토리툴바