1. 태그와 요소
-시작 태그와 종료태그로 구성됨 (종료태그가 없는 것도 있다)
시작태그 내부문자 종료태그
(innerHTML)
<h1 title = "header" > HTML5 </h1>
- 대소문자 구분하지 않음
- 인용부호 ",' 구분하지 않음
- 속성값에 공란이 포함되어 있으면 반드시 인용부호를 써줘야 함
2. 주요태그 종류
- 블록태그 : p, h, div, ul,ol, table 등
항상 새로운 라인에서 시작함
브라우저의 왼쪽끝에서 오른쪽 끝까지 블록공간을 차지함
- 인라인태그 : span, em, img, a, strong 등
블록안에 삽입되어 블록 콘텐츠의 일부를 표현하는데 사용됨
3. <meta> : 메타데이터 태그
웹페이지의 저장권, 문자인코딩방식, 문서의 설명 등 다양한 문서에 대한 정보를 담음
name = " " content = " " 쌍으로 구성됨
4. body태그의 속성
topmargin = "수치"
leftmargin = "수치"
bgcolor = "색상"
text = "색상"
5. 주요색상
RGB
검정 black #000000
빨강 red #ff0000
노랑 yellow #ffff00
초록 green #00ff00
파랑 blue #0000ff
분홍 pink #ffc0cb
6. 기본태그
<br> 줄바꿈
<p> 단락을 나누는 태그
<h1>~<h6> 정해진 글자크기를 지원함 - 제목
<div> 임의 영역으로 분리함
<hr> 수평선을 그림. 종료태그 없음.
<pre> 입력한 형태로 출력해줌
<font> 글자의 속성을 지정하기 위한 태그
<blckquote> 들여쓰기
<img> 이미지 설정
<a> 하이퍼링크
7. 글자스타일 관련 태그
<b> 글자를 진하게
<i> 글자를 이탤릭체로
<s> 가운데 삭제표시
<u> 글자밑줄
<sup> 위첨자
<sub> 아래첨자
<small> 글자를 한단계 작게
<em> 크기단위의 배수크기
<strong> 강조
<address> 주소
8. 목록
<ul> 순서가 없는 리스트 : <li>
<ol> 순서가 있는 리스트 : <li>
<dl> 용어정의 (영역을 잡음)
<dt> 용어
<dd> 용어정의
9. 특수문자입력
< - <
> - >
& - &
c - © (동그라미c)
하트 - ♡
Body의 배경색, 글자색 지정
문서의 기본 바탕색(배경색)은 흰색, 기본 글자색은 검정색
topmargin ="숫자" : 상단 여백 지정
leftmargin = "숫자" : 왼쪽 여백 지정
right, bottommargin = "숫자" : 오른쪽, 아래 여백 지정
bgcolor = "색상" : 배경색을 지정
text = "색상" : 글자색을 지정
body의 글자색 배경색
<body background="https://kmug.co.kr/data/file/design/data_image_%ED%95%98%EB%8A%98%EB%B0%B0%EA%B2%BD.jpg" text="#FFB6C1"> 배경색(이미지) 지정 및 글자색 지정
<hr color=" #48D1CC" width="500px" align="left" size="5"> 구분선의 색상 및 굵기, 정렬, 사이즈
</body>
<a href=""> 이동할 글자 </a>
앵커(anchor)태그속에 하이퍼링크 url을 연결시킴
- 사이트 이동
- 페이지 이동
- 페이지의 특정위치 이동
<a href="http://www.google.co.kr">구글</a><p>
<a href="http://www.naver.com">네이버</a><p>
<a href="http://www.daum.net">다음</a><p>
동일한 속성을 지정한 곳이 여러개라면, 가까운 것이 우선 적용됨
<center>
center태그를 적용하면 가운데로 정렬 <br>
<p align="right">하지만, center태그 내부에서 다른 정렬방식이 지정되면<br>
안쪽에서 지정된 정렬방식이 우선 적용됨</p>
</center>
공백
HTML문서는 띄어쓰기, 줄바꿈이 되지 않음
공백을 연속해서 삽입해야 하는 경우
스페이스바를 아무리 사용해도
결국은 하나의 공백으로 브라우저엔 표시됨
이때, & 를 사용
특수문자
< > &
© ♡ ☞ "
단락들여쓰기
<blockquote> </blockquote>
글자꾸미기
<font>
<b> 굵게
<i> 이탤릭체(기울어짐)
<strong> 중요한것
<em> 강조
<sup> 윗첨자
<sub> 아래첨자
<mark> 형광펜
<font size="50" color="#778899" face="신명조">자바웹 개발과정</font><br>
<font size="1">크기1</font><br>
<font size="2">크기2</font><br>
<font size="3">크기3(기본), 검정색(기본),굴림체(기본)</font><br><br><br>
<font size="4" color=" #F08080" face="신명조">크기4, 라이트코랄, 신명조체</font><br>
<font size="5" color=" #90EE90" face="맑은고딕,굴림">크기5, 라이트그린, 맑은고딕/굴림체</font><br>
<font size="6" color="#40E0D0" face="궁서">크기6, 터콰이즈, 궁서체</font>
목록 만들기
순서없는 목록 : ul
순서있는 목록 : ol
순서없는 리스트
<ul type="disc"> disc(기본), circle, square
<li><a href="">목록에 링크걸기</a>
<li><a><img src="">목록에 이미지삽입</a>
<li>정의 목록
<ul>
<li>짜장면
<li>짬뽕
<li>탕수육
</ul>
</ul>
순서있는 리스트
<ol type="a"> 1, a, A, i, I
<li>List Item
<li>순서없는 목록과 순서있는 목록에 li는 공통으로 사용됨
<li type="1" value="5">type속성을 사용해서 목록번호/기호변경을 할 수 있음
<li>li는 들여쓰기와 줄바꿈 기능을 포함하고 있음
<li>종료태그없이 단독으로 사용가능
</ol>
'IT 공부 > HTML, CSS' 카테고리의 다른 글
| Ch5 테이블 (0) | 2022.05.18 |
|---|---|
| Ch4 하이퍼링크 (0) | 2022.05.18 |
| Ch3 이미지와 텍스트 (0) | 2022.05.18 |
| Ch2 경로 지정 (0) | 2022.05.17 |
| 시 페이지 만들기 (기본요소 활용) (1) | 2022.05.16 |