본문 바로가기
HTML

[HTML]태그

by hans-j 2023. 1. 2.

<meta>  : 웹서버와 웹브라우저 사이에 주고받는 정보를 정의하는데 사용됨.
                       문서 자체의 특성을 나타냄

<title> :  상단 tab에 title 지정함

<title>이 부분이 tab에 나타남</title>

<link> : 필요한 스타일이나 아이콘 등 외부 문서를 html문서에 연결시킴
                이 부분을 수정해야할 경우는 거의 없다.

  <link href="style.css" rel="stylesheet" type="text/css" />

<span> : 영역을 나누는데 쓰임

 <span> div 태그와 달리 줄바꿈없이 영역만 나누는 span태그를 기억합시다 </span>

<div> : 영역을 나누는데 쓰임

 <div> 안녕하세요 <strong> 로또 당첨</strong> 되게 해주세요 </div>

<p> : 문단을 나누는데 쓰임 (div태그와 차이점은 p 이 친구의 공간이 좀 더 많이 생김)

<p>문단1</p>

<i> : 글자를 기울여서 표시하는 태그로, italic의 약자

<i>기울여서 표시 할 내용</i>
 <i class="fas fa-bars"></i>

예제처럼 외부에서 소스를 가져올 때 이 태그가 쓰임.

이 태그를 사용할 시 <head>태그안에 CDN (content delivery network )링크가 있어야한다.

외부에서 소스를 가져오는거니까!!!

<img> : 이미지 넣는데 쓰임. 단일 태그

<img src="https://flxt.tmsimg.com/assets/p16805962_b_v12_aa.jpg" width="200" height="250" />

작업 폴더에서 image폴더에 쓰고자 하는 이미지가 있다면 이렇게도 사용 가능!!
(alt는 이미지 표시가 안될 경우 대체 이미지로 설정)

<img src="../image/lion.png" alt="...">

<input> : 검색창처럼 데이터를 입력하는 상자가 생김. 단일태그

  <input type="text" placeholder="연락처를 남겨주세요">

<button> :  뭘까? 진짜 쉽다. 말 그대로 버튼 만듦

 <button>전송</button>

서버로 유저 정보를 전송 하기위한 버튼이니까 type='submit'

<audio> :  뭘까? 읽어보자. 오디오 만듦

<audio src="/assets/Hal.mp3" controls></audio>

<a> : 링크를 연결해서 여러 페이지로 이동할 수 있음 

       <a href="http://www.google.com"> 구글로 이동</a>

<table border = 'N'> <tr> <td> : 테이블 만듦

<table border='1'>
<thead>
         <tr>
            <td><strong> 질문 </strong></td>
            <td><strong> 답변 </strong></td>
          </tr>
    </thead>
    <tbody>
          <tr>
            <td> 1 + 1 = </td>
            <td> 창문 </td>
          </tr>
          <tr>
            <td>1 과 1 사이에 있는것은?</td>
            <td> 과 </td>
          </tr>
    <tbody>
</table>

제목 행 <thead>

일반 행 <tbody>

부산 행 train to Busan

<table>은 기본적으로 표에 틈이 존재함. 없애려면 border-collapse : collapse

vertical-align : top / bottom / middle 셀 안의 요소 상하정렬

<tr>
 	<td colspan="5" style="text-align: right;">총 가격 : 250원 </td>
</tr>

위의 코드는 5개의 행을 '병합'하고 글자를 오른쪽으로 옮긴 것!!

이렇게

<li> : list 만듦

  <li>아름다운 이땅에</li>
  <li>금수강산에</li>
  <li>단군할아버지가</li>
  <li>터잡으시고</li>

앞에 기호를 넣고 싶지 않다면 <li> <ol>태그 사용시 list-style : none 속성을 흔히 사용한다.

<ul> : 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용함

<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
    <li>차
        <ul>
            <li>녹차</li>
            <li>홍차</li>
            <li>자스민차</li>
        </ul>
    </li>
</ul>

 앞에 기호 부분이 생략되어 있기 때문에 ul 요소의 padding-left 속성의 값을 0으로 해줘야 여백이 사라짐. 

아니면 기본으로 padding값이 들어가있다.

저작자표시 비영리

'HTML' 카테고리의 다른 글

[HTML]부트스트랩+그리드  (4) 2023.01.15
[HTML]의미론적 태그  (0) 2023.01.14
[HTML]실습하기 좋은 웹사이트  (0) 2023.01.02
[HTML] 레이아웃  (2) 2022.10.03
[HTML] HTML의 기초  (0) 2022.09.30

관련글

티스토리툴바