-
[1일차 1~2교시] 웹표준 수업 - html의 기초. 메모장에서 웹페이지 만들기!N스크린하이브리드앱과정/HTML&CSS 2013. 7. 15. 09:45
하이퍼텍스트마크업랭귀지(html)의 줄임말이다.
보이지 않는 특성의 <head>
보여지는 특성의 <body>로 이루어져 있다.
*저장하는 법
*html 웹페이지 만들기
<html>
<head>
</head><body>
반갑습니다. 잘 부탁드립니다. 잘해봅시다.
</body></html>
*타이틀 넣기 - <title>
<html>
<head>
<title>덥지만 상쾌한 기분으로:::::::::::</title>
</head><body>
반갑습니다. 잘 부탁드립니다. 잘해봅시다.
</body></html>
*줄 바꾸기(엔터효과) - <br>
<html>
<head>
<title>덥지만 상쾌한 기분으로:::::::::::</title>
</head><body>
반갑습니다.<br>잘 부탁드립니다. 잘해봅시다.
</body></html>
*단락 바꾸기 - <p>* 여러개 중복해서 쓸 수 없음
<html>
<head>
<title>덥지만 상쾌한 기분으로:::::::::::</title>
</head><body>
반갑습니다.<br><br><br>잘 부탁드립니다.<p>
잘해봅시다.
</p>
</body></html>
*폰트 넣기 - <font>* 속성="값" 옵션 적용
★ 옵션 종류 : <color>컬러 지정. <face>글씨체 지정.
예제01 - <color>
<html>
<head>
<title>덥지만 상쾌한 기분으로:::::::::::</title>
</head><body>
반갑습니다.<br><br><br>잘 부탁드립니다.
<p>잘해봅시다.
</p>
<font color="red">바꾸고 싶은 글자</font>
ㄷㄹㄷㄹㄷㄷ
</body></html>
예제02 - <face>
<html>
<head>
<title>덥지만 상쾌한 기분으로:::::::::::</title>
</head><body>
반갑습니다.<br><br><br>잘 부탁드립니다.
<p>잘해봅시다.
</p>
<font color="red" face="궁서체">바꾸고 싶은 글자</font>
ㄷㄹㄷㄹㄷㄷ
</body></html>
*폰트 사이즈 = 1~8까지 지정 가능!
<html>
<head>
<title>덥지만 상쾌한 기분으로:::::::::::</title>
</head><body>
반갑습니다.<br><br><br>잘 부탁드립니다.
<p>잘해봅시다.
</p>
<font size="1" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
<font size="2" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
<font size="3" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
<font size="4" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
<font size="5" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
<font size="6" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
<font size="7" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
<font size="8" color="red" face="궁서체">바꾸고 싶은 글자</font><br>
ㄷㄹㄷㄹㄷㄷ
</body></html>
*폰트컬러 지정하기
"#0000ff" <- 숫자 6자리로 구성. 앞에서부터 2개씩 R, G, B순.
"#0000ff" <- 파란색
"#00ff00" <- 초록색
"#ffff00" <- 빨강+초록 = 노랑
"#555555" RGB비율이 같을 때 = 회색 나옴네이버에서 "html 색" 검색. 마음에 드는 코드 집어넣으면 됨. 여긴 256색 정도밖에 없음.
*bgcolor 설정(배경색 지정하기) - 바디 부분에서 설정하면 됨.
<body bgcolor="#FFC6FF">
*표 만들기 <table>
★ 옵션 종류 : <border="3"> <- 표 두께 지정
예제01
<html>
<head><title>표 만들어보기</title>
</head><body>
<table border="3">
<tr>
<td>월</td>
<td>화</td>
<td>수</td>
</tr>
</table>
</body>
</html>예제02 - 바로 밑에 표를 만드려면 <tr>그룹을 한번 더 만들면 됨.
<html>
<head><title>표 만들어보기</title>
</head><body>
<table border="1">
<tr>
<td>월</td>
<td>화</td>
<td>수</td>
</tr>
<tr>
<td>목</td>
<td>금</td>
<td>토</td>
</tr>
</table>
</body>
</html>*이미지 넣기 - <img> <- body안에 들어감. </img>가 없음!
옵션 : src="절대주소(상세히 나와있는 주소)"
<html>
<head><title>네이버 로고이미지 불러오기</title>
</head><body>
<img src="http://img.naver.net/static/www/u/2010/0611/nmms_215646753.gif">
</body>
</html>상대경로 이용하기
☆ html이 저장된 같은 경로에 있는 경우
<img src="01.jpg">
☆ 다른 폴더에 있는 경우(하위폴더) <- "01" 폴더를 따로 만들어 주었다.
<img src="01/01.jpg">
와 같이 지정해주면 된다.
**연습예제**
소스<html>
<head>
<title>kkc 안녕하세요</title>
</head>
<body>
<font size="1" color="red" face="궁서체">안녕하시니<br>
<font size="5" color="00ff00" face="궁서체">슬픔만은 아니겠죠<br>
<table border="1">
<tr>
<td>월</td>
<td>나</td>
<td>다</td></tr>
<tr>
<td>라</td>
<td>마</td>
</tr>
</table>
<img src="https://t1.daumcdn.net/cfile/tistory/0378B64351E3591328">
</body>
</html>'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
[5일차] 웹표준 HTML: 멀티미디어 파일 삽입 (0) 2013.07.19 [4일차] 웹표준: 테이블 대신 리스트로 html 구현하기_외 4종 (0) 2013.07.18 [3일차]웹표준 수업: 표 직접 만들어보기. (0) 2013.07.17 [2일차] 웹표준 수업: html의 다양한 기능과 예제를 알아보자! (0) 2013.07.16 국가기간전략사업 N스크린..(생략)과정 수업시간표 및 상세 내용 (0) 2013.07.15
