HTML 문서의 기본 구조
<meta> : 브라우저에게 문서에 관한 정보를 줌.(내가 이 내용을 참조하겠다~)
시맨틱 태그
:이름만 봐도 의미를 알 수 있는 태그
<a> :하이퍼링크 삽입
<nav> : 문서 내 다른 페이지나 다른 문서로 연결. 위치에 영향을 받지 않음.
<article> :독립된 웹 콘텐츠 덩어리
<section> :맥락에 따라 주제별로 콘텐츠를 묶음(CSS묶음으로는 사용X)
<aside> :본문 이외의 사이드바(양옆이나 아래쪽에 표시)
<footer> :사이트 정보나 연락처 등을 포함(사이트 맨아래에 작게 있는거!)
<div> :여러 소스를 묶음(공간분리)
텍스트 태그
<h1> :제목표시. 숫자가 클수록 작아짐(h1>h2>h3>h4>h5>h6)
<p> :앞뒤로 빈줄이 생김.(텍스트를 감쌀수도 있지만 영역을 나누는 용도로만 쓸수도 있음)
<br> :줄바꿈(닫는태그없음)
<blockquote> :들여써짐
<strong>, <b> :굵게 표시
<em>, <i> :기울여짐
<u> :밑줄
<strike> :취소선
<tt> :타이핑체
<sup> :위첨자
<sub> :아래첨자
<big> :더 크게
<small> :더 작게
| 문자 엔티티 | 결과 | 설명 |
| | 공백 | |
| < | < | |
| > | > | |
| & | & | |
| " | " | |
| © | ⓒ | 저작권 |
| ™ | ™ | 상표 |
목록 태그
<ol>, <li>
- 순서
- 목록
- 만들기
<ol type="a" start="3">
<li>타입과 시작 위치를 정할 수 있다.</li>
<li>이 예시는 c번부터 시작된다.</li>
</ol>
<ul>, <li>
- 순서
- 없는
- 목록
=>기호,숫자 없애기
list-style: none;
<dl>, <dt>, <dd> : 제목(이름)과 설명(값) 형태로 된 목록
<dl>
<dt>이름(제목) 1</dt>
<dd>값(설명) 1</dd>
<dt>이름(제목) 2</dt>
<dd>값(설명) 2</dd>
</dl>
표 태그
<caption> :표 제목
<table> :표 전체
<tr> :행
<td> :셀
<th> :제목 셀(텍스트가 굵어짐)
표 속성
colspan, rowspan
<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>width = 너비
height = 높이
bgcolor = 배경이미지
align = 정렬방식
cellpading = 셀 안의 여백(테이블과 텍스트)
cellspacing = 셀 간의 여백(테이블의 안쪽선과 바깥쪽선)
border = 테두리의 두께
bordercolor = 테두리 색상
표를 그릴때는 브라우저가 행단위로 그리기때문에
왼쪽부터 챡챡!
제목하나에 두줄이 붙어잇으면 첨에 그려주고, 두번째부터는 (n,1)부터 그려주삼
표안쪽 마진 바깥쪽 padding(텍스트와 보더의 간격..)
Convertoi => svg(매끈한 벡터)로 바꿔주는 사이트
반응형넉김
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 반응형 웹으로 만들게~ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
대소문자 구분안하지만 소문자 작성 권장
'프론트' 카테고리의 다른 글
| CSS 고급 선택자 (0) | 2022.08.24 |
|---|---|
| CSS 레이아웃, 박스 모델, 배경, position (0) | 2022.08.22 |
| CSS 글꼴, 목록, 표 (0) | 2022.08.22 |
| HTML 이미지 오디오 비디오 하이퍼링크 (0) | 2022.08.20 |
| HTML 폼 (0) | 2022.08.20 |