HTML5 하이퍼 링크/ 이미지 링크/ 텍스트 링크

<Today's Goals>

• 하이퍼 링크
• 이미지 링크
• 텍스트 링크

<What i learned>

• background-color 변경 할 때 html color codes에서 가져올 때 #을 꼭 앞에 붙여야한다. (#FEFCAC)
• images폴더에서 이미지 가져올 때 같은 레벨에 있는 폴더에서는 상위폴더를 찍고 와야한다.
  이때는 '..'으로 표시한다. ex) < img src="../images/jellyfish.jpg" >

<Questions>

Q:표 안의 텍스트 정렬하는 방법
A:<td style="text-align:left/center/right"> <td>말고 <table>,<thaed>,<tbody>,<tfoot>에도 적용 가능.

Q:이미지 옆으로 텍스트가 오도록 정렬하는 방법
A:

<img align="left/right" >로 위치 지정. <br clear="left/right"/>를  정렬하고자 하는 텍스트 밑에 태그해서 범위를 지정. 안 붙였더니 그 뒤에 다른 텍스트들까지 전부 정렬되어버림.

+ 추가 :  짧은 단어 같은 경우는 태그를 이용하면 inline속성으로 자연스럽게 옆으로 정렬된다.

가장 간단한 방법은 {float:left} 혹은 {float:right}를 사용해서 정렬하는 방법이다.

<p>태그를 사용한 경우는 block이기 때문에 정렬을 따로 해줘야한다. 이럴 때 {float:left} 혹은 {display:flex},{flex-direction: row}로  가로 정렬을 해준다.

---

이미지와 하이퍼링크

• imageimg src 사진 첨부, width와 height 사용해서 사이즈 수정
• hyperlink

  속성	설명
  href	링크한 문서나 사이트의 주소 입력
  target	현재창 또는 새창으로 열 수 있도록 위치 지정
  download	링크한 내용 다운로드
  rel	현재문서와 링크한 문서의 관계
  hreflang	링크한 문서의 언어 지정
  type	링크한 문서의 파일 유형

  텍스트 링크 만들기
  style로 텍스트 링크 color 변경 블로그 바로가기 target 속성

  속성 값	설명
  _blank	링크를 새 창이나 새 탭에서 열기
  _self	target기본값 링크가 있는 화면에서 열기
  _parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
  _top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시

  이미지 링크 만들기

a,href를 사용해서 링크 만들기

figue와 figcaption을 이용