HTML
H(hyper)T(text)M(markup)L(language)
태그 정리
1. <h1>태그</h1>
<h1>글자크기가 가장 큼</h1>
<h2>두번째로 큼</h2>
숫자가 늘어 날수록 텍스트 크기가 줄어듬 보통 제목을 표시할 때 쓰는 태그
2. <strong>태그</strong>
<strong>태그는 어떤 글자를 강조하기 위하여 쓴다.
3. <a>태그</a>
<a>태그는 anchor 의로 닻, 연결하다를 의미 즉 링크를 연결할때 쓰인다
사용법은
<a href=”링크”></a>
target=”_blank” = 새로운 탭에 페이즈를 여는 법
title=”글씨” = 커서를 올렸을때 뜨는 제목
4. <ol>,<ul>,<li> 태그
<ol> 그룹핑 태그이며 숫자순서로 표기(order list)
<ul> 그룹핑 태그이며 비숫자순서로 표기(unordered list)
<li> 단어들을 리스트로 나눌 때 쓰는 태그(list)
5. HTML기본구조
<html>
<head>
<title>HTML-관련 기초문서구조</title>
<META charset="UTF-8"> 글자의 호환성, 기본적으로 UTF-8 로 지정
</head>
<BODY>
<H1>HTML 관련 구조</H1>
<ol>
<li>HTML</li>
<li>HEAD</li>
<li>body</li>
</ol>
<h2> 기본구조 이해</h2>
html-head(title)-body(H1,H2,H3/ol,ul...etc)
6. <!DOCTYPE html>이란
doucument type의 줄임말 어떤 형식의 태그를 쓰는지 부라우저에게 알려주는 것
HTML5 에 접어들면서 그냥<!DOCTYPE html> 이라고 짧게 선언하고 시작하게 됨
7. <p>태그</p>
<P>태그는 paragraoh의 약자로 단락을 나눌때 사용한다
단락의 여백의 크기는 css를 통해서 설정가능하다.
8. <br>태그</br>
br태그 줄바꿈하는 태그 Enter와 같은 역할
br로 디자인변경 해도 되지만 단락을 나눌 때는 p태그가 더 좋다.
왜냐하면 p태그로 단락을 감싸는 것 자체가 이것이 단락이다라는 정보표시 효과도 포함되어 있기 때문.
자체 디자인 변경도 CSS로 하는 것이 더 좋다.
9. <img>태그
<img src="img.jpg" height="300" alt="내용" title="이미지이름">
방식으로 사용하면된다.
10. <table>태그
- <table border="2"> 숫자에 따라 굵기가 달라짐
<tr>
<td>이름</td> <td>성별</td> <td>주소</td>
</tr>
<tr>
<td>최진혁</td> <td>남</td> <td >청주</td>
</tr>
<tr>
<t>최유빈</td> <td>여</td> <td>청주</td>
</tr>
</table>
- <table border="2"> 태두리
<thead> table head 이기 때문에 글씨가 진해짐
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td rowspan="2">청주</td>행병합<td>1000</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td> <td>1500</td>
</tr>
</tfoot>제일 밑에 데이터를 나타내줌
</table>
'WEB > HTML' 카테고리의 다른 글
| WEB part 1 (0) | 2022.03.08 |
|---|
