HTML&CSS

HTML 태그 종류

웨일파도 2023. 4. 4. 17:10
반응형

4/4 (화) HTML 수업내용 정리

 

<pre> 띄어쓰기 줄뛰우기 다 적용됨 </pre>

<pre>안  녕  하  세  요
반갑습니다
</pre>

 

* 주석 

<!-- 테스트 주석 -->

 

<div> 한 줄 차지 </div>

<span> 영역 차지 </span>

<p> 한 줄 차지, 상하단 공간 있음 </p>

 

 

<h1> 제목 굵은 글씨 </h1>

<h1> 부터 <h6> 까지 있음.

<h1> 이 가장 큰 글씨

 

 

<strong> 굵은 글씨, strong 사용 권장 </strong>

<b> 굵은 글씨 </b>

<em> 기울림,  em 사용 권장

<i> 기울림, italy 채 </i>

<ins>밑줄</ins>

<del>취소줄</del>

 

<sup>작은 위의 글자</sup>

<sub>작은 아래의 글자</sub>

 

<input>입력박스</input>

 

 

<img src="이미지 소스" alt="이미지설명">

* 폴더 이동할 때 ".." 은 이전폴더로 이동

 

<a> 하이퍼링크로 이동가능 </a>

<a href="javascript:;">a 태크 표현</a>

     target = "_blank" 다른 창으로 열림

     target = "_self" 같은 창으로 열림

 

<audio> 오디오 </audio>

 <audio src="media/spring.mp3" controls></audio>

     autoplay(자동재생) muted(음소거) loop(반복)

 

<video src="media/flower.mp4" controls> 비디오 </video>

 

 

<hr> : 구분선


* 목록 만들기  규칙x

<ul>  
     <li>리스트1</li>
     <li>리스트2</li>
     <li>리스트3</li>
</ul>
  • 리스트1
  • 리스트2
  • 리스트3

* 목록 만들기 규칙 O

<ol> 
     <li>리스트1</li>
     <li>리스트2</li>
     <li>리스트3</li>
</ol>

1. 리스트1

2. 리스트2

3. 리스트3

 

type =  1, a, A, i, I

start = '시작할 index 입력' 

colspan="2"  -> 행 공간 2

rowspan="2" -> 열 공간 2

 

<table> 테이블 만들기 </table>

 <caption> 테이블 제목 </caption>

 

<tr> 행 </tr>

<th>테이블 헤드 부분 </th>

<td> 열 </td>

<table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>

        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>

    </table>

반응형

'HTML&CSS' 카테고리의 다른 글

[CSS] 로그인 화면 만들기_0407 8교시  (0) 2023.04.07
[HTML&CSS] 포스터 만들기  (0) 2023.04.06
[HTML] INPUT 태그 연습  (0) 2023.04.05
[HTML] INPUT  (0) 2023.04.05
HTML 테이블 생성  (0) 2023.04.04