#11 최후의 문법 속성 & img - <WEB1-HTML & Internet>

출처 : https://www.youtube.com/c/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A91/featured

생활코딩

 

 

 

 

 

 

 

요약 :

 

태그의 심화된 문법.

'속성'을 배워볼 것이다.

 

 

이것을 알면

HTML의 모든 문법을 마스터했다라고 얘기할 수 있다.

 

 

 

글씨만 있으니 좀 답답하다.

사진을 넣어보겠다.

 

 

이미지를 웹 페이지에 포함시킬 때 사용하는

태그 이름은 <img>이다.

 

 

와... 이전 영상을 접하고 강의를 보며 '유튜브에 자막 넣는 것도 검색엔진에 정보를 넣는건가?' 싶었는데

생활코딩님 한국어 자막 뿐만 아니라 영어 자막도 깔끔하게 다 넣으셨다.

좋은 원고, 원고와 관련된 그림들, 라디오 같은 목소리, 자막, 영상   최고네...

 

현재는 이미지와 영상을 기계가 학습하지 못했지만

나중에 AI 인공지능이 발전된다면 이미지와 영상에 대한 정보도 인식 가능해질 것이다.

 

일단은 강의 영상을 찍으셨을 것이고,

그 다음엔 사람을 쓰시던가 아니면 직접 영상에 대한 자막(원고)을 작성했을 것이고

원고를 영어로 번역했을 것이다.

 

 

 

 

태그의 이름만으로는 정보가 부족할 때가 있다.

그래서 태그라는 문법을 만든 컴퓨터 공학자들은

태그의 이름만으로는 정보가 부족하다는 것을 인식한다.

 

 

고민하다가 새로운 문법을 만들어 내는 데

그것만 알게되면 태그 문법은 다 끝낸 게 된다.

 

 

어떤 이미지인지를 알려주기로 약속한 속성이

source인데, 기니까 src로 하기로 한다.

여기에다가 내가 원하는 이미지의 주소를 적어주면

웹브라우저는 해당 위치에 이미지를 보여준다.

 

 

unsplash.com 추천한다. (노션에 나오는 사이트네)

고퀄 이미지들을 저작권에 구애받지 않고 사용할 수 있다.

download free를 누르면 이미지 파일을 다운로드 받을 수 있다.

 

 

우리가 작업하고 있는 디렉토리, 'web'으로 저장.

이 이미지를 웹페이지에 포함시킬 때는 

<img src="coding.jpg">라고 저장한 후

웹페이지를 리로드 하면 된다.

 

 

이미지가 너무 커서 width 조절.

<img src="coding.jpg" width="450">

<img src="coding.jpg" width=100%>

 

100%로 하면 자동으로 100% 크기에 맞게

이미지의 사이즈가 바뀌게 된다.

 

 

 

 

 

<img>태그를 통한 속성이라는 문법 간단 정리.

src="coding.jpg"

width="450"

위 내용들을 '속성', 영어로는 'Attribute'라고 부른다.

이 속성들은 위치는 상관이 없어서

순서를 바꿔서 써도 상관이 없다.

 

 

태그가 태그 이름만으로는 정보가 부족할 때

이러한 속성을 통해서 더 많은 의미를 부가할 수 있게 된다.

 

 

 

 

 

 

느낀점 : 

 

Attribute에 대해서 공부했긴 했는데

이번 강의를 통해 속성에 대해서 확 와닿게 배웠다.

 

알려주신대로 나만의 웹페이지를 만들어봤다.

1. 이미지 넣고 2. 사이즈 조절 해보기