[웹1]
1강 - 기초 배우기1
워크스페이스 - 비기너 > HTML 1.0 Transitonal
Ctrl + Space Bar : 자동 코드
F12 : 웹에서 미리보기
<title>기초 태그 연습</title> : 탭의 이름
블럭엘리먼트 : 아래로 한칸 한칸 다음으로 넘어가는 것 ex) h1, p, table, ul, ol, li, div 등등
인라인엘리먼트 : 오른쪽으로 나란히 써지는 것 ex) font, img, a, label, 글자꾸미는태그 등등
<h1~6> : 제목 텍스트, 1이 가장 크고 6이 가장 작음
<font> : 텍스트 입력하겠다
<font color="속성값"> : font 소속, 텍스트 색깔
<font size="속성값"> : font 소속, 텍스트 크기
<br /> : <br>작성 시, 자동으로 <br />작성. 단독으로 쓰이며, 한 칸(Enter) 띄기
: 텍스트 안에 소속, 한 칸(Space bar) 띄기
<strong> : 굵은 글자
<em> : 글자 기울이기
<p> : 단락 묶기, 다음 텍스트 다음으로 넘어감(Enter)
<p align="center"> : p 소속, 단락 정렬
<div> : 구성 묶기
<body bgcolor="#E0C4C4"> : 사이트 배경 전체 색상
<body background="이미지"> : 배경 이미지
*<p> </p> : design에서 엔터로 한 칸 띄우면, br이 아닌 p코드가 들어감, 독립적인 구성으로 들어가서 안 좋음
* Desgin 창 - Shift + Enter : 코드 상, br이 들어감(br이 더 좋음)
[ 기본구성 ]
<html>
<head>
<title>기초 태그 연습</title>
</head>
<body>
</body>
</html>
[ 예제1 ]
<head>
<title>기초 태그 연습</title>
</head>
<body bgcolor="#EAD8D8" background="file:///C|/Users/Administrator/Pictures/photo-1445877156333-befcf3e25f07.jpg">
<p>Dream Weaver </p>
<h1>Dream Weaver</h1>
<h2>Dream Weaver</h2>
<h3>Dream Weaver</h3>
<h4>Dream Weaver</h4>
<h5>Dream Weaver</h5>
<h6>Dream Weaver</h6>
<p align="center">
<font color="red" size="5">Dream Weaver</font><br />
<font color="#0B20C8" size="+4"><strong><em>Dream</em></strong> Weaver</font>
</p>
<div>
<font color="#BD9393" size="+3">Dream Weaver</font>
<font color="#C61DCB" size="+2">Dream Weaver</font>
<font color="#11C49A" size="+1">Dream Weaver</font>
</div>
</body>
</html>
[ 예제2 ]
<head>
<title>기초 태그 연습</title>
</head>
<body>
<h1>p, br, div, em, strong 태그 익히기</h1>
<p>p 태그는 문단을 나눌 때 사용합니다.</p>
<p>문단 안에서 줄바꿈을 할 때에는 br 태그를 사용합니다.<br />
br 태그를 사용하면 문단 안에서 공백없이 줄바꿈 됩니다.</p>
<div>div 태그는 공백없이 구역을 나눌때 사용합니다.<br />
div 태그는 CSS를 이용하여 레이아웃을 배치 할 때 주로 이용합니다.</div>
<p><em>em 태그</em>는 텍스트를 기울임꼴로 표시하고,<br />
<strong>strong 태그</strong>는 진하게 표시합니다.</p>
</body>
</html>
댓글