공부를 하자!

HTML 코딩을 할 때 어떠한 글을 누르거나 이미지를 클릭하면 다른 화면으로 넘어가는 게 일상에서 너무 많이 사용해서 그런가 그런가 보다! 했는데, 배우고 나니 신기했습니다!ㅋ 글을 누르면 내가 만든 혹은 누군가가 만든 다른 영역으로 넘어간다는 게... 생각해보면 신기해요!! (강요! 강요!ㅋ)

그런데 신기한 만큼 어렵지는 않습니다!ㅋ 비전공자도 누구나 따라 할 수 있을 만큼 쉽습니다!ㅎ

HTML 이미지 링크 삽입하는 방법

우선 HTML 이미지 링크를 걸기 위해서 2가지 태그가 필요합니다.

1. <a href></a> = 해당 주소로 이동할 수 있도록 만들어주는 태그

2. <img> = 이미지를 넣을 수 있도록 만드는 태그

형식은

<a href="이동할 주소"><img src="이미지 주소"></a> 이렇습니다.

"이동할 주소"에 누르면 이동 '될' 주소를 넣어주고, "이미지 주소"에는 '넣고 싶은' 이미지를 넣어주면 됩니다.

이미지를  넣는 방법

https://skyblue606.tistory.com/14

 

[HTML]이미지 넣는 방법&이미지 크기 변경

오늘은 html에서 이미지를 넣는 방법을 배웠습니다! 글로만 채워지던 화면에 이미지가 들어가네요! 태그만으로 이미지가 나온다는게 정말 신기하네요..ㅎ 이미지 태그는

, image의 줄임말이라고 합니다..

skyblue606.tistory.com

HTML 이미지 링크를 위해 알아야 할 태그

• href : 연결하고자 하는 url 주소

• Target : _blank, _self, _parent, _top

Target은 이동할 창을 어떤 방법으로 열어 줄 것인가 하는 태그입니다. 

인터넷을 사용하다가 검색을 할 때, 새창으로 열리지 않는 것은 애초에 속성 태그가 블랭크로 적용되지 않았기 때문입니다. 기본 폴트는 _self로 되어 있습니다.

그 외의 태그들로

• _blank : 웹 브라우저에서 새창으로 열기

• _self : 기본 속성으로 현재 있는 창에서 연결

• _parent : 현재 창보다 상위 창에서 연결

• _top : 웹 브라우저 창에서 전체 창으로 연결

그 외 태그의 정의

• src : 이미지의 웹상 url

• alt : 이미지를 오버 시, 이미지가 안 보일 때 설명 대체하는 글

• height : 이미지의 높이 값 (세로)

• width : 이미지의 너비 값 (가로)

• align : 이미지 정렬 (left, center, right)

• border : 이미지 테두리

이미지를 삽입하는 방법과 그 이미지 or 글을 누르면 url을 타고 이동하는 방법에 대해서 적어봤습니다. 어렵지 않고 재미있는데, 막상 혼자서 하려면 마음같이 안 되는 신기한 현상이네요..ㅎ

일본어는 한국말과 어순이 같아서 단어들의 나열, 그리고 그 사이에 조사들을 만들어서 문장들기에 조사들이 정말 중요하더라구요! 저는 밥을 먹었습니다. 를 저과 밥가 먹었습니다. 라고 하면 말이 안되기 때문에...ㅎ 그렇기 때문에 일본어 조사를 정리했습니다!

일본어 조사 정리

문법은 아직 어렵고, 모르겠고.. 우선 일본어 단어와 그리고 조사들 이라도 열심히 암기하고 말하기 해서 맞든 틀리든 빨리 스피킹이 되면 좋겠네요..ㅎ

공백은 스페이스바나 엔터키, 탭키로 공백을 만들 수 있지만, 코딩을 할 때는 이러한 키들로 공백을 추가하지 못합니다. 그러면 HTML에서는 어떠한 방법으로 공백을 만들 수 있는지 알아봤습니다. 

공백 한칸 띄우기

Html에서는 스페이스 바로 띄워쓰기를 많이 하여도 공백은 한칸만 표시가 됩니다. 강제로 공백을 띄우려면 &nbsp; 나 &#160;을 넣어서 띄워써야 합니다. (마무리는 ;(세미콜론)을 넣어주어야 합니다.)

다양한 크기의 공백 삽입하는 방법

브라우저가 공백을 표시하게 하는 다른 방법입니다.

• &ensp; : 인쇄기의 "N" 블록 이름을 따왔으며 공백 두 칸 만큼의 자리를 차지합니다.
  
• &emsp; : 공백 네 칸의 공간을 차지합니다.