이제 본격적으로 태그를 정리해보고자 한다.
먼저 소개 할 인터넷 홈페이지는 https://www.w3schools.com/ 이라는 곳이고, HTML을 표준화 하고 있는 W3C (World Wide Web Constorium, W3C) 에서 제작한 홈페이지가 아닌가 싶다.
위 사이트를 토대로 태그 하나하나씩 짚고 넘어가면 좋겠지만, 필자는 그리 시간이 많지 않고, 교육을 제공 할 수 있는 실력도 아니기 때문에, 많이 쓰이는 기본적인 태그들을 정리하고 CSS로 넘어가보고자 한다.
개인 프로젝트는...... 먼 산 이다........ ㅠㅠ 그냥 책만 보고 있습니다......
왠지 블로그에 업데이트 후 진도가 나가지 않을까 싶다..... 정리도 할겸....
1. <a>태그가 뭐야?
위 태그는 2번 글에서도 설명했지만, hyperlink를 만들어주는 태그다. 예를 들면, 사이트 이동, 파일 다운로드에 적용 시킬 수 있다.
2. <a> 태그의 속성 (Attributes)
속성이란 것은 <a>태그 내 활용 할 수 있는, 또는 적용 가능한 기능 or 옵션 정도로 생각하면 될 것 같다.
예를 들면, 사이트 이동시 새로운 브라우저 창이 뜨면서 이동 하는게 있겠다.
일단 속성이 많이 정의되어 있어 링크로 대체 하고 많이 쓰는 속성은 2가지 정도만 보이기 때문에 바로 예제에서 적용하고자 한다.
https://www.w3schools.com/tags/tag_a.asp
스크롤을 내리다 보면 Attributes 표가 나온다. Value에 관한 설명을 위해 태그구조를 다시 한번 살펴보면 아래와 같다.
<a(태그) href(속성, Attribute)="www.naver.com"(값, value)>네이버로 이동</a(태그)>
자, 이렇게 속성이 가져야 할 어울리는 재료를 넣어주는 것이 '값(value) 이다.
3. 예제 살펴보기
위 링크된 페이지의 스크롤을 조금 더 내리다 보면 Try it Yourself - Examples 가 나온다. 여기서 살펴보겠다.
Text에 Hyperlink를 거는 것은 위 2번 섹션에서 언급했기 때문에 넘어가겠다. ('()' 괄호안에 써준것들만 지우면 됩니다.)
Creat clickable image 이미지 링크 거는 방법의 예제를 보면 간단하다.
<a href="URL"><img src="URL"></a>
위와 같은 방법으로 <a> 태그 내용 안에 <img> 태그 내용을 넣어주면 된다. 이미지 크기 조정은 예제 보면 감이 오겠지만, img 태그 정리시 언급하겠다.
Open a link in a new browser window 예제를 살펴보면, 새로운 윈도우 창에 띄우는 법은 알게 되었을 것이다.
그러나 우리는 그것으로 멈추면 안된다. 값 하나하나를 다 집어넣어서 적용해보도록 하자.
태그 전부 복사해서 붙여넣고 value 값만 바꿔도 되고, 그냥 valuea만 바꿔서 테스트해봐도 좋다.
"_blank" 경우 새 브라우저에서 열리는 것은 확인 되었고,
"_self" 경우 자신의 영역에서 페이지가 바뀌는 것을 확인 할 수 있다. 프레임이 적용되어 있지 않다면 _top과 비슷하게 작용 할 것 이다. target 속성이 정의되지 않는 다면 이 옵션이 기본적으로 작용한다.
"_parent" 경우 자신의 부모 프레임에서 바뀌는데 <frame> 태그를 지양하는 HTML5에서 어떻게 써야할지는 잘 모르겠다.
"_top"의 경우 링크를 클릭한 기존 페이지에서 완전히 바뀌는 것을 확인 할 수 있다.
"framename"의 경우 <frame><iframe>태그 사용 시, frame name을 지정하여 지정된 name에 띄우는 것을 말한다.
Creat an email link 예제를 살펴보면, 아래와 같이 정의되어도 다를 건 없다. 과거도 지금도 윈도우내 메일 앱이 실행되다.
<a href="mailto:E-mail주소">Send email</a>
Create another email link 예제는 넘어가겠다. 잘 활용되지 않을 기능인 것 같다.
수신인을 넣고 참조인을 반영 할 수 있는 것으로 보이고, 메일 제목 까지 반영 할 수 있는 방법 인 듯 하다.
문자 사이의 공백이 있을 경우 HTML에서는 로 표현하지만, href 속성의 value 값에는 %20이 공백을 표현 하는 방법으로 보인다.
Creat a phone link 예제 역시 넘어가고자 한다. OS 앱이 연동되어야 한다.
<a href="tel:+국가번호 포함하여 전화번호 입력">+123423434</a>
Link another section on the same page 는 홈페이지 내용을 쭉 내려보다가 다시 상위로 올라 갈 때 사용하는 예제로 보인다.
소스를 살펴보면 <h2 id="top">Top of page! </h2>라는 코드에 id=top 이라고 지정한듯한 문구가 보이고 하단 <a>태그는 <a href="#top">Go to top</a> 이라고 작성한 코드가 보인다. 대충 감이 오지 않는가?
바로 id를 top으로 지정한 <h2> 태그로 이동하라는 코드인 것이다. 그러니까 Top of page! 라는 문구로.
Link to a JavaScript 예제는 JavaScript에 대해 아직 배운바 없으나 이렇게 사용 할 수 있구나라고 생각하고 넘어 가자.
자바스크립트가 요즘 영역이 굉장히 넓어졌다고 해서 필자도 공부해볼 예정이다.
'개발노트 > HTML5 정리' 카테고리의 다른 글
6.<ul><ol><li><dl><dt><dd> 태그 정리 (0) | 2019.12.29 |
---|---|
5.<p> <br> <pre> 태그 정리 (0) | 2019.12.25 |
4.<h> 태그 정리 (0) | 2019.12.22 |
2. HTML5 태그 성격 2가지. (0) | 2019.11.30 |
1. HTML5 기본 구조(기본 형식) (0) | 2019.11.23 |