[블로그 글쓰기] 버튼 만들기

버튼 만들기

오늘은 글을 작성해보며 이미지 링크버튼을 생성하려 했다.

HTML을 오랫만에 접한터라 어렴풋이 기억난 <a>태그를 검색하여 해당 부분을 사용하려했다.

<a> 태그

• 다른 정보를 불러 올 수 있는 엘리먼트
• 링크를 연결하여 해당 경로로 이동이 가능하다.

<a href = "#...." data-role="button">버튼이름 혹은 이를 대체할 이미지a>

* 예제에서 href(hypertext reference)는 연결할 주소를 지정하는 속성이다.

* "data-*"속성은 자바스크립트의 부분이며 엘리먼트의 정보를 저장할 수 있도록 해준다. (제외해도 된다)

 

<img> 태그

• 이미지를 띄우는 태그이다

<img id="해당 객체 전용 아이디" title="이미지 이름" src="표시될 이미지 소스 링크" alt="이미지 위에 마우스를 올리면 나오는 작은칸에 보일 설명란" width="너비" height="높이" border="외각선 굵기" />

---

여기서 좀 새롭게 알게된 사실이 <a>태그로 링크를 만들고 해당 링크를 글작성 중 엔터를 누르면 웹에서 알아서 해당링크의 <figure>를 만들어준다.

위 이미지가 <버튼>, 아래 이미지가 자동 생성된 <figure>

<figure> 태그

• figure는 사진, 이미지, 다이어그램 등을 감싸는 요소이다.

<p>&nbsp;</p> <-- Non-breaking Space의 약자로 공백(Spcae)을 나타내어 준다. --> 
<p style="text-align: center;"> <-- 중간 정렬을 사용하는 문단 (p = paragraph) --> 

<figure id="og_1587808412873" contenteditable="false" data-ke-type="opengraph" data-og-type="book" data-og-title="기초 수학과 물리(게임 프로그래머를 위한)" data-og-description="서평을 찾을 수 없습니다." data-og-host="books.google.co.kr" data-og-source-url="https://books.google.co.kr/books/about/%EA%B8%B0%EC%B4%88_%EC%88%98%ED%95%99%EA%B3%BC_%EB%AC%BC%EB%A6%AC_%EA%B2%8C%EC%9E%84_%ED%94%84%EB%A1%9C%EA%B7%B8.html?id=5IeyMQAACAAJ&amp;source=kp_cover&amp;redir_esc=y/" data-og-url="https://books.google.com/books/about/%EA%B8%B0%EC%B4%88_%EC%88%98%ED%95%99%EA%B3%BC_%EB%AC%BC%EB%A6%AC_%EA%B2%8C%EC%9E%84_%ED%94%84%EB%A1%9C%EA%B7%B8.html?hl=ko&amp;id=5IeyMQAACAAJ" data-og-image="https://scrap.kakaocdn.net/dn/o4SyG/hyFNJJLohi/FqkkYr3Kx3hqktk2einZSk/img.jpg?width=128&amp;height=183&amp;face=0_0_128_183">
  <a href="https://books.google.co.kr/books/about/%EA%B8%B0%EC%B4%88_%EC%88%98%ED%95%99%EA%B3%BC_%EB%AC%BC%EB%A6%AC_%EA%B2%8C%EC%9E%84_%ED%94%84%EB%A1%9C%EA%B7%B8.html?id=5IeyMQAACAAJ&amp;source=kp_cover&amp;redir_esc=y/" target="_blank" rel="noopener" data-source-url="https://books.google.co.kr/books/about/%EA%B8%B0%EC%B4%88_%EC%88%98%ED%95%99%EA%B3%BC_%EB%AC%BC%EB%A6%AC_%EA%B2%8C%EC%9E%84_%ED%94%84%EB%A1%9C%EA%B7%B8.html?id=5IeyMQAACAAJ&amp;source=kp_cover&amp;redir_esc=y/">
	<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/o4SyG/hyFNJJLohi/FqkkYr3Kx3hqktk2einZSk/img.jpg?width=128&amp;height=183&amp;face=0_0_128_183');">&nbsp;</div>
	<div class="og-text">
		<p class="og-title">기초 수학과 물리(게임 프로그래머를 위한)</p>
		<p class="og-desc">서평을 찾을 수 없습니다.</p>
		<p class="og-host">books.google.co.kr</p>
	</div>
  </a>
</figure>

&nbsp;

• &nbsp;는 공백을 나타내는 특수문자 기호이다.

 

&lt; .... &gt;

• &lt;와 &gt;는 괄호를 나타내는 특수문자 기호이다.
• &lt;는 "<"를 &gt;는 ">"괄호를 나타내는 기호이며 html코드에서 괄호는 태그를 나타내는 방법이기에 생겼다.