1. HTML 기본 틀
<html>
<head>
<title>브라우저 상단줄에 표시 될 제목</title>
</head>
<body>
본문이 될 내용
<!– 주석문 -->
</body>
</html>* [Tab] 키를 사용하여 태그 정렬
* <html>…</html> 태그는 / 로 닫아줌
* <!--, --> 태그는 주석문
2. 배경색과 글꼴색
<html>
<head>
<title>배경색과 글꼴색 설정</title>
</head>
<body bgcolor=“red” text=“green”>
바디문 글꼴색 지정
<font color=“blue”>
해당 문장의 글꼴색 지정
</font>
</body>
</html>* Css에서 배경색 : { background-color:blue }
* Css에서 글꼴색: { Color:blue }
3. 배경 이미지 넣기
<html>
<head>
<title>배경 이미지 넣기</title>
</head>
<body background=“../폴더명/이미지명.확장자”>
</body>
</html>* ../은 폴더 바깥에 있을 경우 지정
* Css에서는 Body { background-image:url(폴더명/이미지명.확장자); }
4. “P, br, pre” 태그
<body>
<pre>
pre는 공백이 그대로 나타납니다
br은 Enter 기능을 수행합니다 <br>
p는 강제로 행을 내려줍니다 <p>
</body>* <pre> <br> <p>태그는 / 생략이 가능함
* <br>은 사용한만큼 적용됨
* <p>는 중복적용 안됨
5. Hn 태그와 폰트 사이즈
<body>
<h1> 타이포 크기를 조절합니다 </h1>
<font size=“2”> 타이포 크기를 조절합니다 </font>
<hr> hr 태그는 선을 추가할 때 사용하는 태그
</body>* <h1>부터 <h6>까지 사용가능
* <h1>이 가장 큼
* Hn 태그는 <p>와 <b>를 내포하고 있음
* <b>:bold
* Font size는 1~7까지 사용가능
* 7이 가장 큼
6. align 태그
<body align=“right”>
본문 내용이 오른쪽으로 정렬
</body>
<body>
<h1 aliagn=“center”> 해당 내용이 중앙으로 정렬 </h1>
<P aliagn=“left”> 해당 내용이 왼쪽으로 정렬 </p>
</body>* <align>: 정렬태그
* = center, left, right, bottom, top, middle
(1) align 태그가 가능한 태그
- hn, hr, img
- table (표 만들기)
- Tr, td, 소 (표 제목)
- div, p, span (그룹태그)
(2) 작성할 때 외향, 내향 태그 맞추어 주기
<div>
<p class=“동일한 위치에 작성”>
<li>
</li>
</p>
</div>
7. 본문에 이미지 넣기
<body>
<img src=“폴더명/이미지명.확장자”>
</body>* 이미지에 폰트 정렬(align=top / align=middle / align=bottom)
8. 이미지 사이즈 조정
<img src=“폴더명/이미지명.확장자”width=“~”height=“~”title=“..”alt=“”>
방법1. width=“100(%)”height=“200(%)”
방법2. hspace=“20”(원본 비율 유지)* title (툴팁): 말풍선 설명이 나옴
* alt : 사진 엑박 방지
9. 폰트 스타일
<font face=“굴림”>
<B> 굵게 </B>
<i> 이탤릭 </i> <em> 기울임 </em>
<s> 취소선 </s> <strike> 취소선 </strike>
<u> 밑줄 </u>
<TT>고정폭</TT>
<sup></sup> 위첨자
<sub></sub> 아래첨자
<big>큰 글자</big>
<small> 인용문: 웹 페이지 하단에 카피라이터, 대표자 등 입력시에 사용(필수 아님) </small>
<address> 주소, 연락처: 이탤릭체로 나타남 </address>* Css에서 폰트 스타일
{ font-style:italic;
font-weight:bold;
font-family:굴림; }
10. 하이퍼링크
<a href= "링크"> 내용 </a>
target="_blank" : 새로운 탭이나 새로운 창에 링크창이 열림
예시: <a href= http://www.name.com target="_blank"> 내용 </a>
target="_self" : (기본값) 현재창에 링크창이 열림 (뒤로 버튼으로 복귀)
target="_parent" : 현재 보이는 페이지의 부모 페이지 링크창을 연결했던 방식. 지금은 사용하지 않음.
target=＂_top＂ : 현재 보이는 페이지를 연결하는 바로 위에 창으로 열림. 지금은 사용하지 않음.
* 이미지에 하이퍼링크 삽입
<a href= http://www.name.com target="_blank"> <img src=“폴더명/이미지.jpg”> </a>* 홈페이지 사이트, 이메일, 문서 등 링크 첨부 가능
* 이메일: mailto:abc123@주소.com
'Python_WEB > HTML' 카테고리의 다른 글
| [HTML]Study 요약 정리 2 (0) | 2022.12.06 |
|---|---|
| [부스트코스]반응형 웹 - MOBILE 제작 퀴즈 (0) | 2021.03.21 |
| [부스트코스]반응형 웹 - TABLET 제작 퀴즈 (0) | 2021.03.21 |
| [부스트코스]반응형 웹 - PC용(기본) 제작 퀴즈 (0) | 2021.03.21 |
| [부스트코스]반응형 웹 소개 퀴즈 (0) | 2021.03.21 |
