#06. img 태그(이미지 태그) 근본 있게 배워보기 - 프론트엔드 개발자 입문편 / HTML + CSS / 웹 코딩

"img 태그 강의가 무슨 15분이나 해?😅" 이런 생각은 NO ~ !!🔥🔥
파일 경로, src 속성, alt 속성, width 속성, height 속성, 이미지 링크까지 이 영상 하나에 모두 담았습니다!😎😁
저도 짧게 만들고 싶었는데 img 태그 너무너무 중요해요!!🧐
15분만 투자하면 다른데에서 img 태그 강의 영상 안봐도 됩니다. 🥳🤩
저를 믿고 근본 있는 img 태그 지식을 쌓아보러 고고고~🔥🔥
* BGM 정보 Music | With You by Declan DP
Watch: • Royalty Free Music | W...
License: www.declandp.in...
Download/Stream: hypeddit.com/l...
#img태그 #이미지태그 #이미지링크

[@98HEE]

독학하면서 이미지 경로가 이해되지 않아서 그냥 넘기고 있었는데 이 영상을 보고 단박에 알게됐네요ㅠㅠ 좋은 강좌 감사합니다!!

[@sucoding]

도움이 되셨다면 참 다행입니다!

[@user-jv2qv5ns2o]

제 구세주.... 진짜 다른유료강의보다 훨씬 쉽고 잘가르쳐주셔요 늘 감사한마음으로 배우고있습니다 ..!!

[@jiyoungkim2336]

많이 배웠습니다. 다른 곳에선 들을 수 없는 자세한 설명 이네요. 기초가 탄탄해지는 느낌이예요. ^^

[@sucoding]

감사합니다 :)

[@PlayGam-il4fh]

혼자 코딩 독학 해보겠다고 자바스크립트 책 사서 맨땅에 헤딩하듯이 배우고 있었는데, 막히는 부분이 많아서 일단 html/css 개념부터 잡고 다시 해보자는 마음으로 듣는데 하루만에 6강까지 들었네요..!!!! ㅠㅠ..! 혼자 예제 풀면서 모르는 속성이나 태그 나올때마다 뭐가 뭔지 몰라서 일일히 검색하면서 하느라 시간 엄청 잡아먹다가 포기하고 넘어간 적 많았는데, 몰랐던 부분 엄청 많이 해결될 것 같아요..! 감사합니다 ㅠㅠ 내용도 엄청 간략하고 쉽게 설명해주셔서 더 좋은거 같아요..! 구독하고 재생목록에도 추가했습니다..! 히히

[@yoon_hu]

와 진짜 대박 잘알려주신다 진짜 차원이달라요 사랑해요

[@user-vm2dt3pi2q]

이전에 배웠던 것들을 적용하면서 알려주셔서, 앞에 배웠던 것들이 앞으로 어디에 적용시키면 될지 그림이 그려져서 더욱 좋은 것 같습니다! 감사합니다:-)

[@sucoding]

제가 더 감사합니다 🙏

[@yeppuppy]

오~ 감사합니다.헤메고있었는데 도움 많이 받았습니다.

[@mark1content]

이런걸 어떻게 독학으로 이해할수 있을까요... 진짜 감사합니다.

[@potatosweet3565]

선생님은 제 생명의 은인이에요 좋은 컨텐츠 너무 감사합니다.

[@sucoding]

제가 더 감사합니다:)

[@jennayim761]

너무 감사합니다. 이해하기 쉽게 설명해주시는것 같아요!!

[@user-rz7ml5rj2o]

정말정말 잘보고 있어요! 많이 돈쓰면서 배웠는데 아직도 개발자가 못되었는데 ㅜㅜ 다시 과외받는 느낌이라 너무너무 좋습니다💛

[@sucoding]

감사합니다 :)

[@kingchobo]

맞아요 독학이라는 게 생각보다 힘들어요.

[@user-ek3kd1hc8s]

아 진짜 넘 쉽게 이해됩니다 감사해요🙏🙏🙏

[@around815]

선생님 천재같아요. 책 사러 갑니다 쓩

[@sucoding]

🙏

[@VLOG-0701]

너무 감사합니다.😂 현재 초 5학년인데 웝페이지에 들어갈 배경 크기 조정을 어떻게 하는지 몰라서 유튜브를 뒤졌거든요😂

[@user-dt2bm5sp4w]

이미지 넣는거 폴더경로만 알아서 웹사이트들 이미지는 어떻게 넣은건지 이해가 안됐었는데 드디어 이해가 됐어요 감사합니다!!

[@sucoding]

다행이네요! :)

[@skyl8502]

영상 잘 만드셨네요 ^^ 이미지 사이즈의 크기 중 width="50%"의 설명을 정정해야 할듯합니다. ~~ 영상 너무 잘 만드셨어요

[@dabeen93]

너무 좋은 강의 감사합니다. 구독하고 앞으로 꾸준히 강의 듣겠습니다.

[@sucoding]

감사합니다. 즐거운 코딩 공부시간되세요!

[@Cho1279624]

큰 도움이 되었어요^^

[@frontend_ko]

와 간단하고 짧으면서도, 핵심적인 내용은 다 건들고, 훌륭한 응용까지 ㄷㄷ... 지금까지 봤던 유튜브 강의중 수코딩님 시리즈가 제일 맘에 드네요. 지금까지 앵커 태그를 항상 텍스트에만 적용하는것만 보고 배워서 이미지에 할 생각은 생각도 못했는데, 좀더 유연한 사고를 해야겠다는 충격적인 강의네요

[@sucoding]

감사합니다 🙏

[@user-jp1zp5mv3q]

전공이후 처음 다시 기초를 다지는중인데..구독할정도로 너무 유용해요..! 감사합니다!!!🥰

[@sucoding]

구독 감사합니다 !!

[@user-jo1nc5fo9s]

🙏감사합니다. 👍👍👍

[@sucoding]

제가 더 감사합니다 :)

[@cobeattv7552]

감사합니다. 잘봤습니다. 도움받아 댓글 남기고 갑니다.

[@sucoding]

감사합니다!!

[@user-hr9qx7zy2r]

좋은영상 감사합니다. 두개의 이미지를 호스팅을 통해서 엑셀의 셀 한곳에 너는 방법좀 부탁드립니다. 두개의 이미지를 연달아서 보이게 하고 싶어서요..감사합니다~~~^^

[@sucoding]

img 태그를 두 번 사용하면 될 것 같네요!

[@moon9story101]

세련되심

[@sucoding]

감사합니다:)

[@user-lv8fg7lu3k]

good

[@sucoding]

Thanks

[@hyunuo]

최고다 ...최고 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

[@sucoding]

도움이 되셔서 다행이네요 감사합니다 🙏

[@yeonneoy]

안녕하세요 수코딩님, 재미있는 강의 잘 봤습니다! 좋아요와 구독 했습니다! 여쭤보고 싶은게 있는데, 혹시 한개의 이미지 안에서 위치를 지정하여 하이퍼링크를 여러개 줄 수 있나요? 강의 속 다리이미지를 예를들어, 다리를 누르면 a사이트, 하늘을 누르면 b사이트로 이동하는 방식이 가능한지 궁금합니다. 초등학생때 메모장으로 배운 html 밖에 모르는데...거래처에서 요청이 들어와서 급하게 공부중입니다ㅠㅠㅎㅎ

[@sucoding]

이미지맵이라는 기술인데, 마침 제 영상이 있습니다. 아래 영상을 참고해보세요! kzbin.info/www/bejne/l4uVoXWjo9JseJI

[@user-yw7kr2vp3g]

뭐 하나 막히면 그기서 포기하는 습성이 있는데 오늘 뚫려서 전진합니다. 감사 합니다.

[@sucoding]

힘내서 완강하시길 기원합니다 👍

[@estherko3086]

선생님 마지막에 사이에 이미지 하이퍼링크설명해주셨는데 그이미지를 가운데정렬하려면 어떻게 해야될까요 ^^? test-align 센터가 안먹혀요 ㅠㅠ

[@user-dh5ry2lj8x]

만약에 바탕화면에서 이미지가 있는것이 아니고 D 드라이브에 (이동식디스크에) 있는 경우라면 라고 해야되는건가요 ? 이동식디스크 (D 드라이브) 에 있는 경우는 어떻게 해야 이미지가 나오는지 궁금합니다

[@Doppio_00]

강의도 좋은데 목소리도 좋으심 2:27에서 탐색기창 열고 파일 보는거요 꼭 저 폴더창에서만 단축키가 먹히더라고요 편집창에서는 단축키 쓸수잇는 방법 없을까요 검색해도 못찾아서 물어봐요

[@sucoding]

네네 꼭 저 폴더창에서만 하셔야 합니다!

[@Doppio_00]

@@sucoding 감사합니다 편집창에서 되면 좋앗눈데 ㅠ 슬픔

[@coral3013]

책사서 매일 공부하고 있어요 옆에 제가 만든 홈페이지 뜨게 하는거 단축키 말고 자동으로 계속 어떻게 띄어놓나요? 설명이 다 저렇게 나와있네요 왼쪽에 파일을 만들어놨기 때문에 나타나는 거잖아요 파일안에 이미지 넣은 방법 파일 만드는법부터 알려주셨으면 좋을 것 같아요ㅜ모르겠습니다

[@sucoding]

이 영상에서는 그냥 HTML 파일을 더블 클릭해서 열어서 실행한거네요. 이 방법 말고 LIVE SERVER를 이용하는 방법도 있는데, 제 채널의 재생목록을 처음부터 따라해보시면 좋으실 것 같아요!

[@coral3013]

@@sucoding 딴 채널 알아봐서 파일 만들어서 넣는 방법 배웠습니다 책 진짜 하루 매일 매일 열심히 공부하고 있어요!!! 감사합니다 😃

[@24KYongJu]

meta name=.... 막 써있는데 영상에선 잘려있어서 뭔지 모르겠네요

[@sehyunjang6352]

11:40 width="50%"로 설정했는데 원래 사진의 크기보다 더 크게 출력되던데 어떻게 고치면 되나요?

[@sucoding]

이미지 크기보다 부모 크기가 더 클 경우에 그럴 수 있습니다. 부모 태그에서 빼서 단독으로 쓰거나 크기를 픽셀로 직접 정의해야합니다.

[@user-dl6hw2sz8h]

../를 했는데도 사진이 그대로 보여요 그래서 live server로 안하고 index 파일 찾아서 눌러서 봤는데 거기는 사진이 안나온다고 잘되요 왜 그런건가요?

[@user-wd1xr8qh9p]

이미지 경로는 복사를 이용해도 문제 없을까요?

[@user-sg5zz6lt7f]

저렇게 코드를 작성하고 어떻게 웹브라우저에 실행된 걸 볼 수 있나요?

[@sucoding]

@@user-sg5zz6lt7f html파일을 더블클릭하면 됩니다

[@user-xi5ro7nt6r]

수코딩님 이미지에 url붙일때 한 이미지당 따로따로 넣으려고하는데 그건 어떻게해요? ㅜㅜ 너무급해요

[@sucoding]

이미지맵 말씀하시는거같은데 글로 설명드리기는 좀 난해해서 구글에 이미지맵이라고 검색해보시는게 더 빠르실것 같아요!!

[@junwoo101797]

꼭 px 말고 숫자만 적어야 하는 이유가 있나요?? 설명이 안나와 있는것 같아서요ㅠㅠ

[@sucoding]

HTML4 스펙(Spec) 에서는 width 속성에 px 나 % 같은 unit을 사용할 수 있었습니다, HTML5 에서는 width 속성의 디폴트값이 px로 변경되었고 그래서 굳이 px 단위를 사용하지 않아도 px로 인식되도록 스펙이 변경되었습니다. 그래서 "꼭"이라기 보다는 "권장"이라는 개념적인 측면에서 이해해주시면 됩니다. (실제로 width="100" width="100px" 둘다 똑같이 작동합니다) 참고로 HTML5에서는 width 속성에 % unit을 붙이는 것도 비권장사항이지만, 위반 사항은 아니고 실무에서도 자주 사용되는 내용이라서 동영상 강의 내용에 포함시켰습니다 :)

[@junwoo101797]

수코딩 감사합니다 ㅎㅎ

[@sook1092]

폴더 내에 있는 html로 열었을 때는 경로 잘못 지정했을 때, 이미지가 깨지는 걸 확인했습니다. 궁금한 건 Live Server로 열었을 때는 경로가 잘못 지정되어도 이미지가 잘 나오던데 이것도 Live Server 기능 중 하나인가요?

[@sucoding]

아니요 :) 뭔가 다른 이유가 있을 듯 합니다.

[@sook1092]

@@sucoding 더 공부해봐야겠네요! 답변 감사합니다 :D

[@user-dr9xw5hu9j]

영상대로 따라해봤는데 왜 이미지 첨부가 안될까요ㅠㅠ 제 거는 폴더에 크롬이 아니라 마이크로소프트 엣지로 돼있는 게 잘못된 건가요??? 어떻게 크롬으로 바꾸는지 아실까요..???

[@sucoding]

아니요 브라우저는 상관 없습니다. 거기서 보이는 아이콘은 PC의 기본 브라우저가 보이는 것이기 때문이에요. 이미지 첨부가 안되면 거의 대부분 경로의 오류일 가능성이 큽니다. 경로가 틀리진 않는지, 다시한 번 확인하시고 코드를 압축해서 [e-mail]으로 보내주시면 확인 후 회신드릴게요 :)

[@user-zh6kf9wq6q]

아무리 해도 이미지가 나오지않네요 ㅠㅠ 혹시 저도 압축해서 혹시 확인해주실수있나요?

[@sucoding]

안녕하세요:) [e-mail] 으로 파일 보내주시면 확인해드리겠습니다 :)

[@user-zh6kf9wq6q]

@@sucoding 확인해주신다고 하셔서 정말 감사합니다 이메일로 파일보내드렸습니다

[@gohoon6740]

안녕하세요 잘 보고있는데요 분명 프로그램에서 돌리고 다른 이름으로 저장하 였을때는 이미지가 나오는데 쇼핑몰에 html로 등록하고 변화한걸 보면 사진이 깨져있네요ㅜㅜㅜ 이건 왜그런거죠? ㅜㅜ

[@sucoding]

이미지가 깨진다는건 결국 경로 문제인데.. 만약 이미지의 경로를 "img/10.jpg"처럼 적으셨다면 "./img/10.jpg"처럼 ./을 붙여 보시겠어요? ㅎ

[@user-qy7pv7lb1l]

제가 어떤거에 이미지를 넣어야하는대 이미지 경로를 어캐찾는지 모르겠네요 ㅠㅠ

[@sucoding]

제일 간단하게는 html 이랑 같은 폴더에 이미지 올리시고, 이미지 파일 이름 그대로 src="이미지이름(확장자포함)"으로 지정하시면 됩니다!

[@jinukbaek3428]

분명이 같은 파일에 있는데도 ./images/파일이름.jpg 했는데 이미지가 안뜨네요 ㅠ 그래서 그냥 images 빼고 파일 이름.jpg 했는데 뜨네요 뭐가 문제인걸까요..

[@sucoding]

./images/파일이름.jpg 라고 하셨는데 안됬는데, 파일이름.jpg 하면 된다는 건 조금 이상하긴 합니다. 두 개는 참조하려는 폴더 자체가 다른건데.. 혹시 index.html이 images 폴더 안에 있지는 않으신가요?

[@user-or7dp8ov3n]

혹시 코드 고치고 f5누르시나요?? f5누르면 Select Environment 검색창 뜨는데 그거 안뜨게 하는 방법 있나요??ㅜㅜ

[@sucoding]

코드 고치고 에디터가 활성화 되어 있는 상태에서 f5를 누르시냐는 말씀이신건가요? 보통은 그렇게 누르지 않습니다..ㅎㅎ

[@user-or7dp8ov3n]

@@sucoding 그럼 뭐 누르세요??? 그 라이브 서버를 켜고 코드를 고치면 바로 안뜨고 뭐를 눌러줘야 하던데 ㅠㅠㅠ저만 이러나요??

[@user-kl3iw2yg7c]

@@user-or7dp8ov3n 코드 수정하고 저장해보셨어요 ??

[@user-rj9fh9ft7r]

안녕하세요...잘 보고했는데 경로지정을 잘못했는지 전혀 이미지가 나오지않습니다ㅠㅠㅠ무엇이 문제인지 모르겠어요. 혹시 봐주실수 있을까요?

[@sucoding]

우선 이미지가 안나오는건 파일 경로를 제대로 인식하지 못하셨을 경우가 큰데요! [e-mail]으로 작업하신 폴더를 압축하여 보내주시면(만약 첨부가 안되면 .zip을.zipss 로 바꾸시면 됩니다) 보고 회신 드리겠습니다 ^^

[@user-rj9fh9ft7r]

@@sucoding 너무 감사합니다..제가 정말 초짜라 어려움이 많은데 봐주신다니 넘 감동입니다ㅠㅠ 메일 보냈습니다! 정말정말 감사합니다🙏

[@sucoding]

@@user-rj9fh9ft7r 도움되셨길 바랍니다 :)

[@Kaylin.]

이 프로그램 이름이몬가요?ㅠㅠ

[@user-pj1kt6md4o]

댓글알바가 의심될 정도로 선플이 많네요 ㅋㅋㅋ(농담입니다. 오해하지 마세요.)