[웹1]
2강 - 기초 배우기2
01기초태그.zip
Site - New Site - 이름 쓰기, 사용할 폴더 선택 : 드림웨버에서 파일 열기 가능
Work space - Beginner
[ 복습 - xHTML 태그 기본 ]
1) 용어정리
태그(Tag) : <시작태그>내부문자</끝태그>
요소(Element) : 완성된 태그
속성(Attribute) : 태그에 추가정보를 부여할 때 사용, <태그명 속성=속성블럭 속성값/>
(ex. font size, font color / 이미지 태그 : <img src="경로"/> 등등)
주석 : 스스로 로딩되진 않고 코드의 설명이나 저작자의 설명, 표시 등이 들어가도록 만드는 영역
HTML : <!-- 주석내용 -->
CSS : /* 주석내용 */
2) 기본 태그
제목 : heading, 페이지를 대표하는 제목 및 타이틀
<h1> ~ <h6>, 일반적으로 h1 ~ h3 까지 사용
단락 : paragraph, <p>
줄띄움 태그 : line break, <br/>
공백 태그 : none break space, &nsbsp;
수평줄 태그 : <hr/>
3) 글자형태 꾸미는 태그 : 인라인엘리먼트(나란히 써짐)
b 굵은글자 bold
i 기울어진 글자 italic
ins 밑줄 글자 insert line
del 가운데 줄이 그어진 글자 delete line
sub 아랫첨자 subscript
sup 윗첨자 superscript
small 작은글자
* 기타사항
굵은 글자 : <strong>
기울기 글자 : <em>
strong과 b, em과 i는 시각적으로는 차이가 없지만
페이지상 의미가 중요한 내용을 다룰 때는 strong과 em을 사용한다.
* 예제 1
<head>
<title>글자형태 꾸미는 태그</title>
</head>
<body>
<h1>글자 형태 꾸미는 태그</h1>
<b>DreamWeaver</b>
<i>DreamWeaver</i>
<ins>DreamWeaver</ins>
<del>DreamWeaver</del>
<sub>DreamWeaver</sub>
<sup>DreamWeaver</sup>
<small>DreamWeaver</small>
<h2>strong, em 의 차이점</h2>
<strong>DreamWeaver</strong>
<em>DreamWeaver</em>
<p>strong과 b, em과 i는 시각적으로는 차이가 없지만 페이지상 중요 내용은 strong과 em을 사용한다.<br />
의미가 중요한 것들에는 strong, em을 사용</p>
</body>
</html>
4) 기본 목록
ol 순서가 있는 태그 ordered list
ul 순서가 없는 태그 unordered list
li 목록 요소 list item
* 예제 2
<head>
<title>Untitled Document</title>
</head>
<body>
<h1>목록 태그</h1>
<hr />
<h2>기본 목록</h2>
<h3>순차 목록</h3>
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
<h3>비순차 목록</h3>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>
</body>
</html>
5) 정의 목록
dl 정의 목록 태그 : 한칸(Enter) 띄우기 difinition list
dt 정의 용어 태그 : 띄어쓰기 없이 그냥 글 작성 definition term
dd 정의 설명 태그 : 자동 Tab 띄우고 글 작성 definition description
* 예제 3
<body>
<h1>목록 태그</h1>
<hr />
<h2>정의 목록</h2>
<dl>
<dt>정의 용어</dt>
<dd>정의 설명</dd>
<dd>정의 설명</dd>
<dd>정의 설명</dd>
</dl>
</body>
* 예제 4
<body background="tagex/images/bg.gif">
<h1>블루베리 파이</h1>
<h2>재료</h2>
<ul>
<li>8인치 파이 크러스트 :1개</li>
<li>신선한 블루베리 : 4컵</li>
<li>밀가루 : 1큰술</li>
<li>버터 : 1큰술</li>
<li>레몬즙 : 1큰</li>
<li>술설탕 : 1/2컵</li>
</ul>
<h2>요리법</h2>
<ol>
<li>구운 파이 크러스트에 블루베리 2컵을 부어두세요.</li>
<li>파이를 예쁘게 모양내서 덮으시려면 이때 미리 커팅해주셨다가 같이 구워두세요.</li>
<li>밀가루, 버터, 레몬즙, 설탕, 그리고 나머지 블루베리 2컵을 섞어준 뒤, 냄비에 넣고 중간불에서 끓여주세요. </li>
<li>블루베리가 터지면 불에서 내리고 파이에 부어주세요.</li>
<li>파이를 식히고 휘핑크림과 함께 곁들여드세요.</li>
</ol>
</body>
* 예제 5
<body>
<h1>우엉조림</h1>
<p>김밥 재료로도 좋고 밑반찬으로도<br />
효과 만점 영양 만점인 우엉 조림을 만들어 보세요.</p>
<ul>
<li>분량 : 4인분</li>
<li>요리시간 : 30분</li>
<li>칼로리 : 670cal</li>
</ul>
<h2>조리법</h2>
<ol>
<li>우엉은 껍질을 벗기고 알맞은 길이로 채를 썬다.</li>
<li>우엉을 식초물에 담구어 잡내와 색이 변하지 않게 한다.</li>
<li>프라이팬에 식용유를 넣고 살짝 볶는다.</li>
<li>간장, 설탕, 맛술, 물, 물엿과 우엉을 넣고 서서히 약한 불에서 조린다.</li>
<li>통깨를 뿌린다.</li>
</ol>
</body>
6) 세팅
File - Prefrences
7) 이미지 태그 : img
src 이미지 경로 지정
alt 이미지가 없을 때 나오는 글자
width 이미지 너비
height 이미지 높이
* 기타사항
상대 경로 : 강남역 9번출구
부산역ktx -> 지하철
절대 경로 : 5층 L강의실
www.naver.com
C:\Users\Administrator\Desktop\6시 이정은\dream\test\images
<img src="./이미지경로" /> : 상대경로, images파일 안에 type1 이미지
<img src="./images/type1.jpg" />
./ : 현재 위치 폴더
../ : 1단계 거쳐야 하는 폴더
../../ : 2단계 거쳐야 하는 폴더
<img alt="이미지설명" />
<img width="가로 사이즈" /> : 가로사이즈에 맞춰 세로사이즈도 비율에 맞춰 조정됨
<img height="세로 사이즈" /> : width와 같이 값을 줄 경우, 비율에 맞게 조정 안됨, 지정된 사이즈로 조정됨
8) 링크 태그 : anchor tag
<a href="링크 경로">링크 텍스트</a>
링크 경로 : http://로 시작
* 예제
<body>
<h1>링크 태그</h1>
<hr />
<h2>텍스트 링크</h2>
<a href="http://www.naver.com">네이버</a> 바로가기
<h2>이미지 링크</h2>
<a href="http://www.daum.net"><img src="images/link2.png" alt="" /></a>
<h2>파일 다운로드</h2>
<a href="images/file.zip">다운로드</a>
<h2>이메일 보내기</h2>
관리자에게 이메일 보내기 <a href="mailto:mineun67@naver.com">클릭</a>
</body>
댓글