34. HTML(1)

sumin·2023년 8월 21일

아카데미

목록 보기

34/82

HTML

1. HyperText Markup Language
2. 하이퍼텍스트(링크)를 만드는 언어이다. 
3. 태그(Tag)로 구성된다. 
   1) 기능이 정해져 있는 약속된 태그만 사용할 수 있다. 
   2) 시작 태그 <tag>와 종료 태그 </tag>로 구성된다. 
   3) 나 홀로 태그(단독 태그)도 있다. <tag> 또는 <tag/>
   4) 모두 소문자로 작성한다. 
   5) 계층 구조(부모-자식)를 가진다.   
4. 태그 형식
   1) <태그이름 속성="값" 속성="값" 속성="값"></태그이름>
   2) <태그이름 속성="값" 속성="값" 속성="값"/> - 범위가 필요 없는 경우 
 5. 태그 요소 
    1) 태그가 적용되는 범위를 의미한다. 
    2) 블록 요소  : 해당 요소의 블록(라인 전체)에 적용되는 태그, 자동으로 줄 바꿈 된다. 
    3) 인라인 요소 : 해당 요소의 인라인(요소 자체)에 적용되는 태그

HTML 기본 구조

1. 선언부 : <!DOCTYPE html> 또는 <!doctype html>
2. <html> 태그 : 문서의 모든 내용을 포함하는 최상위 태그
3. <head> 태그 : 각종 헤더 값을 설정하는 태그
4. <body> 태그 : 문서의 본문 내용을 포함하는 태그

기본

1. 줄 바꿈
  1)<br> 또는 <br/>
  2)원하는만큼 사용할 수 있다.   
2. 수평선
  1) <hr> 또는 <hr/>
  2) 화면의 너비만큼 수평선을 만든다. 
3. 엔티티 코드 
  1) HTML 문서에서 사용하는 특수 문자 
  2) &로 시작하고 ; 으로 끝난다.    
   작다(less then) &lt;<br>  ->  <
   크다(greater then) &gt;<br> ->  >
   작거나 같다(less then equal) &le;<br> ->  <=
   크거나 같다(greater then equal) &ge;<br> ->  >=
   앰퍼센드 &amp;<br>
   공백 &nbsp;<br>   
4. 제목 태그(heading tag)
  1) 블록 요소  
  2) 제목을 만드는 태그이다.  
  3) 글자 크기 조정하고 글자를 굵게 표시한다. 
  4) <h1>, <h2>, <h3>, <h4>, <h5>, <h6>     
   
    <h1>1번째로 큰 제목(32px)</h1>
    <h2>2번째로 큰 제목</h2>
    <h3>3번째로 큰 제목</h3>
    <h4>4번째로 큰 제목(16px)</h4>
    <h5>5번째로 큰 제목</h5>
    <h6>6번째로 큰 제목(10px)</h6>
    
5. 문단 태그(paragrph tag)
  1) 블록 요소 
  2) 문단을 만드는 태그이다. 
6. 형식을 가진 문단 태그(pre-formatted paragraph tag)
  1) 블록 요소
  2) 문단에 입력된 모든 요소가 그대로 나타난다. 
  3) 공백 문자(스페이스, 줄바꿈)를 그대로 나타낼 때 주로 사용한다.

Emmet

1. 줄여서 입력하면 원래 내용이 완성되는 기능이다. 
2. 기본 줄임말
  1) html:5
  2) ul>li*5
  3) tr>td*3

목록 태그

1. 순서가 없는 목록 태그(un-ordered list tag)
      1) 블록 요소  
      2) 글머리 기호를 이용해서 각 목록을 만든다. 
      3) 형식 
        (1) <ul> 태그 : 모든 목록을 포함하는 태그 
        (2) <li> 태그 : 목록을 구성하는 개별 항목을 나타내는 태그, <ul> 태그의 자식 태그  
      4) 글머리기호 종류
        (1) <ul type="disc">  ● (디폴트, type  속성 생략가능)
        (2) <ul type="circle"> ○
        (3) <ul type="square"> ■    
        
2. 순서가 있는 목록 태그(ordered list tag)
      1) 블록 요소 
      2) 번호를 이용해서 각 목록을 만든다.
      3) 형식
        (1) <ol> 태그 : 모든 목록을 포함하는 태그 
        (2) <li> 태그 : 목록을 구성하는 개별 항목을 나타내는 태그, <ol> 태그의 자식태그
      4) 번호 종류     
        (1) <ol type="1"> : 1,2,3,...(디폴트, type 속성 생략가능)
        (2) <ol type="a"> : a,b,c,... 
        (3) <ol type="A"> : A,B,C,...
        (4) <ol type="I"> : I,II,III,...
        (5) <ol type="i"> : i,ii,iii,....      
3. 개요 목록 (description list tag)
      1) 블록 요소
      2) 이름과 설명을 하나의 항목으로 나타내는 태그이다.
      3) 형식
        (1) <dl> 태그 : 모든 목록을 포함하는 태그 
        (2) <dt> 태그 : 목록을 구성하는 개별 항목의 이름을 나타내는 태그, <dl> 태그의 자식 태그    
        (3) <dd> 태그 : 목록을 구성하는 개별 항목의 설명을 나타내는 태그, <dl> 태그의 자식 태그

텍스트 효과

1. 인라인 요소 
2. 블록 전체가 아니라 지정된 인라인 영역에만 적용된다. 
3. 종류
   1) 굵게
     (1) <b></b>           : bold
     (2) <strong></strong> : 추천 (strong, 강하게)
   2) 기울인
     (1) <i></i>         :  italic
     (2) <em></em>       :  추천 (emphasis, 강조)
   3) 밑줄
     (1) <u></u>         : underline
     (2) <ins></ins>     : 추천 (insert, 삽입된 텍스트)
   4) 취소
     (1) <s></s>         : strikeline
     (2) <del></del>     : 추천 (delete, 삭제된 텍스트)
   5) 기타
     (1) <mark></mark>   : 형광펜
     (2) <sup></sup>     : 위첨자
     (3) <sub></sub>     : 아래첨자

이미지

1. 인라인 요소
2. 형식
  <img> 또는 <img/>
3. 주요 속성
   1) alt : 이미지가 없는 경우 이미지 대신 나타나는 텍스트 정보 
   2) src : 이미지의 경로를 작성
     (1) 절대경로 : 사용 불가 (주의 !)
     (2) 상대경로 : 사용 가능   
        ① 현재 디렉터리 : .
        ② 상위 디렉터리 : ..
   3) width : 이미지 너비 지정(너비를 조정하면 높이도 자동 조정된다.)
   4) height : 이미지 높이 지정 (높이를 조정하면 너비도 자동 조정된다.)   
  
#### 절대 경로  
   <p>
      <img alt="절대 경로는 원래 안 나옵니다." src="D:/GDJ69/images/404.jpg">
   </p>

#### 상대 경로  

    D:/GDJ69/webstudy/01_HTML/04_multimedia.html 에서 
    D:/GDJ69/images/animal1.jpg 이미지 포함하기
    D: 
      ㄴGDJ69       : 상위 상위 디렉터리 (../..)
        ㄴassets      :멀티미니어 폴더 (../../assets
          ㄴimages     : 이미지 디렉터리 (../../assets/images)
        ㄴwebstudy   :상위 디렉터리(..)
          ㄴ01_HTML  :현재 디렉터리() 
    
   <p>
      <img alt="여우" src="../../assets/images/animal1.jpg" width="500px">

   </p>

Audio

1. 인라인 요소
2. 형식
   <audio>
    <source src="오디오경로">
   </audio>
3. audio 태그 주요 속성
       속성명  |  속성값   | 의미
  1) controls | controls | 오디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
  2) autoplay | autoplay | 오디오 자동 재생
  3) loop     | loop     | 오디오 반복 재생
  4) muted    | muted    | 음소거
4. audio 미디어 타입(MIME)
  1) MP3 : audio/mp3
  2) WAV : audio/wav
  3) OGG : audio/ogg 
  
   <audio controls autoplay>
          <source src="../../assets/audio/t-rex-roar.mp3" type="audio/mp3">  
          브라우저가 &lt;audio&gt; 태그를 지원하지 않으면 내가 보일 것이다.  
      </audio>

video

1. 인라인 요소
2. 형식
   <video>
      <source src="비디오경로">
   </video>
3. video 태그 주요 속성
     속성명   |  속성값   | 의미
 1) controls | controls | 비디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
 2) autoplay | autoplay | 비디오 자동 재생
 3) loop     | loop     | 비디오 반복 재생
 4) muted    | muted    | 음소거
 5) width    |  픽셀값   | 비디오 너비
4. video 미디어 타입(MIME)
 1) MP4  : video/mp4
 2) WEBM : video/webm
 3) OGG  : video/ogg
 
	<video controls autoplay width="300px">
      	<source src="../../assets/video/flower.webm" type="video/webm">
     	 브라우저가 &lt;vedio&gt; 태그를 지원하지 않으면 내가 보일 것이다.
    </video>