190617_DAY46
<HTML.>
- 인터넷과 함께 성장한 언어
- 웹 문서를 만들기 위한 언어
- HyperText Markup Language
- HyperText
- 뛰어넘다 + Text
- 다른 문서 연결 텍스트
- 비순차적 텍스트
- 사용자 선택에 따라 관련 부분으로 이동하는, 조직화 문서
- Markup
- 표시하는 것, 구조적으로 하는 것
- 어디서부터 어디까지인지 표현하는 것
- HyperText
<html>
<head>
<!--
HTML 문서의 정보
타이틀, 작성자, 검색키워드
CSS, 자바스크립트 정의
-->
</head>
<body>
<!--
브라우저에 보일 텍스트 또는 이미지
-->
</body>
</html>
- 저장확장자 : .html .htm
- 태그와 속성 으로 구성
- 타 언어와의 차이점!
- 자바는
- System.out.println( button ) : 변수명
- System.out.println( " button " ) : String의 의미
- SQL은
- select button
- select ' button ' : charater의 의미
- HTML은
- button
- < button > : Tag의 의미
- 자바는
태그 ( Tag )
- < 텍스트 > : 부등호 괄호 <> 안에 텍스트가 들어 갈 때 태그!
- 종류
- 시작태그 < button >
- 끝태그 < /button >
- 빈태그 <hr / >: < hr >< /hr > >< 사이에 아무것도 , 공백도 없다. 문자 1도 없다 = < hr / >
엘리먼트 ( Element )
<table> <tr> <td> 기묭진 </td> <td> 이딘듀 </td> </tr> </table>
- table 엘리먼트
- table 태그가 포함하는 모든 자식요소까지 합친 용어
- table 태그
- < table >
- 속성과 값
- table 엘리먼트
속성 (Atribute)
시작태그 또는 빈태그에 위치
태그 또는 다른 속성과 공백(WhiteSpace)을 구분자로 구분
- WhiteSpace : 공백, 엔터, 탭
- 브라우저에서는 WhiteSpace가 스페이스 두번 탭 두번이어도 그냥 공백 하나로!
태그에 추가적인 성질을 정의
형식
<태그명 속성값 = 속성값> <태그명 속성명 = '속성값'> <!-- 작은따옴표, 큰 따옴표는 전혀 차이 없다. --> <태그명 속성명 = "속성값"> <!-- 인용부호 사용 권장 --> <table border = 1 cellpadding = '5' bgcolor = "yellow"> </table> <!-- border, cellpadding, bgcolor를 속성이라고 하고 1, 5, yellow를 속성값 이라고 한다 -->
만약 잘못입력하면, 에러가 발생하지 않고, 표시가 안된다!
웹 표준 사이트
수업 테스트 파일
참조사이트
한번 만들어 보자
<html>
<head>
<title> 문서 제목 </title>
</head>
<!-- 주석! -->
<body>
HTML 안녕~!
</body>
</html>
<html>
<head>
<title> 문서 제목 </title>
</head>
<!-- 주석! -->
<body>
HTML, <!-- 한개 이상의 space, tab, enter의 조합을 WhiteSpace 브라우저 상에서는 한칸으로 출력됨 -->
안 녕~! <!-- 이거시 스페이스 -->
<!-- 띄어쓰기 하고 싶다면 -->
<br>
br 한번
<br>
<br>
br 두번
<abc></abc> <!-- 사라졌다...! 브라우저에 등록되지 않은 태그는 무시하고 에러는 발생 안함, 화면 출력 안함 -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h7>h7 은 없는데 어떻게 나올까..? </h7>
<br>
<button> 눌러주세요 </button> <!-- 무조건 한칸 -->
<font color = "red" size = "7" face="궁서체">기묭진</font>
<font color = "ff00ff" size = "5" face="굴림">이딘듀</font>
<font color = "green" size="13" face="impact">Vicky Lee</font>
<br>
<b> 강조할땐 b 혹은 strong </b>
<br>
<i>눕고 싶으면 i</i>
<br>
<u> 밑줄은 u </u>
<br>
<del> 태그안에 줄친 글자는 del s strike </del>
<br>
5<sup>2(sub)</sup> log<sub>2(sub)</sub>
<br>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title> 태그 테스트 </title>
</head>
<!-- tag_test.html -->
<!-- <body bgcolor = "orange" text="red"> -->
<!-- <body background="ebi.jpg"> -->
<!-- 현재 HTML 문서와 같은 폴더에 이미지 있을 때에는 파일명 명시,
현재폴더의 하위폴더에 이미지가 있다면 하위폴더 이름이 -->
<body background="sub/ebi.jpg">
<!-- 상위폴더라면 "../ebi.jpg" -->
<a href = "#bottom" name = "top">아래로 이동</a>
<center>
<!-- 브라우저 출력될 내용들
문단(영역 )태그<p><div>와 영역 태그 <sapn>
-->
<!-- p와 div, span을 구별하자 -->
<font color="black">안녕하세요</font> <p>html p태그(블럭모드)입니다.</p>
<!-- 공백줄 생기고 라인 바뀜 -->
<hr>
안녕하세요 <div> html div태그(블럭모드)입니다. </div>
<!-- 공백줄 없이 라인 바뀜 -->
<hr>
안녕하세요 <span> html span태그(라인모드)입니다. </span>
<!-- 공백줄, 줄바뀜 없음 , 이 부분만 수정할때 사용하기 위해 씀 -->
<hr>
<!-- pre태그 : 블럭모드, 문서상의 공백(space, tab, enter) 유지해서 표현 -->
<pre>
동해물과 백두산이
마르고 닳도록
하느님이 보우하사 우리 나라 만세 ? < A >
</pre>
<img src = "ebi3.gif">
<hr>
<a align = "center" href="https://namu.wiki/search/%EB%94%A9%EB%93%80%EA%B0%80%20%ED%91%B8%ED%91%B8">
<img alt = "옆방에서 딩듀가..." src = "ebi2.jpg"
width = "400"
height="300"
border="10"
title = "딩꼬"></a>
</center>
<hr>
3이 4보다 작다!
3 < 4
HTML & 자바스크립트
<hr size="10" color="red" width="210">
<hr color="purple" size = 10 width="70%" align = "left">
<hr color="blue" size = 30% width="50%" align = "center">
<hr color="red" size = 10 width="70%" align = "right">
<!-- align 정렬! -->
<a href="#top">맨 위로 이동!</a>
<a name = "bottom"></a>
</body>
</html>
DL
- 정의목록의 데이터, 용어를 설명
- dt와 dd요소만 자식으로 가능
- dt는 인라인 dd는 블럭 따라서 dt안에 블럭요소 불가
DD
- 정의용어의 약자, 용어의 제목
DT
- 정의 설명, 용어를 설명할때
OL
- 순서 있는 목록
- ol요소 안에는 오직 li만 가능 다른 요소를 바로 넣을 수 없고, 넣으려면 li안에 넣어야 한다. li안에 ol중첩 가능
- 기본은 1부터 시작 start속성 주면 해당 숫자부터
UL
- 번호없는 목록 ( unordered list )의 태그
- desc, circle, square
LI
- 자동 줄 바꿈
TABLE 정렬된 형태로!
- TR 표의 줄
- bgcolor, width, height, align, valign
- TD 표의 칸
- TH 표의 제목
- bgcolor, width, border, cellspacing, cellpadding
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>테이블 태그 테스트</title>
</head>
<body>
<h3>테이블 태그 테스트</h3>
<table border = "1" bgcolor = "pink">
<tr bgcolor="skyblue">
<th>이름</th><th>나이</th><th>직업</th>
</tr>
<tr>
<td bgcolor = "yellow">기묜진</td><td>28</td><td rowspan="3">꼬집기 선수</td>
</tr>
<tr>
<td>이딘듀</td><td>1</td>
</tr>
<tr>
<td>이비키</td><td>2</td>
</tr>
<tr>
<td colspan="2" align = "center">학생수</td><td align = "right">3명</td>
</tr>
<h3>테이블태그 테스트</h3>
<table border="1" bgcolor="ddffdd" width="50%"
cellpadding="10"><!-- width="300" -->
<!-- tr:테이블의 행표현, th:열의 제목표현, td:출력 데이터 -->
<caption>Person정보</caption>
<tr bgcolor="skyblue">
<th width="20%">이름</th><th width="30%">나이</th><th width="50%">직업</th>
</tr>
<tr>
<td bgcolor="yellow">홍길동</td><td>13</td><td rowspan="3">학생</td>
</tr>
<tr>
<td>길라임</td><td>15</td>
</tr>
<tr>
<td>김주원</td><td>17</td>
</tr>
<tr>
<td colspan="2" align="center">학생수</td><td align="right">3명</td>
</tr>
</table>
<hr/>
<h3>테이블태그 테스트</h3>
<table border="1" bgcolor="ddffdd" width="50%"
cellspacing="10"><!-- width="300" -->
<!-- tr:테이블의 행표현, th:열의 제목표현, td:출력 데이터 -->
<caption>Person정보</caption>
<tr bgcolor="skyblue">
<th width="20%">이름</th><th width="30%">나이</th><th width="50%">직업</th>
</tr>
<tr>
<td bgcolor="yellow">기묜진</td><td>13</td><td rowspan="3">학생</td>
</tr>
<tr>
<td>이딘듀</td><td>15</td>
</tr>
<tr>
<td>이비키</td><td>17</td>
</tr>
<tr>
<td colspan="2" align="center">학생수</td><td align="right">3명</td>
</tr>
</table>
</table>
</body>
</html>
궁금상자
- Markup언어와 Markdown언어
Markup은 문서의 구조를 정의, tag로 둘러쌓여있음, 문서 골격에 해당하는 부분 작성
Markdown은 마크업 언어의 일종, 읽기도 쓰기도 쉬움 @ 같은 것이나 해쉬태그가 마크다운
궁금상자
- html에서 < > & 표시하고 싶으면?
< > & 쓰거나, 2바이트 전각문자 사용하면 됨
lt : Less Than
gt : greater Than
amp : ampersand
quot : 쌍따옴표
궁금상자
- br p nbsp는 뭐의 약자?
br : Line Break
p : paragraph
nbsp : non-breaking spaces
'클라우드 기반 웹 개발자 과정 공부 > HTML' 카테고리의 다른 글
190618_Day47 <HTML> <JavaScript 시작> (0) | 2019.06.18 |
---|