HTML 기초 텍스트
HTML을 공부하는 많은 분들이 가장 궁금해 하시는 부분중 하나라고 생각됩니다.
바로 글, 사진 등에 링크걸기!
오늘 다뤄볼 내용은 텍스트 + 이미지에 링크를 삽입하는 방법입니다.
여기서 소개해 드릴방법은 이미지 + 텍스트에 동일한 방법으로 삽입하는 형태입니다.
"a href"라는 속성을 사용하게 되고, 지정된 형태로 링크를 삽입하는 형식입니다.
(이미지의 경우 이미지 맵 형식의 다른 방법이 있는데, 그건 따로 공유드리도록 하겠습니다.)
먼저, 기본형이 어떤지 알아보겠습니다.
텍스트 형식 : <a href="링크할 주소"> 설명글 등</a>
이미지 형식 : <a href="링크할 주소"><img src="이미지 경로></a>
두가지 방식 다 보시면, a href를 사용해서 주소를 넣고, 이미지의 경우에는 이미지 소스를 추가하는 방식을 띕니다.
순서대로 시작해 본다면
기본세팅
먼저 비주얼스튜디오코드에서 html을 작성하시고,
(혹시나 합니다만, 1행에서 ! + 엔터를 하면 동일하게 나옵니다)
title사이에 원하는 제목을 작성해 주시고, body 부분을 작성합니다
CSS추가하기(옵션)
오늘은 css부분을 조금 작성해 보았습니다
<style>이란 부분이고, 앞으로 작성하게 될 a 속성에 대해 컬러를 브라운으로 설정한 상태입니다
(스타일 시트에서는 명령어 뒤{}를 이용하여 속성을 작성하게 됩니다)
점점 익숙해지면, style을 조정하여 글의 사이즈, 컬러, 배경 그리고 폼의 형태 등 모든 부분을 조정하게 됩니다.
html은 뼈대를 만드는 작업이고, css는 뼈대 위를 덧붙이는 작업이 됩니다.
텍스트 링크 작성
<body>부분을 보시면 아주 간단하게 작성된 것을 확인하실 수 있습니다.
h1 = 큰 글자(제목용)
<a href="https://~~제블로그 상단메뉴> </a>
당연히 저 링크 주소가 들어갈 부분은 마음대로 작성할 수 있습니다.
(당연히 일반 웹 사이트 주소, 개인 블로그 전부 사용가능합니다)
이미지링크 작성
이어서 추가로 이미지 링크입니다.
이미지 링크부분도 다를것은 특별히 없고, 이미지 소스만 추가가 된 상태입니다.
<a href="https://bright-up.tistory.com/"><img src="이미지 소스 위치"></a>
(이미지 소스는 일전에 설명드린바 같이, 함꼐 작업을 하기위한 폴더 안에 위치해 주고 있으면, 하위 폴더에서 그림을 뽑아올 수 있게 됩니다.
꼭 images라는 이름의 폴더가 아니더라도 사용가능합니다)
<a>로 시작한 뒤 링크 주소 + 이미지 위치 까지 설정 완료 후</a>로 닫아주시게 되면 하나의 속성으로 잡히게 됩니다.
결과치를 확인해 보시면
텍스트 링크 결과치
갈색의 이미지 텍스트를 선택할 경우 위 사진과 같이 링크가 적용된 상태를 확인하실 수 있습니다.
이미지 링크 결과치
아래의 로고이미지를 클릭하게 되면 제 블로그 홈이 나오는 형태를 보실 수 있게 됩니다.
여기서 가끔 추가적으로 궁금해 하시는 사항들이,
요즘 블로그, 즉 홈페이지형 블로그에서 하는 이미지 부분을 클릭해서 각각의 카테고리로 들어가게 하는 링크를 하는 방법은?
이라는 질문이 있을 수 있습니다.
해당 방법에 대해서는 이미지 맵이란 형식으로 작성을 해야하며, 이미지 맵은 위치선정등 약간 까다로운 부분이 있기 때문에 별도로 정보를 공유드리도록 하겠습니다.
'HTML스터디' 카테고리의 다른 글
| HTML 5 :) HTML 폼 테그 활용하기! 체크박스 & 폼 요소 만들기 (1) | 2020.08.26 |
|---|---|
| HTML 5 :) HTML 에서 목록만들기! <ul> <ol><li> (0) | 2020.08.23 |
| HTML 5 :) HTML 시작과 텍스트 태그 공유! + 사진 추가하기 HTML에서 내 마음대로 글 수정하고 작성하기 (0) | 2020.08.22 |
| HTML 5:) 비주얼스튜디오 코드 기본세팅 웹 편집기 / HTML 독학 / 코딩독학 (0) | 2020.08.21 |
| HTML 5 CSS 3 :) HTML 5/ CSS 3란? 웹브라우저와 기초편 (0) | 2020.08.21 |
댓글