#17.이미지 링크와 이미지 맵 / HTML/CSS 기초 강의
HTML-код
- Опубликовано: 27 май 2021
- 이번 영상에서는 링크와 이미지를 주제로하여 "이미지 링크"와 "이미지 맵"을 배워보도록 하겠습니다. 🙋🤥
이미지 링크는 이미지에 링크를 거는 단순한 방법이지만, 이미지 맵은 map 태그와 area 태그, usemap 속성을 사용해야해서 조금 복잡할 수 있는데요!
같이 한 번 배워보도록 할게요!
영상이 마음에 드셨다면 구독과 좋아요 부탁드립니다. 👍😁
👇👇이미지맵 실제 사용 사례 👇👇
www.seoul.go.kr/seoul/autonom...
-------------------------------------------
🏳🌈 수코딩 공식 웹사이트 : www.sucoding.kr 🏳🌈
-------------------------------------------
📙 HTML+CSS 강의 플레이 리스트
• HTML/CSS 기초 강의(강좌) - 프...
📕 자바스크립트 강의 플레이 리스트
• Javascript 기초 강의(강좌) -...
📗 HTML+CSS+JS 실습 플레이 리스트
• HTML+CSS+JS 미니 프로젝트 실습...
.....................................................
🌟 수코딩 🌟
코딩, 이제 누구나 쉽게 배울 수 있어요!🙌
저와 함께 즐거운 코딩 공부 같이 해볼까요?
구독과 좋아요 댓글은 제가 다음 영상을 만들때 큰 힘이 됩니다❤️
.....................................................
🎶 BGM 정보 Music | With You by Declan DP
Watch: • Royalty Free Music for...
License: www.declandp.info/license
Download/Stream: hypeddit.com/link/gbhbv9
#HTML #debug #debugging #수코딩
![비쥬얼 스튜디오 코드(vscode) 단축키 20개 [재업로드]](http://i.ytimg.com/vi/vDLbMnx7p5o/mqdefault.jpg)
![비쥬얼 스튜디오 코드(vscode) 단축키 20개 [재업로드]](/img/tr.png)
![J.P., NLE Choppa - Bad Bitty (Remix) [Official Music Video]](http://i.ytimg.com/vi/rBDa6BCvw10/mqdefault.jpg)
수코딩의 고퀄리티 유료 강좌 듣기!
👉 www.sucoding.kr
항상 좋은 강의 잘 보고있습니다.
새로운걸 배웠네요 감사합니다!
모든영상 정주행합니다. 홈페이지 만들일이 생겨서 코딩을 처음 접하고 여러 유튜브 찾아봤는데, 제일 초보에 맞게 자세히 쉽게 알려주셔서 감사드립니다! 앞으로 강의 계속 부탁드립니다!!
정말 감사합니다. 이미지에 여러 개의 링크를 걸기 위해 여러 곳을 다녔는데 최고의 강의입니다. 설명도 꼭 필요한 것만 해 주셔서 쉽게 배웠습니다.
도움이 되셨다니 다행입니다~~!
이미지 태그 방법 따라서 햇는데 바로 되네요!!
쉽게 알려주셔서 감사합니다 ㅎㅎ
JJ님의 이해력이 높으셨던 것 뿐입니다 :)
너무나 좋은 강의로 잘 배우고 있습니다!! ㅠㅠ 이런 좋은 채널이 더 성장해야하는데 계속 하시다보면 점점 많이 늘어나실거에요!! 정말 감사합니다!!
감사합니다 :)
HTML/CSS 수업 너무 재미있네요. 설명을 자세히 너무 잘 해주시는 것 같아요. 강의 1부터 17까지 하루하고 반나절만에 끝냈네요. 허허허 정말 감사드립니다. :)
우와 열정에 박수를 드립니다. 👏
대단하시네요! ^^
감기 걸리셨나봐욤~ 건강조심하세횸!!! 하지만 또 다음 강의가 빨리~ 올라왔음 좋겠어염~~~
와~~~ 이거 기능 바로 사용하고싶은데....앞 부분부터 봐야겠네요..ㅠㅠ
화이팅입니다!
아주 좋은 이미지 링크 방법을 배웠네요. HTML/CSS 기초강의 처음부터 쭈~욱 듣고 있는데, 구독과 ‘좋아요’ 버튼 누르는게 아깝지 않을 만큼 많은 정보를 얻어가고 있습니다. 노트에 필기 하며 열심히 영상 시청하고 있으니 앞으로도 잘 재밌는 코딩 강좌 많이 부탁드려요.
ㅎㅎㅎ 감사합니다
영상 잘 보고 있습니다 특히 HTML 강의가 맘에 들었어요! 강의 중에 혹시 폼(form) 부분도 기대해봐도 될까요?? 중요하면서도 내용이 많아서 정리하기가 쉽지가 않아서요!
오늘 올라온 따끈따끈한 영상이네요. 예쁜 블로그 사이트같은 것들 만드려면 이미지맵은 필수일 것같은데 좋은 강의 잘 들었습니다! 질문이 하나 있는데요. 알려주신 사이트에서 좌표값 추출한다고 하면 img태그의 width나 height 속성값은 지정 못하는거 맞나요? 좌표 추출 전에 이미지 크기를 조절해야할까요?
좌표라는게 결국 이미지가 기본 베이스가 되므로 좌표 추출전에 이미지를 조절하시고 하셔야 합니다 :)
속성보는 단축키가 어떻게 되나요??
은평구의 테두리를 완벽하게 클릭 가능한 범위로 설정하려면 어떻게 해야 하나요?
다각형으로 연결하시면 됩니다. 영상에서 소개하는 사이트를 이용해보세요
재생목록 잘 정리해주셔서 감사합니다. 3시간동안 논스톱으로 전부 다 들었습니다. 수많은 기초 강의를 뒤적거렸지만 이것이 제일갑니다. 그리고 이게 마지막 강의가 아닌가요..?
현업이 바빠서 업로드를 못하고 있지만 계속 올라올 예정입니다 :)
영상 잘 봤습니다~ 요즘 코딩 공부하고 있는데 유용하네요~
강의는 참 좋은데 마이크 울리는 문제를 해결하면 조금 더 편안하게 들을 수 있는 좋은 강의가 될 것 같습니다~ ^^
마우스 올라갈때 맵의 area태그가 보이는 방법은 없나요? 손모양이 나타남과 동시에 area맵의 경계가 나타나는 방법 말입니다.
일반적인 방법으로는 없고 추가 디자인 및 코드 작업이 필요합니다.
나에게는 이미지가 보이는데 다른 사람에게 파일을 넘기면 이미지가 안보이는데 어떻게 해야되나요?
강의 잘 보고 있습니다!! 강의 보다가 궁금한 점이 생겨서 질문올려봅니다! 5:00 쯤에
ctrl + space 입니다 :)
잘보고 있습니당 ㅎㅎㅎ 혹시 span하고 div는 혹시 html강의에 있는걸까요?? 개발자도구에서 자주 본거라 그것두 배우고 싶은데 수코딩님 강의에 있으실까요?
아직 없네요! ㅠㅠ 조만간 제작해서 올리겠습니다 :)
쉬운설명 정말 감사힙니다!! 하나 문의드릴게 있는데 이미지 맵했을때 PC에서는 그 좌표에 맞게 링크가 잘 걸려 나오는데 모바일에서는 리사이징되어 좌표크기에 맞지 않게 나오는데 방법이 있을까요??
자바스크립트를 이용하면 가능합니다. 아래의 게시물을 참고해주세요! crone.tistory.com/310
혹시 html/css 강의를 총 몇 강 정도로 생각하고 계시는지 알 수 있을까요?
25강 내외로 생각하고 있습니다. :) 참고로 조금 더 높은 퀄리티의 영상은 별도의 멤버쉽 전용 동영상으로 공개하기 위해서 따로 준비하고 있습니다.
@@sucoding 알려주셔서 감사합니다!ㅎㅎ
질문하나 드려도 될까요? 예전에는 이미지맵을 드래그해서 그릴수 있는 기능이 드림위버 자체에 있었는데 여기서도 보이긴 하는데 클릭하면 먹통이되고 이미지위에 드래그가 되질 않아요 ㅜ 왜그런건지 혹시 알 수 있을까요? 일단 문제는 위 영상보고 소스를 붙여넣는 방식으로해서 해결하긴 했습니다 감사합니다~! (드림위버 2021버전 사용중)
안녕하세요 수코딩님! 알려주신 강의 덕분에 배너작업을 무사히 마쳤답니다!!!^^ 감사해요.
그런데 html 파일 업로드 시,
이미지를 내부리소스로 했을땐 엑박이 뜨던데
외부리소스로 하니까 정상적으로 되더라구요!
혹시 무슨 차이가 있나요?
두 경우 다 html파일을 열었을 땐, 잘 되었는데 사이트에 업로드하니 엑박이 떴습니다.
이미지 엑박은 경로로 이미지를 탐색 못했다는 이야기이므로 서버에 올릴 때 이미지 파일도 같이 올렸는지 확인해보시고 이미지도 같이 올린게 맞다면 ./ 대신에 /로 경로 시작을 잡아주세요. 그래도 안되면 폴더 구조를 알려주세요!
@@sucoding 아~! 이미지 파일도 같이 업로드를 해두어야 하는거군요! 코딩에 대한 지식이 전무하다보니..ㅎㅎ 친절한 설명 감사드립니다! 급하게 시작한 공부지만 꾸준히 해보려구요^^bbb
@@yeonneoy 화이팅입니다!
map을 html에 사용했을 때 css에는 태그랑 이름을 뭐로 해야되나요?
질문이 이해가 잘 안되네요 .. ㅎ
선생님 혹시 이미지 위치 이동시 중앙, 왼쪽, 오른쪽이 아닌 외쪽에서 몇픽셀 위에서 몇픽셀과 같이 세세한 위치 이동은 어떻게 하나요?
안녕하세요~! position 속성을 사용하면 됩니다. 어떤 HTML 요소에 position:absolute; 를 지정하면 top, left, right, bottom 속성으로 px 단위로 위치를 지정할 수 있습니다!
@@sucoding 감사합니다
혹시 pc에서 작성한후
해당코드와 이미지파일이포함된
폴더를
모바일로보낸후
열었을땐
Url링크로 띄운이미지는보이는데
폴더내에저장해둔 이미지는
안보여요 ㅠ
Pc상에선잘보이는데..
이것은 어떻게해결안되나요?
모바일로 확인해야 하는 상황이시면 간단하게 배포하고 확인해보시는 건 어떠세요? ruclips.net/video/X3pjLc7BiwU/видео.html
좋아요와 구독~
ㅎㅎㅎ 감사합니다
안녕하세요! 천천히 따라서 작성을 해보았는데요 이미지 엑박으로 실행이 안되네요 ㅠㅠ 소스는 그대로 복붙했는데 엑박이 뜨는 이유가 있을까요..?
이미지 파일도 추가하셨을까요?
@@sucoding 답변 정말 감사합니다!!
제가 다른 댓글에서도 보긴 했었는데요! 이미지 파일을 추가한다는말을 이해를 못해서요… ㅜㅜ 사용중인 폴더안에 이미지 파일 저장 후 코딩 그대로 저장을 하였는데 엑박이 뜨더라구요.!!
@@user-jp1zp5mv3q 폴더압축해서 구글드라이브 링크 공유주시거나 sucoding@naver.com 으로 보내주시면 봐드릴게요 :)
@@sucoding 수코딩님!!!!! 다행히 수코딩님한테 메일 보내드리기 전에 제가 다시 한번 해보니까 업로드가 되네용..엄청 기초적인 거였어요 ㅠㅠ..친절하게 말씀 댓글 남겨주셔서 감사합니다!!🥰