반응형

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] html에서 주석 처리하는 방법  (0) 2020.04.17
[HTML] html 파일 열기 간단한 방법  (0) 2020.04.14
[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
반응형

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

일본어 조사 정리

 
~は ~ 는(은)
~も ~ 도
~を ~ 를(을)
~の ~ 의, ~ 의 것
~と ~ 와(과)
~から ~まで ~ 부터 ~ 까지
~で ~ 로
~が ~ 이(가)
~に ~ (장소)에, ~ (대상)에게, ~ (시간/요일)에
~とか ~ 라든가
~や ~や ~など ~ 랑 ~ 랑 ~ 등
~より ~ 보다

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





반응형
저작자표시

'일본어 기초' 카테고리의 다른 글

일본어 명사 N2 문자 · 어휘 #01  (0) 2020.09.13
[일본어]년, 월, 일, 요일 쓰는 방법  (0) 2020.04.29
일본어 기본 회화 표현(feat.일본여행시표현)  (0) 2020.04.04
[일본어기초]な형용사 어휘 정리  (0) 2020.04.03
스마트폰 일본어 키보드 자판 (한자 변환 방법)  (1) 2020.04.02
반응형


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




공백 한칸 띄우기


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




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


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

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




줄 바꾸기


한 문장을 마치고, 다음 줄로 넘기는 방법

  • <br>태그를 이용하여, 문장 끝에 넣으면 <br>태그를 넣어줍니다.
  • <p></p>태그를 이용하여 한 문장이 끝나면 다음 줄에 새로운 <p>태그를 넣어줍니다. 


<br>태그를 이용하여 한줄을 바꿔주는 태그를 이용하는 한줄을 변경하는 방법과, 그리고 한문장을 <p></p>태그를 사용하여 한줄을 만들고, 다음줄은 새로운 <p></p>태그를 만들어 주는 방법입니다. 



반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML] html 파일 열기 간단한 방법  (0) 2020.04.14
[HTML]이미지에 링크 걸기 & 이미지 삽입  (0) 2020.04.13
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
[html기초]header 태그와 font 태그  (0) 2020.04.05
반응형

오늘은 html에서 이미지를 넣는 방법을 배웠습니다! 

글로만 채워지던 화면에 이미지가 들어가네요! 태그만으로 이미지가 나온다는게 정말 신기하네요..ㅎ 

이미지 태그는 <img></img>, image의 줄임말이라고 합니다!

우선 이미지를 삽입하는 방법을 알기 전에

이미지가 불러 올수 있게 되었는데, 다른 사람들은 안보인다는 경우가 생길 수 있습니다. 왜냐하면 절대경로와 상대경로 두가지의 경로가 있는데,


절대경로란?

내컴퓨터에 저장되어 있는 파일들로, 파일의 마우스 오른쪽 버튼을 누르면 속성에서 확인할 수 있습니다.

절대 경로를 사용하면 내 컴퓨터 안에 있는 이미지이기 때문에, 상대방이 웹상에서 이미지가 뜨지 않습니다. (웹 페이지 제작은 절대경로를 사용하지 않습니다.)


상대경로란?

상대경로는 서버 주소가 달라지더라도 이전 서버에서의 디렉토리 구조만 같다면 경로를 수정하지 않아도 되는 경로입니다. 현재 문서를 기준으로 경로를 연결하고 있어서, 루트 디렉토리를 사용하지 않기 때문입니다.


이미지 삽입하기


사진은 무료 이미지로 상업적으로 사용이 가능한 이미지들이 모여있는 사이트를 사용하였습니다.

https://pixabay.com/


  • 우선 사용하고 싶은 이미지를 찾습니다.

저는 pixabay에서 이쁜 고양이 이미지를 가져왔습니다!


  • 마우스 오른쪽 키를 클릭하여 '이미지 주소 복사'를 해줍니다!
  • 주소를 복사하였으면, html을 이용할 수 있는 메모장을 열어줍니다!

<img src="https://cdn.pixabay.com/photo/2020/03/28/15/20/cat-4977436__340.jpg">


파란색의 공간에, 넣고자 하는 이미지의 주소를 복사하여 넣으면 됩니다

  • <img src="">태그로 ""의 사이에 가져올 이미지의 주소를 붙여넣어 줍니다!
  • 마지막으로.. 사실 처음에 저장부터 하면 좋지만, 파일의 이름을 .html로 저장을 해줍니다. ex)고양이.html

이미지를 불러올 때 사이즈를 정할 수도 있습니다.

가로(width), 세로(height), 픽셀(pixel)로 정해주면 됩니다.

<img width="가로픽셀" height="세로픽셀" src="이미지 주소">

가로와 세로 모두를 변경할 수 있지만, 비율이 달라지면서 이상해지기 때문에, 보통은 둘중 하나만 변경합니다.



반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML]이미지에 링크 걸기 & 이미지 삽입  (0) 2020.04.13
[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
[html기초]header 태그와 font 태그  (0) 2020.04.05
[html기초] 목록, 리스트를 나타내는 태그 <ul>, <ol>, <dl>, <li>태그  (0) 2020.04.01
반응형

html에서 표를 만들어야 할 일이 있을 때 사용하는 태그는 <table> 태그입니다. 블로그도 그렇고 워드프로세서, 엑셀 등 다른 프로그램에서도 표를 만들어야 할 일들이 많은데, 이런 프로그램들로 만들 때는 마우스 한 번만 클릭하면 되는데, html로 만들려고 하니, 어렵지는 않은데 손이 많이 가는 것은 사실이네요ㅠㅎ 그래도 html을 이용하면 보여지는 기능이 아닌 많은 기능들을 사용할 수 있다는 장점이 있다고 생각이 됩니다. <table> 태그를 이용하여 다양하게 응용하여 색다른 표를 만들 수 있을 것 같습니다!

표 만들기

  태그 내용
  <table> 표를 만드는 태그
<th> 표의 제목 부분을 만드는 태그
<tr> 표의 행(가로)을 만드는 태그
<td> 표의 열(세로)을 만드는 태그

테이블을 만드는 순서

  • <table></table> 태그를 만들어 줍니다. (테이블 시작 태그를 했다면, 반듯이 끝나는 </> 태그도 해줍니다.)

  • <th></th> 태그를 만들어 제목 부분의 태그를 만듭니다. (기본값으로 '진하게'와 '가운데 정렬'이 됩니다.)

  • 행을 만드는 <tr> 태그입니다.

  • 그 밑으로 <td> 태그를 이용하여 열을 만들어 줍니다.

table.html

<table> 태그 안으로 제목 줄을 넣는 <th> 태그, 그리고 그 밑으로 <tr> 태그로 한 줄 바꾸고, <td> 태그를 넣어 한 칸을 삽입합니다.

* <table> 태그에 선을 넣기 위해서 <table border="1">을 넣어줍니다. "1"은 선 굵기로 숫자가 커지면 선의 두께가 굵어집니다!

table.html의 결과

표의 디자인 변경

  속성 내용
  border 표의 테두리 넣기
bordercolor 표의 테두리 색상
width 표의 가로 크기
height 표의 세로 크기
align 정렬 (right, left, center)
bgcolor 표의 배경색
colspan 가로 합병 
rowspan 세로 합병

  • table에 테두리 선을 설정해 주는 속성입니다. {border:1px;} 하면 테이블의 선이 1로 나타납니다. 픽셀이 커질수록 선이 두꺼워집니다.

  •  bordercolor는 테두리의 색상을 지정! {bordercolor:red}로 하면 테이블의 선색이 빨간색이 됩니다.

  • width값은 테이블의 가로 크기를 지정해줍니다.

  • height값은 테이블의 세로 크기를 지정해줍니다.

  • align은 테이블 안에 들어가는 값들을 좌, 우, 가운데로 정렬시켜줍니다. ex) {text-align:center;}

  • bgcolor는 태그의 배경색을 변경시켜 줍니다.

  • colspan은 셀의 가로를 합병시켜 줍니다.

  • rowspan은 셀의 세로를 합병시켜 줍니다.

표 디자인 변경.html

표를 꾸밀 수 있는 디자인을 만들어 봤습니다. 프로그램을 이용하면 마우스 한 번이면 가능했던 일들이 이런 노가다로 만들어지네요...ㅎ

반응형

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]header 태그와 font 태그  (0) 2020.04.05
[html기초] 목록, 리스트를 나타내는 태그 <ul>, <ol>, <dl>, <li>태그  (0) 2020.04.01
[html기초]HTML 문서 기본 틀  (0) 2020.03.30
반응형

html에서 <header> 태그는 본문에서 사용하는 태그입니다.

<header>라고 하여서 <head>태그에 들어가는 것이 아니고 본문인 <body> 태그에 들어간다고 합니다!

<header> 태그

  • <h숫자> 본문 내용 </h숫자>

  • <h1>~<h6>까지 사이즈가 있습니다.

  • 본문 내용에 들어가는 글자는 진하게 표시됩니다.

  • 줄 바꿈 기능이 있습니다.

header태그.html

사이즈를 조정하여 가장 큰 제목은 <h1> 태그 그 밑의 제목은 <h2> 태그 등으로 조정하여 사용합니다.

본문 내용은 <p></p> 태그를 사용하여 입력합니다.

header.html의 결과는 이렇습니다.

작은 숫자일수록 폰트의 크기는 커지고 '자동 줄 바꿈' 그리고 '진하게'가 자동으로 입력되어 있습니다.

Font 태그

font 태그는 사이즈를 지정했지만, 조금 더 키우거나 줄이는 경우 그리고 글자색, , 글자체 등을 조정하는 태그입니다.

ex) <font size="1"></font>

  • color: 글자의 색

  • size: 글자의 크기

  • face: 글자체

Font태그.html

글자의 font 크기, 글자체, 글자의 색을 변경할 때  이용합니다.

위에서 <h> 태그와 달리 숫자가 작으면 글자의 크기도 작습니다. 

*<br> 태그는 줄 바꿈 태그입니다.

font태그 결과입니다. 글자의 크기가 size에 따라 달라지고, 글자의 색이 color에 따라 달라지고, 글자체가 face에 따라서 달라집니다! 

반응형

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
[html기초] 목록, 리스트를 나타내는 태그 <ul>, <ol>, <dl>, <li>태그  (0) 2020.04.01
[html기초]HTML 문서 기본 틀  (0) 2020.03.30
반응형

일본어 기본 회화로 기본적인 인사말에 대하여 정리해 봤습니다! 우리나라는 아침에 인사한다고 안녕하세요, 점심에 만났다고 점심 안녕하세요! 이런식의 인사는 없는데, 일본은 인사말이 아침, 점심, 저녁이 다 다르네요! 그 외에도 헤어질 떄 인사, 감사합니다, 천만해요, 안녕히 주무세요, 잘 먹겠습니다, 잘 먹었습니다, 실례합니다, 죄송합니다 등등 일본어 기초 회화를 정리해 봤습니다!


일본어 기본 인사말 정리

기본 표현

  1. はじめ まして(하지메마시떼): 처음 뵙겠습니다.

  2. おはよう ございます(오하요- 고자이마스): 안녕하세요?

  3. こんにちは(곤-니찌와): 안녕하세요? (점심인사)

  4. こんばんは(곰- 방- 와): 안녕하세요 (저녁인사)

  5. おやすみ なさい(오야스미 나사이): 안녕히 주무세요.

  6. おげんき ですか(오겟-키 데스카): 건강하십니까? (잘 지내십니까?)

  7. おかげさまで  げんきです(오까게사마데 겡-끼데스): 덕분에 건강합니다

  8. おひさしぶり ですね(오히사시부리 데스네): 오랜만이군요.

  9. おかわり  ありませんか(오카와리 아리마셍-까): 별고 없으십니까?

  10. さようなら(사요-나라): 안녕(작별인사)

  11. また  あいましょう(마따 아이마쇼-): 또 만납시다.

  12. ありがとうございます(아리가토우 고쟈이마스): 감사합니다.

  13. どういたしまして(도우이타시마시테): 천만해요.

  14. いただきます(이타다키마스): 잘 먹겠습니다.

  15. ごちそうさまでした(고치소우 사마데시타): 잘 먹었습니다.

  16. すみません(스미마셍-): 실례합니다, 죄송합니다.

  17. ただいま(타다이마): 다녀왔습니다.

  18. おかえり(오카에리): 잘 다녀왔니?, 다녀오셨어요?

대답하기

  1. はい(하이): 예
  2. いいえ(이-에): 아니오
  3. そうです(소-데스): 그렇습니다.
  4. そうじゃありません(소-쟈 아리마센): 그렇지 않습니다.
  5. わかりました(와까리마시따): 알겠습니다.
  6. わかりません(와까리마센): 모르겠습니다.
  7. だめです(다메데스): 안됩니다.
감사표현
  1. ありがとう(아리가또-): 고마워.
  2. ありがとうございます(아리가또-고자이마스): 감사합니다.
  3. どうもありがとうございます(도-모 아리가또-고자이마스): 대단히 감사합니다.
  4. いろいろとありがとうございます(이로이로또 아리가또-고자이마스): 여러가지로 감사합니다.
  5. どうも(도-모): 고맙습니다. (친한 사이에서 표현)
  6. おせわになりました(오세와니 나리마시따): 신세를 졌습니다.
  7. どういたしまして(도-이따시마시떼): 천만에요.

사과·부탁의 표현

  1. すみません(스미마센): 실례합니다.
  2. お願いがあります(오네가이가 아리마스): 부탁이  있습니다.
  3. ちょっと待ってください(좃또 맛떼 구다사이): 잠깐 기다려 주세요.
  4. ちょっとお待ちください(좃또 오맛찌 구다사이): 잠시 기다려 주십시요.
  5. もう一度いってください(모우 이찌도 잇떼 구다사이): 한번 더 말해 주세요.
  6. もっとゆっくりはなしてください(못또 윳꾸리 하나시떼 구다사이): 좀더 천천히 말해 주세요.
  7. 氣をつけてください(기오 쯔께떼 구다사이): 조심하세요.
  8. ここに書いてください(고꼬니 가이떼 구다사이): 여기에 써 주세요.
  9. ごめんなさい(고멘나사이): 죄송합니다. (구체적인 실수)
  10. いそいでください(이소이데 구다사이): 서둘러 주십시요.

질문 표현

  1. これは何ですか(고레와 난데스까): 이것은 무엇입니까?
  2. これは にほんごで 何といいますか(고레와 니혼고데 난또 이-마스까): 이것은  얼본어로 뭐라고 합니까?
  3. トイレはどこですか(토레이와 도꼬데스까): 화장실은 어디입니까?
  4. いつ行きますか(이쯔 이끼마스까): 언제갑니까?
  5. あのかたはだれですか(아노 가따와 다레데스까): 저분은 누구입니까?
  6. いまなんじですか(이마 난지데스까): 지금 몇시입니까?
  7. どのくらいかかりますか(도노 구라이 가까리마스까): 얼마나 걸립니까?
  8. どうすればいいですか(도- 스레바 이이데스까): 어떻게 하면 됩니까?
  9. なんさいですか(난사이데스까): 몇 살입니까?
  10. いくつですか(이꾸쯔데스까): 몇 개입니까?
  11.  なんの意味ですか(난노 의미데스까): 무슨 뜻입니까?
  12. どちらですか(도찌라데스까): 어느 쪽입니까?
  13. なぜですか (니제데스까): 왜 그렇습니까?
  14. どちらがすきですか(도찌라가 스끼데스까): 어느 쪽을 좋아합니까?

물건 구입시 표현

  1. いくらですか(이꾸라데스까): 얼마입니까?
  2. これはいくらですか(고레와 이꾸라데스까): 이것은 얼마입니까?
  3. 全部でいくらですか(젠부데 이꾸라데스까): 전부 얼마입니까?
  4. これをください(고레오 구다사이): 이것을 주세요.
  5. 手にとってもいいですか(데니 돗데모 이-데스까): 만져봐도 괜찮습니까?
  6. もっと安いのがありますか(못또 야스이노가 아리마스까): 더 싼 것이 있습니까?
  7. ～を買いたい(~오 가이 다이): ~을 사고 싶습니다.

호텔 객실에서 표현

  1. おはいりなさい(오하이리나사이): 들어오십시요.
  2.  テレビがつかない(테레비가 쯔가나이): 텔레비젼이 켜지지 않습니다.
  3. トイレの水が流れない(도이레노 미즈가 나가레나이): 화장실 물이 내려 가지 않습니다.


반응형

'일본어 기초' 카테고리의 다른 글

[일본어]년, 월, 일, 요일 쓰는 방법  (0) 2020.04.29
[일본어 기초]일본어 조사 총정리  (0) 2020.04.11
[일본어기초]な형용사 어휘 정리  (0) 2020.04.03
스마트폰 일본어 키보드 자판 (한자 변환 방법)  (1) 2020.04.02
[일본어 기초]い형용사 정리  (0) 2020.03.31
반응형

な형용사 어휘

静かだ (しずかだ) - 조용하다
簡単だ (かんたんだ) - 간단하다
まじめだ - 성실하다, 진지하다
新鮮だ (しんせんだ) - 신선하다
親切だ (しんせつだ) - 친절하다
有名だ (ゆうめいだ) -유명하다
にぎやかだ - 번화하다
重要だ (じゅうようだ) - 중요하다
便利だ(べんりだ) - 편리하다
だめだ - 안 된다
不便だ (ふべんだ) - 불편하다
元気だ (げんきだ) - 건강하다
楽だ (らくだ) - 편안하다, 쉽다
大丈夫だ (だいじょうぶだ) - 괜찮다
きれいだ - 예쁘다, 깨끗하다
丈夫だ (じょうぶだ) - 튼튼하다
暇だ (ひまだ) - 한가하다
ハンサムだ - 잘 생기다
すてきだ - 멋지다, 근사하다
心配だ (しんぱいだ) - 걱정이다
好きだ (すきだ) - 좋아하다
嫌いだ (きらだ) - 싫어하다
上手だ (じょうずだ) - 잘하다, 능숙하다
下手だ (へただ) - 잘 못하다, 서투르다
得意だ (とくいだ) - 잘하다, 제일 자신 있다
苦手だ (にがてだ) - 잘 못하다, 질색이다

반응형

'일본어 기초' 카테고리의 다른 글

[일본어 기초]일본어 조사 총정리  (0) 2020.04.11
일본어 기본 회화 표현(feat.일본여행시표현)  (0) 2020.04.04
스마트폰 일본어 키보드 자판 (한자 변환 방법)  (1) 2020.04.02
[일본어 기초]い형용사 정리  (0) 2020.03.31
[일본어 기초]히라나가 요음 공부  (0) 2020.03.25

+ Recent posts

티스토리툴바