Web 03. <a href="url">하이퍼링크, 그림글씨 폰트어썸(클래스,아이디)

Hyper link : 웹 문서, 웹 사이트 등의 URL연결시에 사용하는 태그이다. 외부연결시에는 타겟이 필요하다.  <a hre="URL" target="_blank">바로가기(그림은 배너)</a>  일반적인 하이퍼링크,  독특한 벡터형태의 그림글씨인 폰트어썸을 배우며 클래스와 아이디를 구분해 보는 시간을 갖습니다.

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

W3Schools.com

 

html05_2.zip

5.28MB

 

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

 

앵커, Anchor는 닻이라는 배가 정박할 때 사용하는 무쇠로 만든 도구이다.

 

 

글,이미지,박스모델에 페이지 연결기능을 목적으로하는 하이퍼링크는 일명 앵커태그(anchor)라고 한다.
네이버, 픽사베이 같은 외부 웹사이트, 웹페이지 연결 외에도 /  타겟이 없이 현재 폴더내 웹문서 이동-관련메뉴 링크가 많으면 네비게이션 메뉴가 되는 것 /  상하이동 기능(위키백과같은 원페이지), 압축파일 혹은 신청서 한글문서 같은 다운로드기능 / 전자우편-전화-문자(웹호스팅 환경에서의 스마트폰)   등 다양한 기능을 수행한다.

 

https://onepagelove.com/templates/free-templates

Free One Page Templates

 

 

<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)로
제목위 ID 에 적용한 좌표이동(상하)  / 맨위로 가기 TOP

---

클래스와 아이디를 알아야한다.

Class vs ID

영어반, 수학반 처럼 특정목적의 동일한 클래스의 중복된 유사요소에 적용하는 개념이 클래스이다.  영어와 수학을 학원에서 배운다면 중복된 클래스도 가능하다. 공백으로 구분해 뒤에 붙일 수 있다.  클래스명을 연관성있는 이름으로 정하되, 영문명+숫자 순으로 지정한다.  ex) ve_1, cad_01 태그에 class="ve_1 cad_01" 공간내 삽입한다.  CSS에서는 .ve_1{스타일속성과 값;}로 스타일 입력하면 반영한다.   

아이디는 특정한 영어+숫자로된 회원가입시에 처럼 유일한 아이덴티티를 갖는 고유 대상 하나이다!  클래스와는 다른 특정한 대상만 유일한 것이다.   아디디명을 연관성있는 이름으로 정하되, 영문명+숫자 순으로 지정한다.  ex)  이거 보라구,  태그에 id="bora" 공간내 삽입한다.  CSS에서는 #bora{스타일속성과 값;}로 스타일 입력하면 반영한다.   

 

---

<!--같은문서내 특정 아이디 위치로 이동 / 단순한 #은 페이지 최상위 TOP으로 이동시킴-->
<a href="#section2">Go to Section 2</a>
<a href="#">TOP</a> <!--맨위로-->


<!--아이디를 지정한 현재 위치가 브라우저 상단에 걸림-->
<hr id="section2">
<h2 >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>
html{scroll-behavior: smooth;} /*부드럽게 상하이동이 표현됨*/
a:link { color:white; background:green; text-decoration:none; } /*앵커 링크의 글색상과 밑줄없애기*/
a:hover { background :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태그내에 글자앞에 추가한 폰트어썸 아이콘

 

 

---

 

  .  vs #  

중복가능 클래스(class)와 유일한 아이디(id)

아이디는 유일하고, 특정 혜택이 있다. 반면 클래스는 다수의 공통의 특성을 이용할 수 있다.
정아라는 학생이 있다는데 그 학생은 학원클래스에  영어/ 영상디자인/웹디자인  등 3개 과정을  별도로 배울 수 있는 것이다. 클래스는 점 . 뒤에 이름(영어숫자)  /  유일한 아이디는 #  스타일로 규정한다.
스타일규정은 독립된 스타일파일인 연결된 CSS확장자로 별도의 파일로 저장해서 사용한다. 헤드문에 스타일로 자체내에 들어가기도 한다.

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

 

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

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

 

 

 

html06.zip

5.28MB

 

 

font-awesome-4.7.0.zip

0.64MB