[HTML] Web1 : 최후의 문법 속성과 img, 문서에 이미지 넣는 법 1

이 수업에서는 HTML에서 문서에 이미지를 넣는 방법에 대해서 배웠다.

 

근데 갑자기 떠오르는 생각은 왜 html은 항상 대문자로 쓰는거지..?

anyway 다시 돌아와서.

저번에 수업을 들으면서 궁금해 했던 HTML 화면에서의 초록색 부분은 바로 속성이라는 것을 배웠다.

 

<img>는 이미지를 불러오는 태그인데 이 태그만 있으면 태그만 있고, 정보는 없어서 아무런 이미지를 불러오지 않는다.

그래서 나온 것이 속성(atrribute)이다. img에 속성을 뜻하는 src를 입력하고, 주소를 입력하면 된다.

 

이 과정에서 또 엄청 좋은 사이트를 소개해줬는데 무료 사진 나눔 사이트였다.

 

 사진 무료나눔 사이트 주소

https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

여기서 사진을 다운받아서 무료로 사용하면 되는 것이다!! 굉장히 고퀄의 사진들이 모여있었다.

여기 말고도 구글에 public domain image라고 치면 된다고 한다. 그럼 비슷한 서비스들이 뜰거라고 했다. 나는 안해봄

 

일단 여기서 사진을 다운받아서 내가 작성하고 있는 폴더에 넣은 후, <img src="사진이름.확장자"> 이렇게 표현해주면

내가 표현하고 싶은 사진이 웹사이트에 나타나게 된다. 하지만 사진이 너무 크게 표시되기 때문에 width="100%"로 표시해주면

화면에 맞게 표시가 된다. 이 width도 속성에 들어가기 때문에 초록색으로 표시된다.

속성은 위치가 상관이 없어서 아무곳에 넣어도 된다고 했다.

 

태그가 태그의 이름만으로 설명하기 부족할 때 속성을 통해서 더 자세히 설명하는 것이다!

이렇게 알고 있으면 된다.

 

이제 실습을 해볼 차례인데 아톰을 켜기 귀찮기 때문에....

여기에 있는 html을 활용해서 직접 내가 작성해보려고 한다.

 

 

 

 내가 마음에 들었던 coding 사진은 바로 이렇게 누구나 코딩을 할 수 있다! 이런 글귀가 담긴 사진이다.

되었을까?

 

실패했다ㅜ

 

 

ㅠㅠ주소가 내컴에만 있어서 안되는 건가?

 

이 캡쳐한 사진의 소스는 뭔지 살펴 보았다.

뭐라는 지 정확하게 확인할 수 없지만, 저기에 png라는 확장자와 이상한 작대기 | 이런거 하나 그리고 폭이랑 데이터가 0 이런게 보인다.

 

 

그렇다면 사진을 불러와서 넣으면 어떻게 표시될까?

coding 이미지

잘 적용이 되었다. 먼가 기분나빠...

 

 

 

위에거랑 불러오기가 비슷해보이는데 약간은 다른 것 같기두 하고 여기까지는 내가 아직 배우지 못하는 범위인거 같다. 초초보자가 배우기엔 조금 뭐라는 지 모르겠다.. 귀찮아서 그냥 여기서 하려햇는데 아톰을 켜야겠다......

 

배가 고파졌다... 고구마나 하나 먹고와서 다시 해야지