생활코딩 WEB1 - 11. 최후의 문법 속성 & img > HTML

생활코딩 | WEB1 - 11. 최후의 문법 속성 & img

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

생활코딩님의 HTML강의 청각장애인을 위한 자막

지금까지 우리는 html 의 가장 중요한 문법 인 태그를 배웠습니다

이번 시간에는 속성이라고 하는 태그의 심화된 문법을 배울 건데요
이것까지 배우며 여러분의 html 의 모든 문법을
마 시 따 따 라고 얘기할 수 있습니다
그리고 이번 시간에는 아주 아주 인기있는 태그 역시 살펴보도록 하겠습니다
이렇게 제가 웹페이지를 만들어 놓고 보니까 어 좋은데 좀 더 화 였으면
좋겠어요
그리고 딱 봤을때 그 심한 있으니까 답답하지 않아요
여러분은 자연스럽게 어떤 마음을 갖게 되나요
여기에다가 사진을 고 싶지 않으세요
사진 는 등 밥을 지금부터 살펴보겠습니다
이미지를 웹페이지에 포함 쉽게 때 사용하는 태그의 이름은
img 입니다 이미지의 주님 말이죠
잠 여기에다가 img 라고 함 해볼게요
자 img
그리고 리로드를 해보면 어떤가요 사진이 보이나요 안보이죠
당연하죠 왜 안 보이게 써요 그냥 아 이미 img 라고 말하면 어떤
이미지를 보여줄 건지에 된 얘기가 없잖아요
그러니까 이렇게만 하면 상식적으로 안되는게 맞습니다 근데 그 얘기는 무슨
뜻이냐면 지금 제가 태그의 이름을 썼는데
태그의 이름만으로는 정보가 부족할 때가 있다는 거죠 그래서 이 태그 라고
하는 문법을 만든 컴퓨터 공학자 들은
어 저기 태그의 이름만으로는 정보가 부족하다 라는 걸 인식합니다
그래서 어떻게 할까 고민하다가 새로운 문법을 출연 시키는데
여러분은 거기까지만 알게 되면 어
태그 에서 뭐랄까요 그 문법은 완전히 다 끝낸 게 됩니다
자 여기에다가 어떤 이미지 인지를 알려주도록 약속된 속성 es our
ceo 소스 인데 너무 기니까 src 로 하기 더 마귀로 합니다
그리고 여기에다가 여러분이 원하는 이미지의 주소를 적어주면
그럼 웹브라우저는 저기 적혀있는 저 주소를
저 위치에 다가 이미지로써 표현 해 주게 됩니다
자 우리 이미지가 필요하죠 제가 굉장히 좋은 서비스 하나 소개해 드릴께요
언 스플래쉬 닷컴 이라고 하는 사이트 인데요 이 사이트에 있는 아주
퀄리티가 높은 이미지들은
여러분이 저작권 에 구애받지 않고 사용할 수 있는
예 그런 공공재 와 같은 훌륭한 이미지들입니다
자 여기 있는 이미지 중에서 제가 뭐 하나를 선택을 해 볼까요
아 그래도 우리가 지금 하고 있는게 코딩 이니까
어 코딩 이라고 한번 검색해 볼게요
그랬더니 코딩 관련된 여러가지 내용들이 나오네요
요거 괜찮네요 그래서 다운로드 플레이 버튼을 누르면 저 파일을 이미지
파일을 다운로드 받을 수 있게 됩니다
눌러 볼게요
자 그리고 여기 저장하는 부분 해서 여러분이 우리가 지금 현재 작업하고
있는
바탕화면에 웹 원이라는 디렉토리로 다운로드 받은 이미지를 저장해 주세요
저도 해볼게요
자 이렇게 다운로드 받은 이미지를 저는 어 우리 가 진행하고 있는
프로젝트 폴더에 이렇게 저장을 했습니다
예 그러면 여기 있는 이 이미지를 우리 웹페이지에 포함 시킬 때는 저
이미지 이름이 좀 기니까 저는 다른 것을 바꿔 볼게요
저희 이미지에서 오른쪽 클릭하고 린의 이 이름을 바꾼다 는 뜻이죠
자 이렇게 해서 올라갈까요
코딩 점 jpg 라는 파일명으로 바꿨습니다
그리고 여기에다가 제가 원하는 파일명이 고딩 점 jp her 라고 입력을
하고 저장 한 다음에
그리고 이 웹페이지를 리로드 해보면
짜잔 보시는 것처럼 제가 가져온 이미지가 이렇게 화면에 보이는 걸
가져왔던 걸 볼 수가 있습니다
이렇게 되는 것은 이미지가 너무 커서 그래요 그래서 여기에다가
미스 를
저는 예를 들면 어떻게 할까요 450 정도로 하고 그리고 리로 남 해
볼까요
음 450 더 크네요
아니면 100% 로 하면 자동으로 200% 크기에 맞게 이미지 x
사이즈가 바뀌게 됩니다
자 이렇게 해서 이미지를 추가할 수 있게 되는 겁니다 자 그러면 이미지
태그를 통해서 우리 속성이라는 문법을 간략하게 정리해 볼까요 자 저렇게
생긴 부분을 뭐라고 한다.고요
속성 영어로는 허트 리베트 라고 부릅니다
그리고 이 속성은
위치는 상관이 없어요 아무 위치에 나 쓰시면 되구요
그리고 태그가 태그의 이름만으로는 정보가 부족할 때 때는 이런 속성을
통해서 더 많은 의미를 부가할 수 있게 된 것이다
정도로 정리 하시면 되겠네요 이렇게 해서 이번 시간에는 속성이라고 하는
html 에서 아주 중요한
이 문법을 잘 펴 봤구요 그리고 img 라고 하는 굉장히 인기가 높은
태그를
역시나 살펴봤습니다.