학원 51일차 - HTML
0
2021.06.08
ex05_body.html
배경색
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="skyblue"> <!-- bgcolor : 문서전체가 바디태그라고 생각해도 된다. -->
<!--
ex05_body.html
-->
<!--
이클립스
- Client Code > 자동완성기능 약함. (HTML, CSS, JavaScript)
- 웹개발 < 응용개발
<body> 태그
- 출력 내용을 담고 있는 최상위 태그
- 혼합형, 쌍태그
- 자식 : 태그 or PCDATA
<body> 속성
- 속성: 해당태그의 성질을 기술하는 것
- bbcolor : 배경색, background color
- background : 배경이미지, background image
HTML 색상 표현 방법
1. 색상명
- Named Color, Well-known Color
- 미리 약속된 몇가지 색상명을 사용(140여종) -> web color name
2. RGB
- Red + Green + Blue
- 각 색상의 단계 : 256단계(0 ~ 255, 00 ~ FF)
- 16,777,216가지 색상 표현 가능
- 16진수 표기
- 00 00 00(검정색) ~ FF FF FF(흰색)
- 정식 표기법 : #000000(검정색) ~ #FFFFFF(흰색)
- #FFF000 : 노란색
- #FF00FF : 분홍색
- #00FFFF : 하늘색
- #324578
- #FF55CC > #F5C : 반복되면 1자리 표현이 가능
- #FFFFFF > #FFF > #F(X)
- #FFFFFF, #999999, #555555 : RGB가 같으면 무채색
- #E44D26
-->
<h1>제목입니다.</h1>
<p>내용입니다.내용입니다.내용입니다.내용입니다.</p>
</body>
</html>
배경이미지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="images/catty01.png">
<!--
ex05_body.html
-->
<h1>제목입니다.</h1>
<p>내용입니다.내용입니다.내용입니다.내용입니다.</p>
</body>
</html>ex06_heading.html
제목 태그 & 인라인, 블럭태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
<hn>, heading
- 제목 태그
- 문서의 제목을 생성하는 태그
- n : 1 ~ 6, (제목 글자 크기 차이 > 중요도의 차이)
- 제목이 눈에 보이는 크기가 중요한게 아니라, 제목이 가지는 중요도가 중요하다(***)
- 쌍태그
- 권장사항 : 되도록 h1부터 사용, 중간번호부터 사용 금지
- 문서의 가독성 저하
- 검색 엔진의 수집 대상 > h1부터 탐색
모든 태그
1. 인라인 태그
- 본인의 앞뒤에 내용물과 한줄에 출력된다.(*******)
- <font>
2. 블럭 태그
- 본인의 앞뒤에 내용물과 다른 줄에 출력된다.(******)
- <h>~<h6>
-->
<h1>제목입니다.</h1>
일반 텍스트입니다.
<h2>제목입니다.</h2>
일반 텍스트입니다.
<h3>제목입니다.</h3>
일반 텍스트입니다.
<h4>앞의 내용입니다.</h4>
<h5 style="background-color: yellow;">홍길동입니다.</h5>
<h6>뒤의 내용입니다.</h6>
<font>안녕하세요</font>
<font color="red">홍길동입니다.</font>
<font>반갑습니다.</font>
<br>
<!-- PCDATA : 태그는 아니지만 성질이 인라인태그에 속한다. -->
안녕하세요.
홍길동입니다.
반갑습니다.
</body>
</html>
ex07_paragraph.html
문단 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목입니다.</h1> <!-- 좋은 방법 -->
<font size="6"><b>제목입니다.</b></font> <!-- 나쁜 방법 -->
<!--
<p>, paragraph
- 문단 태그
- 문단을 표현할 때 사용
- 쌍태그, 블럭태그
-->
<p>첫 번째로 가본 곳은 편의점. 들어가는 데까지는 수월했다. 문을 당겨야 했지만, 열린 상태로 고정이 돼 휠체어를 이용하더라도 쉽게 들어갈 수 있었다. 편의점 내 통로는 3곳이었지만, 휠체어가 들어갈 수 있는 통로는 한 곳에 불과했다. 홍윤희 무의 이사장은 “이 정도만 되더라도 편의점 중에선 85점이다. 비장애인은 갈 수 있지만, 장애인 혼자서는 아예 들어갈 수 없는 곳도 많다”고 설명했다.</p>
<p style="color: red;">인근 도넛 판매점에도 들어가 봤다. 최 전문리서쳐가 문을 당기고 들어가려 했지만, 고정되지 않아 어려움을 겪었다. 가게 내 점원이 문 앞까지 나와 문을 잡아줘 들어가는 것에 성공했다. 내부로 들어가 휠체어로 인해 다른 사람의 왕래에 불편을 줄 수 있는지, 의자를 빼고 앉을 수 있는지 등을 확인했다.</p>
<p>소극장이 모여있는 곳으로 이동해 보니 휠체어 이용자가 갈 수 있는 식당을 찾기는 점점 어려워졌다. 출입구까지 어렵게 갔어도 입구가 휠체어의 폭보다 좁아 들어갈 수 없는 식당도 있었고, 가게 입구 앞 문턱으로 가로막히기도 했다. 모든 사람이 손쉽게 이용할 수 있다고 생각했던 대부분 식당의 출입구에는 계단이 가로막고 있었다.</p>
<br><br><br><br><br>
<!--
이 방법을 사용해서 문단을 만들면 안된다!!
-> 모든 태그는 용도에 맞는 태그를 사용해야 한다.(******)
시멘틱웹
- 의미론적인 웹
- 모든 태그는 용도에 맞는 태그를 사용해야 한다. (****************)
-->
첫 번째로 가본 곳은 편의점. 들어가는 데까지는 수월했다. 문을 당겨야 했지만, 열린 상태로 고정이 돼 휠체어를 이용하더라도 쉽게 들어갈 수 있었다. 편의점 내 통로는 3곳이었지만, 휠체어가 들어갈 수 있는 통로는 한 곳에 불과했다. 홍윤희 무의 이사장은 “이 정도만 되더라도 편의점 중에선 85점이다. 비장애인은 갈 수 있지만, 장애인 혼자서는 아예 들어갈 수 없는 곳도 많다”고 설명했다.
<br><br>
인근 도넛 판매점에도 들어가 봤다. 최 전문리서쳐가 문을 당기고 들어가려 했지만, 고정되지 않아 어려움을 겪었다. 가게 내 점원이 문 앞까지 나와 문을 잡아줘 들어가는 것에 성공했다. 내부로 들어가 휠체어로 인해 다른 사람의 왕래에 불편을 줄 수 있는지, 의자를 빼고 앉을 수 있는지 등을 확인했다.
<br><br>
소극장이 모여있는 곳으로 이동해 보니 휠체어 이용자가 갈 수 있는 식당을 찾기는 점점 어려워졌다. 출입구까지 어렵게 갔어도 입구가 휠체어의 폭보다 좁아 들어갈 수 없는 식당도 있었고, 가게 입구 앞 문턱으로 가로막히기도 했다. 모든 사람이 손쉽게 이용할 수 있다고 생각했던 대부분 식당의 출입구에는 계단이 가로막고 있었다.
<br><br><br><br><br>
<!--
<hn>, <p>
- align 속성(alignment, horizontal, alignment) -> 수평 정렬 -> 내용물의 수평 정렬
- 값 : left(기본값) | center | right | justify(양쪽정렬)
-->
<h1 align="right">제목입니다.</h1>
<p align="right">인근 도넛 판매점에도 들어가 봤다. 최 전문리서쳐가 문을 당기고 들어가려 했지만, 고정되지 않아 어려움을 겪었다. 가게 내 점원이 문 앞까지 나와 문을 잡아줘 들어가는 것에 성공했다. 내부로 들어가 휠체어로 인해 다른 사람의 왕래에 불편을 줄 수 있는지, 의자를 빼고 앉을 수 있는지 등을 확인했다.소극장이 모여있는 곳으로 이동해 보니 휠체어 이용자가 갈 수 있는 식당을 찾기는 점점 어려워졌다. 출입구까지 어렵게 갔어도 입구가 휠체어의 폭보다 좁아 들어갈 수 없는 식당도 있었고, 가게 입구 앞 문턱으로 가로막히기도 했다. 모든 사람이 손쉽게 이용할 수 있다고 생각했던 대부분 식당의 출입구에는 계단이 가로막고 있었다.</p>
</body>
</html>ex08_hr.html
수평바
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
<hr>, Horizontal Rule
- 수평바
- 컨텐츠 구분자
- 문단과 문단을 구분하는 역할 > 컨텐츠와 컨텐츠를 구분하는 역할
- 단독태그, 블럭태그
-->
<h1>수업예제</h1>
<p>소극장이 모여있는 곳으로 이동해 보니 휠체어 이용자가 갈 수 있는 식당을 찾기는 점점 어려워졌다. 출입구까지 어렵게 갔어도 입구가 휠체어의 폭보다 좁아 들어갈 수 없는 식당도 있었고, 가게 입구 앞 문턱으로 가로막히기도 했다. 모든 사람이 손쉽게 이용할 수 있다고 생각했던 대부분 식당의 출입구에는 계단이 가로막고 있었다. </p>
<hr>
<p>소극장이 모여있는 곳으로 이동해 보니 휠체어 이용자가 갈 수 있는 식당을 찾기는 점점 어려워졌다. 출입구까지 어렵게 갔어도 입구가 휠체어의 폭보다 좁아 들어갈 수 없는 식당도 있었고, 가게 입구 앞 문턱으로 가로막히기도 했다. 모든 사람이 손쉽게 이용할 수 있다고 생각했던 대부분 식당의 출입구에는 계단이 가로막고 있었다. </p>
<!--
HTML 속성의 종류
1. 숫자
- 단위없음 : 픽셀(pixel) > 화상을 구성하는 최소 단위(단일 색상을 가지는 최소 단위.점), 절대값
- 단위있음 : % > 백분율, 상대값 > 부모 태그의 영역을 100%로 기준
2. 열거형
- 정해진 값 중 하나를 선택
3. 색상명
- 색상명 or RGB
4. 플래그
- boolean (있으면 true, 없으면 false)
5. 문자열
- 자유로운 기입
6. URL
- 특정 자원의 경로
<hr> 태그 속성
1. size : 선의 두께
2. width : 선의 너비
3. align : 본인의 수평 정렬(left, right)
4. color : 선의 색상
5. noshade : (컬러가 없고 선의 두께가 두꺼워야 적용됨), 선의 그림자 유무
6. title : 풍선도움말, Tooltip > HTML 모든 태그가 가지고 있다. (주로 control, 행동이 있는 태그에만 붙인다.)
-->
<hr size="2" width="50%" align="left" noshade title="구분선입니다.">
<p title="문단입니다.">소극장이 모여있는 곳으로 이동해 보니 휠체어 이용자가 갈 수 있는 식당을 찾기는 점점 어려워졌다. 출입구까지 어렵게 갔어도 입구가 휠체어의 폭보다 좁아 들어갈 수 없는 식당도 있었고, 가게 입구 앞 문턱으로 가로막히기도 했다. 모든 사람이 손쉽게 이용할 수 있다고 생각했던 대부분 식당의 출입구에는 계단이 가로막고 있었다. </p>
<p>소극장이 모여있는 곳으로 이동해 보니 휠체어 이용자가 갈 수 있는 식당을 찾기는 점점 어려워졌다. 출입구까지 어렵게 갔어도 입구가 휠체어의 폭보다 좁아 들어갈 수 없는 식당도 있었고, 가게 입구 앞 문턱으로 가로막히기도 했다. 모든 사람이 손쉽게 이용할 수 있다고 생각했던 대부분 식당의 출입구에는 계단이 가로막고 있었다. </p>
</body>
</html>ex09_style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 화면에 특징있게 보여지거나 의미를 지정할 때 사용 -->
<h1>물리적 모양을 강조하는 태그(의미는 중요하지 않음)</h1>
<b>볼드체입니다.</b><br><!-- 볼드체 -->
<i>이텔릭체입니다.</i><br><!-- 이탤릭체 -->
<u>밑줄을 긋습니다.</u><br><!-- 밑줄, underline -->
<strike>취소선을 긋습니다.</strike><br><!-- 취소선 -->
H<sub>2</sub><br><!-- 밑첨자 -->
MC<sup>2</sup><br><!-- 윗첨자 -->
<h1>의미를 강조하는 태그(물리적 모양은 중요하지 않음)</h1>
<strong>중요한 데이터입니다.</strong><br> <!-- 가장 중요한 정보에 쓰임 -->
<em>강조하는 데이터입니다.</em><br>
<mark>강조하는 데이터입니다.</mark><br>
<blockquote>인용구 데이터입니다.</blockquote><br> <!-- 외부에서 가져온 문장에 쓰임 -->
<code>int a = 10;</code><br> <!-- 프로그래밍 코드를 사용할때 쓰는 태그, 번역이 되지 않음. -->
<abbr>HTML</abbr><br> <!-- 축약, 약어 -->
</body>
</html>ex10_list.html
List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
List, 목록
1. <ol> + <li>
- 순서가 있는 목록
- <ol> : Ordered List
- <li> : List Item
2. <ul> + <li>
- 순서가 없는 목록
- <ul> : Unordered List
3. <dl> + <dt> + <dd>
- 용어 정의 목록
- <dl> : Definition List
- <dt> : Definition Term, 단어, 용어
- <dd> : Definition Description, 설명
-->
<h1>오늘의 할일</h1>
<ol type="A"> <!-- 모양을 바꿀 수 있다.(1, A, a, i, I) -->
<li>강아지 목욕시키기</li>
<li type="i">장보기</li>
<li>자바 복습하기</li>
<li>
개발 환경 설정하기
<ol>
<li>JDK설치하기</li>
<li>이클립스 설치하기</li>
</ol>
</li>
<li>조깅하기</li>
</ol>
<h1>오늘의 할일</h1>
<!-- 앞의 점: Bullet(disc, circle, square) -->
<ul type="disc">
<li>강아지 목욕시키기</li>
<li>장보기</li>
<li>자바 복습하기</li>
<li>개발 환경 설정하기</li>
<li>조깅하기</li>
</ul>
<dl>
<dt>Java</dt>
<dt>Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고 Java는 어쩌고 저쩌고</dt>
<dt>Oracle</dt>
<dt>오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고 오라클이 어쩌고 저쩌고</dt>
<dt>HTML</dt>
<dt>HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라HTML 블라 블라</dt>
</dl>
</body>
</html>ex11_link.html
링크, 타겟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ex11_link.html -->
<!--
링크, Link
- <a>, anchor
- 쌍태그, 인라인 태그
1. Link
2. Anchor
PCDATA
- 출력 내용 + 클릭할 대상
href 속성
- reference a hyperlink
- 이동할 URL
- 웹상에 존재하는 모든 종류의 파일은 링크 대상이 될 수 있다.
브라우저의 성질
- 링크 대상이 자신이 해석할 수 있는 데이터라면 해석해서 결과를 보여준다. 뷰어 역할
- HTML 뷰어 & 이미지 뷰어 & 텍스트 뷰어 & PDF 뷰어..
- 링크 대상이 자신이 해석할 수 없는 데이터라면 > 무조건 다운로드 시킨다. > 사용자 네가 알아서 처리해.. 난 몰라;;
-->
<h1>링크</h1>
<a href="http://naver.com">네이버(외부링크)</a>
<br>
<a href="ex10_list.html">10번 예제 페이지(내부링크)</a>
<br>
<a href="images/catty01.png">이미지</a>
<br>
<a href="필기.txt">텍스트 파일</a>
<br>
<a href="수업.zip">압축 파일</a>
<hr>
<!--
target 속성
- 열거형
a. _blank : 새로운 창에서 링크를 연다. 외부 링크로 연결
b. _self : 기본값, 현재창에서 링크를 연다. 내부 링크로 연결
c. _parent
d. _top
e. 프레임명
브라우저 주소창
- "google.com" -> "https://www.google.com" 자동으로 변환
URL
- 반드시 프로토콜(http://, https://)로 시작해야 한다.
http://
- Hyper Text Transfer Protocol
- HTML 문서를 전송하기 위한 통신 규약
-->
<a href="http://google.com">구글로 이동합니다.</a>
<a href="http://google.com" target="_blank">구글로 이동합니다.</a>
<a href="http://google.com" target="_self">구글로 이동합니다.</a>
<br>
<a href="#">빈링크(아직 행동이 정의되어 있지 않은 링크)</a>
<a href="#!">빈링크(아직 행동이 정의되어 있지 않은 링크)</a>
<hr>
<a href="ex12_link.html#item3">12번 예제의 3번 HTML 내용 보기</a>
<!--
href의 URL
1. ex12_link.html
- 페이지만 있음
- 앵커는 없음
=> 페이지의 최상단으로 이동
2. #item3
- 앵커만 있음
- 페이지는 없음
=> 현재 페이지의 앵커로 이동
3. ex12_link.html#item3
- 페이지#앵커
- 둘 다 있음
=> 페이지으로 이동하고 그 페이지의 앵커로 이동
4. #
- 페이지없음#앵커없음
- 둘 다 없음
=> 현재 페이지의 최상단으로 이동
-->
<a href="#">빈링크</a>
<a href="#!">빈링크</a>
</body>
</html>ex12_link.html
Link + Anchor
- 이름을 붙여서 스크롤이동하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
Link + Anchor
-->
<h1><a name="top">목차</a></h1>
<ol>
<li><a href="#item1">자바</a></li>
<li><a href="#item2">오라클</a></li>
<li><a href="#item3">HTML</a></li>
<li><a href="#item4">CSS</a></li>
</ol>
<h2><a name="item1">자바</a></h2>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p><a href="#top">맨위로 돌아가기</a></p>
<h2><a name="item2">오라클</a></h2>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p><a href="#top">맨위로 돌아가기</a></p>
<h2><a name="item3">HTML</a></h2>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p><a href="#top">맨위로 돌아가기</a></p>
<h2><a name="item4">CSS</a></h2>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p><a href="#top">맨위로 돌아가기</a></p>
</body>
</html>ex13_tag.html
인라인 태그, 블럭 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ex13_tag.html -->
<!--
인라인 태그 vs 블럭 태그
- 모든 태그는 위의 둘 중 하나에 속한다.
인라인 태그, Inline Tag
- 자신의 내용물을 인접한 다른 태그의 내용물과 같은 라인에 출력한다.
- 역할: 출력되는 구성 요소 역할. 내용물 역할
블럭 태그, Block Tag
- 자신의 내용물을 인접한 다른 태그의 내용물과 다른 라인에 출력한다.
- 자신의 내용물을 하나의 라인을 독점해서 출력한다.
- 너비 100%
- 역할: 출력되는 구조 역할. 레이아웃 역할
ex) <p>, <h>,<hr>,
태그 중첩 규칙
- 하나의 태그안에 또 다른 태그를 적는 경우..
1. 블럭 태그는 자식으로 또 다른 블럭 태그를 가질 수 있다.
2. 블럭 태그는 자식으로 또 다른 인라인 태그를 가질 수 있다.
3. 인라인 태그는 자식으로 또 다른 인라인 태그를 가질 수 있다.
4. 인라인 태그는 자식으로 또 다른 블럭 태그를 가질 수 없다.(***)
-> 부모의 성질에 위배되기 때문에 안된다.(***)
5. 블럭 태그 중 <p> 태그는 유일하게 자식으로 인라인 태그만 가질 수 있다.(블럭 태그는 가질 수 없다.)
-> 부모의 성질에 위배되기 때문에 안된다.(***)
<div> 태그(*****) - HTML 모든 태그를 통틀어 가장 많이 사용하는 태그(압도적 1위)
- division
- 블럭 태그
- 목적이 없는 태그. 용도가 정해져 있지 않은 태그 > 용도를 개발자가 정할 수 있다.
<span> 태그
- span
- 인라인 태그
- 목적이 없는 태그. 용도가 정해져 있지 않은 태그 > 용도를 개발자가 정할 수 있다.
-->
<div>블럭태그</div>
<div>블럭태그</div>
<div>블럭태그</div>
<span>인라인태그</span>
<span>인라인태그</span>
<span>인라인태그</span>
<hr>
<!-- 블럭 태그는 자식으로 또 다른 블럭 태그를 가질 수 있다. -->
<div>
홍길동입니다.
<div>또 다른 자식 블럭태그</div>
안녕하세요.
<p>블럭태그</p>
<h1>블럭태그</h1>
하하하하
</div>
<hr>
<!-- 블럭 태그는 자식으로 또 다른 인라인 태그를 가질 수 있다. -->
<div>
홍길동입니다.
<a href="#!">링크입니다.</a>
<b>볼드체</b>
<strong>중요한 데이터</strong>
</div>
<hr>
<!-- 인라인 태그는 자식으로 또 다른 인라인 태그를 가질 수 있다. -->
<span>
문자열입니다.
<a href="#!">링크입니다.</a>
</span>
<hr>
<!-- 인라인 태그는 자식으로 또 다른 블럭 태그를 가질 수 없다. -->
<!-- span의 성질: 인라인 태그 -> 자신의 내용물과 주변의 내용물을 한줄에 출력한다. -->
주변의 데이터
<span>
문자열입니다.
<div>블럭 태그는 올 수 없다.(에러!!!)</div>
문자열입니다.
</span>
주변의 데이터
<hr>
<!-- 블럭 태그 중 <p> 태그는 유일하게 자식으로 인라인 태그만 가질 수 있다. -->
<!-- 문단태그 내부에 블럭태그 사용 -> 문단이 쪼개져버림.. -->
<p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.<h1>제목입니다.</h1>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.<p>자식 문단입니다.</p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>
<hr>
<!-- 문단태그 내부에 인라인태그 사용 -->
<p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.<a href="#!">구글로 이동합니다.</a>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.<b>문단입니다.</b>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>
<p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>
</body>
</html>ex14_path.html
경로
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- <body background="./images/catty01.png"> --> <!-- 상대 경로 -->
<!-- <body background="/images/catty01.png"> --> <!-- 절대 경로 -->
<body background="http://image.yes24.com/goods/99534783/XL"> <!-- 외부 경로 -->
<!--
웹 페이지에서 다른 자원의 경로를 표현하는 방법
- URL 표기법
- Uniform Resource Locator, 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다.
- URI or URL
경로 표기 시 사용하는 구분자
1. \
- 역슬래시
- C:\class\client
- 파일 시스템에서 사용(드라이브명으로 시작하는 경로 표기법)
2. /
- 슬래시
- https://post.naver.com/viewer/postView.nhn?volumeNo=31333978&memberNo=6289885
- 웹에서 사용(http://로 시작하는 자원의 경로 표기법)
경로 표기법
1. 상대 경로(***)
- 현재 페이지가 있는 폴더를 기준으로 다른 자원의 경로를 표현하는 방법
- 누가 기준점이 되느냐에 따라 자원의 경로 표현이 달라진다.
- 항상 내가 기준이 된다. (나: 현재 페이지가 있는 폴더)
- './' 생략할 수 있다. (무조건이라서)
- ex) (나를 기준으로)앞자리에 있는 사람
a. '.' : 현재 페이지가 들어있는 폴더
b. '..' : 부모 폴더
2. 절대 경로(***)
- 어떤 폴더내의 파일에서 표현하던지 항상 기준점이 바뀌지 않는 표현
- 모든 파일들이 단 1곳을 기준점으로 정해놓고 표현
- 항상 '/'로 시작한다.
- '/': 최상위 루트 폴더를 뜻한다.
3. 로컬 경로(X)
- D:\class\java\test\test.java
- 웹에서 사용 안함
- 구형 브라우저들을 지원했으나 최근 브라우저들을 지원 안함
4. 외부 경로
- 다른 사이트의 자원 경로
- 프로토콜로부터 시작
- 가끔씩 필요할 때 사용(장점: 비용 절감, 단점: 안정성 미확보)
- http://
-->
</body>
</html>
모르면 괴롭고 알면 즐겁다.
0개의 댓글
관련 채용 정보
