Some Special Characters
Special Character를 참고하는 두가지 방법
- by an assigned numeric value (numeric entity)
- using a predefined abbreviated name for the character (called a named entity).
모든 character references는 & 로 시작하고 ; 로 끝나야 한다.
<p>All content copyright © 2021, Sejong University.</p>
or:
<p>All content copyright © 2021, Sejong University.</p>The word break (<WBR>)
<wbr> 태그(Word Break Opportunity)는 단어 중간에서 행바꿈될 수 있는(line-break) 위치를 정의할 때 사용한다.
길이가 굉장히 긴 단어의 경우 브라우저가 해당 단어를 잘못된 위치에서 행바꿈하지 않도록 <wbr> 요소를 사용하여 행바꿈될 수 있는 위치를 직접 명시할 수 있다.
특징
<wbr>태그는 일반적인 한글이나 영어에는 적용되지 않고 의미가 없는 문장에서 사용이 가능하다.<wbr>태그는 의미가 없는 문장이나 의미적 전달이 안되는 주소에서 줄바꿈을 원할 경우 사용한다.<wbr>태그는 줄바꿈 할 위치를 설정할 때 사용한다.<wbr>태그는 단어가 너무 길거나 원하는 곳에서 줄바꿈을 하고 싶을 때 사용한다.- 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 CSS의 word-break 속성을 사용한다.
WBR과 BR 태그의 차이
- 텍스트 줄바꿈을 원하다면
<br>태그를 사용한다.
텍스트 줄바꿈 할 지점을 원하다면<wbr>태그를 사용한다.
일반적인 텍스트의 줄바꿈을 원하다면 CSS 속성 word-break 속성을 사용한다.
호환성(Compatibility)
Links- Hyperlinks : Element
Links have three components
• tag: <a></a>
• href attribute: "http://www.sejong.ac.kr"
• title attribute: "Sejong University"
<a href="http://www.sejong.ac.kr/" title="Sejong University">Sejong University</a>The href Attributes
Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.
<a href="home.html" target="_blank">Link Text</a>결과: Link Text
Link opens in a new window/tab with target="_blank"
<a href="mailto:jamil@sejong.ac.kr">E-mail us!</a>결과: E-mail us!
Adding mailto: directly before the email address means the link will open in the default email program.
→ 이메일 주소 앞에 mailto: 를 붙이면, 메일을 보낼 수 있는 프로그램이 곧바로 열린다.
Relative vs. Absolute Paths for a Link
There are two ways to specify the URL:
1. Relative: paths change depending on the page the link is on.
- Links within the same directory need no path information. "filename.jpg"
- Subdirectories are listed without preceding slashes. "img/filename.jpg"
2. Absolute: paths refer to a specific location of a file, including the domain.
경로는 도메인을 포함하여 파일의 특정 위치를 나타낸다.
- Typically used when pointing to a link that is not within your own domain.
• 일반적으로 자신의 도메인 내에 있지 않은 링크를 가리킬 때 사용된다. - Example: http://www.sejong.ac.kr/
1. 상대경로
-
기준 : 현재 웹페이지의 소속 폴더가 기준점
-
.: 현재 웹페이지가 소속된 폴더 (생략 가능) -
..: 현재 웹페이지의 부모 폴더 -
자식폴더명 : 현재 소속된 폴더의 자식 폴더
-
현재 위치를 '나'로 기준을 삼고 상대를 찾는 표현
2. 절대경로
-
기준 : 누구나 다 알고있는 동일한 위치를 기준으로 상대를 찾는 표현
내가 현재 어떤 폴더의 페이지에 있든, 항상url이 동일한 것 -
'/' 기준 → '/' 는 웹사이트의 루트 폴더 → "http://localhost:8090"
-
'/WebClientTest' == 'WebContent'
3. 로컬경로
-
사용 안함
-
웹서버가 아니라 브라우저가 동작 중인 로컬 컴퓨터의 경로를 탐색
4. 외부경로
-
http://시작 -
남의 사이트 주소
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>상대 경로</h1>
<div><a href ="./ex04.htm">같은 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="ex04.htm">같은 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="./Member/list.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="Member/list.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="./Member/private/private.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="Member/private/private.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="../필기.txt">프로젝트 루트 폴더의 자원으로 이동</a></div>
<h1>절대 경로</h1>
<div><a href ="/WebClientTest/ex01.htm">절대경로</a></div>
<div><a href ="/WebClientTest/Member/list.htm">절대경로</a></div>
<div><a href ="/WebClientTest/Member/private/private.htm">절대경로</a></div>
<div><a href ="/WebClientTest/Member/list.htm">부모폴더의 다른 페이지 이동하기</a></div>
<h1>로컬 경로</h1>
<div><a href ="ex01.htm">1번예제 (상대)</a></div>
<div><a href ="/WebClientTest/ex01.htm">1번예제 (절대)</a></div>
<div><a href ="C:\Users\user\Desktop\Class\WebClient\WebClientTest\WebContent\ex01.htm">1번예제 (로컬)</a></div>
<h1>외부 경로</h1>
<div><a href = "http://naver.com">네이버 이동하기</a></div>
<div><a href = "http://www.naver.com">네이버 이동하기</a></div>
</body>
</html><A> 태그 이용
<A> 태그는 Anchor 의 약자로 닻을 의미하듯이 타겟으로 이동시키는 링크로서의 기능과 링크의 타깃이 되는 기능을 모두 수행한다.
먼저 이동을 시킬 곳(target)에 <A> 태그를 위치시키고 해당 엘리먼트에 "name" 속성을 지정해 준다.
그리고 또 다른 앵커태그를 생성하여 해당 "href" 속성을 추가하여 위 name을 지정해 주면 클릭시 위 <A> 엘리먼트 위치로 이동하게 된다.
<a href="#target"> </a> <!-- 클릭시 -->
<a name="target"> </a> <!-- 해당 엘리먼트 위치로 이동 -->