Web 03. 하이퍼링크, 아이디와 클래스, 폰트어썸 & 구글아이콘

Hyper link : 웹 문서, 웹 사이트 등의 URL연결시에 사용하는 태그이다. 외부연결시에는 타겟이 필요하다.  <a hre="URL" target="_blank">바로가기(그림은 배너)</a>

 

본 게시물 하단에 Div Tag에 대해서 소개하고 html문서를 공유합니다.

URL에는 웹 문서, 웹 사이트, 현재문서내 위-아래 바로가기, 전화번호(전화상담,문자상담),이메일,폰번호(010-0000-000 전화및문자 상담) 등을 연결해서 모바일 환경에서 자주사용 ※아이콘 주로 활용하는데 폰트어썸을 주로 이용한다. 앵커태그사이에는 글,그림,아이콘을 주로 넣는다. 외부연결시에는 타겟이 필요하다. 새창개념의 new, 빈 창/탭 개념의 _blank를 주로 사용한다.

앵커태그와 유사한 기능을 하는 자바스크립트 예외이다. 서브라임텍스트에서는 본 문서내에서 우클릭후 '오픈 인 브라우저'로 첫문서를 볼수있다.

임시링크 #은 맨위로 올리는 기본형이 된다. 앵커태그에서 #아이디는 원하는 위치로 직접이동하는 역할을 한다. 원페이지형 홈피에 주로 활용한다. 01.아이디 지정은 hr, div등에 주로 id="영문아이디 영어+숫자"형식으로 삽입해주고 표시한다. 프리미어 프로의 마커와 유사하다.#은 아이디 전용의 특수문자이다.

hyperlink.html

0.00MB

"위 파일을 다운로드 후 연습하세요."

글,이미지,박스모델에 페이지 연결기능을 목적으로하는 하이퍼링크는 일명 앵커태그(anchor)라고 한다. 페이지 연결 외에도 현재 문서내 상하이동 기능(위키백과같은 원페이지), 다운로드기능, 전자우편-전화-문자(스마트폰),회원가입등 프로그램기능 수행한다.

 

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com</a>

 

전화 및 문자와 메일보내기에도 적용된다. 내컴에서 테스트하면 안되고, 아래 링크들의 속성상 웹호스팅과 관련된 태그이다.

<a href="tel:01010041234">전화상담</a>
<a href="sms:01010041234">SMS문자</a>
<a href="mailto:ongolzin@gmail.com">E-mail</a>

 

현재 문서내 특정 아이디를 지정한 태그(Named Anchor)로 좌표이동(상하) TOP / Bottom

<!--같은문서내 특정 아이디 위치로 이동-->
<a href="#section2">Go to Section 2</a>

<!--아이디를 지정한 현재 위치가 브라우저 상단에 걸림-->
<h2 id="section2">Section 2</h2>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p> 

스타일(CSS)을 지정하면 멋지다!

보통 텍스트에 적용한 앵커태그는 CSS를 이용해서 일반 글씨와 구분해서 글씨색을 바꾸며, 밑줄친 앵커태그를 선을 안보이게하고, 마우스를 올리면 색상을 다르게 보이게하는 스타일을 지정하여 다른 변화를 줄 수 있다.

<style>
a:link { color:green; text-decoration:none; }
a:hover { color:orange; }
</style>

 

a앵커태그의 링크된 글씨들은(a:link) 글씨색을 녹색으로 주고;밑줄보이는 건 하지말자!  또한 앵커태그위에 올리면(a:hover) 글씨색상을 오랜지색으로 바꿔줘라는 스타일을 적용해보자.  아래는 w3school.com의 하이퍼링크 관련된 교재이니 참고해보자.

 

https://www.w3schools.com/html/html_links.asp

HTML Links Hyperlinks

 

 

---

Anchor  Vs  Other

앵커외 onclick 하이퍼링크 처리를 알아봅니다.

 

보통 링크를 걸면 <a href="address" target="_blank">링크명</a> 이 보통입니다.

일명 앵커태그, Anchor는 해상에서 선박정박용(주차하듯) 항구에 내리는 닻을 말합니다.

 

 

 

링크거는 가장일반적인 방법이지만, 어떤 대상에도 앵커태그를 이용하지 않고 자체내에 링크를 거는 방법이 있습니다. 자바스크립트의 링크처리방법인데, 아래와 같습니다.

 

 

 

자체창 바뀌는 링크(일명 셀프, 혹은 안써도되는 기본값)

onclick="location.href='URL'"

 

새창뜨는 링크(별도창)

onclick="window.open('URL')"

 

팝업새창뜨는 링크(별도 지정한 크기의 창)

onclick="window.open('URL','window_name','width=430,height=500,location=no,status=no,scrollbars=yes');"

 

현재페이지내 아이프레임등 원하는 네임의 대상뜨는 링크(name="haha")

onclick="haha.location.href='URL'"

 

 

 

 

 

적용해보면 아래와 같습니다. (커서모양도 첨부)

<img src="a.jpg"  onclick="window.open('URL')"   style="cursor:pointer">

 

일반적인 방법보다는 짧죠??

<a href="address" target="_blank"><img src="a.jpg"></a>

 

 

---

글씨가 아이콘으로 표현된 폰트어썸

디자인 아이콘인 SVG형태를 태그를 이용해서 서비스하는 세계적인 픽토그램 제공사이트. Pro버전과 무료버전있다. 버전 4이후에 버전 5 부터는 개인메일로 인증을 하고 적절한 코드를 받으면 사용가능하다.  오프라인에서는 괜찮지만, 도메인공간에서는 코드번호는 유일한 번호이니 사용이 제한될 수 있다.  아래는 버전4의 스타일규정파일 CSS를 연결하는 쉽게 구할 수 없는 link이니 head문에 삽입하고 테스트 할 수 있다.

 

01. CSS연결하기

head문에 삽입하는 폰트어섬 4 연결부분
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

02. 아이콘 적용하기

위 링크가 잘 삽입이 되었다면, 아래는 폰트어썸의 공식사이트에서 버전4아이콘 링크로 아이콘을 검색 후  바로 적용하고 확인하기 바랍니다.

https://fontawesome.com/v4/icons/

Font Awesome Icons

그림을 영어로 검색하거나 찾는다.

 

<i>태그 전체를 복사해 원하는 태그에 붙여놓는다.

 

H1태그내에 글자앞에 추가한 폰트어썸 아이콘

 

적용된 예시

 

 

 

구글의 심플하고 확장된 아이콘으로  구글아이콘

구글에서도 폰트어썸과 같은 아이콘을 웹/앱에 적용할 수 있는 개발자를 위한 솔루션을 개발하였습니다. 비교적 사용법은 폰트어썸과 유사합니다.

 

https://fonts.google.com/icons?hl=ko&selected=Material+Symbols+Outlined:person_celebrate:FILL@0;wght@400;GRAD@0;opsz@24&icon.category=Activities

Material Symbols and Icons - Google Fonts

---

 

클래스(class)와 아이디(id)

아이디는 유일하고, 특정 혜택이 있다. 반면 클래스는 다수의 공통의 특성을 이용할 수 있다.
진학반/취업반, 이과/문과, 영상디자인/프로그램 각각 클래스 10명 열심히 작업을 하고 있습니다. 아이디는 #, 클래스는 점 . 뒤에 이름(영어숫자) 스타일로 규정한다.
스타일규정은 독립된 스타일파일인 연결된 CSS확장자로 별도의 파일로 저장해서 사용한다. 헤드문에 스타일로 자체내에 들어가기도 한다.

예를 들어서 그림파일을 일부 클래스이름을 지정하고, 모서리를 둥글고, 그림자효과 처리하고 싶다. 글크기는 기본은 16px, h1은 3배정도의 크기 자동지정되있다. 폰트어썸은 글씨와 동일하다. 또 아이 태그에 일부 유튜브라던가... 색상을 바꾸고 싶다. 이럴때 클래스를 이용한다. 클래스명은 영문+숫자 순으로 띄워쓰기 없이 지정한다. 헤드문에서 스타일을 규정해보자.

 

head문에 삽입된 Style중 Point . 으로 시작되는 클래스들의 속성과 값들

위 본문내용 중에는 class="grim_1" 이 연결되어 보여진다. <i>태그인 폰트어썸에도 고유의 클래스가 적용되어 있다.

 

 

디비전 태그 개념

레이아웃을 위한 디비전 태그는 기존의 본문인 바디태그의 상위개념이다. 마치 드론과 레이어 구조와 같다. 클래스는 공통의 스타일, 아이디는 고유의 스타일을 적용할 수 있다. 클래스는 스타일태그내에 점으로 시작하는 이름(.name), 아이디는 샾으로 시작하는 이름(#name)으로 설정한다.  

 

우선, 본문인 body태그 안에 아래와 같은 div태그를 입력하고, id를 지정합니다. id   name은 영어+숫자 순서 입니다. 숫자가 앞서면 안되는게 기본원칙입니다.

 

아래는 head문 style내에

div 자체 박스 스타일///배색;안쪽여백;박스그림자;++크기;위치지정= right top left bottom: px; 
포지션★ absolute 절대위치/relative 상대위치 / fixed 변하지 않는 위치

/* 이 id 속해있는 제목1에 스타일을 부등호로 표기하여 규정합니다.///
글자그림자;바깥여백;*/

 

튜토리얼 영상에서 소개한 결과물은 아래 html 소스에 있습니다. 파일을 최신업데이트된 수업내용 웹문서를 다운로드 후 연습하세요.

 

 

fontawesome3_last.html

0.01MB

 

font-awesome-4.7.0.zip

0.64MB