1. html 주요 tag

1. 목록 tag

• ul : 순서 없는 목록 tag
• ol : 순서가 있는 목록 tag
• li : 목록 요소

<h1>ol tag</h1>
    <ol>
      <li>Facebook</li>
      <li>Tweeter</li>
      <li>Linked In</li>
    </ol>
    
<h1>ul tag</h1>
    <ul>
      <li>Facebook</li>
      <li>Tweeter</li>
      <li>Linked In</li>
    </ul>

2. 정의 목록

• 특정 용어와 그 정의를 표현할 때 사용하는 tag
  
  
• dl : 정의 목록 tag (list)
• dt : 정의 용어 tag (term)
• dd : 정의 설명 tag (description)

<dl>
    <dt>정의 용어1</dt>
    <dd>정의 설명 tag1</dd>
    <dd>정의 설명 tag2</dd>
    <dd>정의 설명 tag3</dd>
    <br />
    <dt>정의 용어2</dt>
    <dd>정의 설명 tag1</dd>
    <dd>정의 설명 tag2</dd>
    <dd>정의 설명 tag3</dd>
</dl>

 

3. table tag

• table : table 전체
  • border[property] : 표테두리 두께 지정
     
  • th : 행 내부 제목 넣는 칸
    • rowspan[property] : 행 합침
    • colspan[property] : 열 합침
  • tr : 행
    
    • rowspan[property] : 행 합침
    • colspan[property] : 열 합침
  • td : 행 내부 값 넣는 칸
    
    
  • <잘 안쓰는 table 내부 tag>
    • caption : table 제목
    • colgroup 
    • thead 
    • tbody 
    • tfoot

<table border="1">
  <tr>
    <th>header1</th>
    <th>header2</th>
  </tr>
  <tr>
    <td>value1</td>
    <td>value2</td>
    <td>value3</td>
  </tr>
</table>

 

4. 이미지 tag

• img
  • src : 이미지의 경로 지정
  • alt : 이미지 없을 때 나오는 별명
    
    
  • width, heigth property는 잘 사용하지 않는다.
  • width : 이미지 가로 길이
  • height : 이미지 세로 길이

 

• 임시 img 파일 사이트
  • placehold.it

    <img src="#" alt="스타벅스" />
    <img src="/js/quiz4/img/0.png" alt="원카드" width="15px" height="15px" />

 

 

5. audio tag

• audio
  • src : 음악 파일의 경로 지정
  • preload : 음악을 재성하기 전 모두 불러올지 지정
  • autoplay : 음악을 자동재생할지 지정
  • loop : 음악을 반복할지 지정
  • controls : 음악 재생도구 출력 지정
• controls, autoplay 는 attribute만 작성해도 동작한다.

 

    <audio src="##" controls autoplay></audio>

 

6. video tag

• video
  • src : video 파일 경로 지정
  • poster : 비디온 준비 중일 때 이미지 파일 경로 지정 - 썸네일
  • preload : 비디오 재생전 모두 불러올지 지정
  • autoplay : 비디오를 자동 재생할지 지정
  • loop : 비디오 반복재생할지 지정
  • controls : 비디오 재생도구 출력
    
    
  • width: 비디오 가로 길이
  • height: 비디오 세로 길이

 

5.1. & 6.1 source tag

• audio tag, video tag 의 attribute인 src를 지원하지 않는 browser가 존재하기 때문에 해당 tag들의 내부에 source tag를 이용해서 모든 browser에서 지원 할 수 있도록 한다.
• source tag의 type은 작성하지 않아도 되지만 웹 브라우저의 트랙픽 낭비가 생기므로 type을 작성하는 것을 권장한다.

<audio controls>
  <source src="##" type="audio/mp3" />
</audio>

<video controls>
  <source src="wildlift.mp4" type="video/mp4" />
</video>

 

 

7. 입력양식

• 중요!! - 어떤 부분이 서버로 넘어갈 때 key의 역할을 수행하는지

7.1. form - input

• form
  • action : 원하는 url로 이동
  • method : 입력 데이터 전달 방식을 선택
    
    • get
    • post

<form action="/front_study/index.html" method="get">
  <input type="text" />
  <input type="password" />
  <input type="submit" value="value" />
</form>

 

• input
  • name : action에 해당하는 page로 전달하는 params로 사용 key 값
  • id : 서버쪽 params로 넘어가지 않기 때문에 서버쪽에서 접근이 안됨
  • type : input의 type, type 값의 종류
    • button, checkbox, file, hidden, image, password, radio, reset, submit, text
    • color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  • value : 실제 값이 미리 들어감
  • placeholder : 실제 값은 아니고 해당 input click시 사라짐
• button : input type button과 동일
  
  
• label
  • for : for의 값과 동일한 input의 id가 존재시, 해당 input과 label이 연결된다.
    
    

<form action="/front_study/index.html" method="get">
  <input type="text" name="text" value="abc" />
  <input type="password" name="password" placeholder="hi" />
  <input type="submit" value="value" />
</form>

label click시 해당 input click 된다.

 

 

7.2. form - textarea

• form과 같이 사용해야지 params로 전송이 가능하다.
• label 사용 가능
• textarea
  • name : 서버로 보내질 때 key 값
  • cols :  tag의 너비를 지정
  • rows : tag의 높이를 지정

<form action="">
  <textarea name="hi" id="abc" cols="30" rows="10">abcd</textarea>
  <button>입력</button>
</form>

 

 

7.3. select - option

• 웹사이트 만들 때 안예뻐서 사용 잘 안함 - JS로 하나하나 만듬.
  
  
• select : 선택 양식 생성
  • multiple : 다중선택 가능
• optgroup : 옵션을 그룹화
  • lable : 그룹 이름
• option : 옵션을 생성
  • value : 서버로 보내질 때 key 이름

 

<select name="hi" id="lable">
      <optgroup label="html">
        <option>h1</option>
        <option>h2</option>
        <option>h3</option>
      </optgroup>

      <optgroup label="css">
        <option value="">c1</option>
        <option value="">c2</option>
        <option value="">c3</option>
      </optgroup>
</select>

 

 

7.4. 부수적

• fieldset
• legend : fieldset 내부에서만 작동

<form>
  <fieldset>
    <legend>입력 양식</legend>
    <table>
      <tr>
        <td><label for="name">이름</label></td>
        <td><input id="name" type="text" /></td>
      </tr>
    </table>
  </fieldset>
</form>

 

 

8. 공간 분할 태그

• div, form, table, 목록, p : block 형식
  
  
• span, a, input, 글자형식 : inline 형식
• img, multimedia : inline-block 형식

 

9. 시멘틱 태그

• header : 헤더
• nav : 링크 타고 들어가는 곳
• aside : 양쪽 가생이
• section : 여러 중심 내용을 감싸는 공간
• article : 글자가 많이 들어가는 부분
• footer : 주식회사 나오는 부분

 

• 시멘틱 웹 페이지 : httpL//tinyurl.com/y55xwf8w