[HTML] 기본 태그

김윤섭·2023년 9월 5일

html

HTML&CSS&JAVASCRIPT

목록 보기

3/10

1. 텍스트(text) 태그

(1) h1 ~ h6 태그

머리말(제목 or 주제)태그

(2) br 태그

줄 바꿈

(3) strong 태그

글자 강조

(4) font

현재는 잘 사용 X

(5) hr 태그

줄 긋기

💡 예시

<h1>안녕하세요.HTML</h1>
<h2>안녕하세요.HTML</h2>
<h3>안녕하세요.HTML</h3>
<h4>안녕하세요.HTML</h4>
<h5>안녕하세요.HTML</h5>
<h6>안녕하세요.HTML</h6>
<hr/>
오늘의 테스트<br><strong> 테스트 </strong> 페이지
<hr/>
<font size="8" color="powderblue">Hello</font>world!!!
<hr/>

💡 결과

2. 하이퍼링크 태그

<a href="http://www.naver.com"
	target="_blank" 
	title="네이버에 접속" >네이버</a>

(1) a 태그

브라우저 관련 태그

(2) href 태그

""안에 주소 넣고 , <> 사이에 하이퍼링크 걸 글자 넣기

(3) target="_blank"

새 창에서 열기

(4) title="네이버에 접속"

커서 대면 설명 출력

3. 목록 태그

<body>
  <h3>순서있는 목록</h3>
  <ol>	
      <li>기술소개</li>
      <li>기본문법</li>
      <li>하이퍼텍스트</li>
      <li>속성 리스트</li>
  </ol>
  <hr/>
  <h3>순서없는 목록</h3>
  <ul> 
      <li>JAVA</li>
      <li>JSP</li>
      <li>DBMS</li>
      <li>HTML</li>
  </ul>
  <hr/>
  <h3>중첩 목록</h3>
  <ul>
      <li>
          목록(1)
          <ul>
              <li>목록 1-1</li>
              <li>목록 1-2</li>
          </ul>
      </li>
      <li>
          목록(2)
          <ul>
              <li>목록 2-1</li>
              <li>목록 2-2</li>
          </ul>
      </li>
  </ul>
</body>

(1) ul 태그

순서가 없는 목록 태그

(2) ol 태그

순서가 있는 목록 태그

(3) li 태그

목록의 내용

💡 결과

4. 이미지 태그

<img src ="puppy.jpg" width = "200" height = "300"
       alt = "강아지 이미지" title = "강아지 사진"/>

(1) img src

img src = "저장된 img 이름.확장자명"

(2) width height

넓이, 높이

(3) alt

이미지가 뜨지 않으면 글로 표기

(4) title

커서 대면 설명 출력

💡 결과

5. table(표) 태그

<body>
    <table border="2" width="300" align="center">
        <thead>
            <tr>
                <th colspan="2" align="center">획득포인트</th>
            </tr>
        </thead>
        <tbody>    
            <tr align="center">
                <td rowspan="2">G획득</td>
                <td>루비 결제 5000G</td>
            </tr>
            <tr align="center">
                <td>가입 축하 10000G 지급</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>합계</th>
                <th>15000G</th>
            </tr>
        </tfoot>    
    </table>
</body>