🔑 코인 투자 추천 링크 🔑
1) HTML과 인터넷의 이해
2. HTML 코딩 실습환경 준비(ATOM에디터 다운 및 설치)
3. HTML 기본문법(태그) 이해하기 및 검색을 통한 태그공부
6. html 태그 속성 그리고 이미지태그<img> 사용법
7. 부모자식태그 <li><ul><table><tr><td>등
8. HTML 문서의 구조 및 다른 웹페이지 연결하기(a href)
이번시간에는 태그에 속성을 넣는법을 배우고 그 예제로 <img>태그를 사용하는법을 배워보겠습니다.
일단 인터넷에서 자유롭게 저작권 없이 사용할 수 있는 홈페이지가 있는데요.
pixabay.com이 유명한데 아래 unsplach.com 사이트가 더 이쁜 사진이 많네요!!
1. 이미지 파일 unsplach 홈페이지에서 다운받기
일단 홈페이지에 접속해서 적당한 사진을 가져와볼께요!
Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
unsplash.com
unsplash 홈페이지에 접속해서 coding로 검색해서 다운받았습니다.
다운받을때는 지금 작업하고 있는 바탕화면에 web폴더 안에 coding.jpg파일로 저장해주세요!!
2. IMG 태그에 속성넣어서 웹페이지에서 불러오기
<img src="coding.jpg">
자 그럼 적용해볼까요?
이런식으로 나옵니다!!
네.. 저희가 원했던게 아니죠?
그래서 속성값이란걸 줘야하는데요
이렇게 가로크기에 대한 속성을 100%로 해줍니다.
100%는 보여지는 화면에 100%로 맞춘다는 겁니다.
혹은 위치를 직접 정할 수 도 있습니다.
width=300 이런식도 가능하니 한번 테스트해보세요!!
<img src="coding.jpg" width=100%>
전 100%로 해봤습니다.
다시 한 번 결과를 볼까요?
네, 우리가 원하는 결과를 볼 수가 있네요!!!
img 태그와 img 태그를 사용하기 위한 속성에 대해서 배웠습니다.
속성은 태그에 추가적인 정보가 필요할때 사용하는데요,
위치라든지, 크기라든지, 사이즈라든지, 단순히 태그 자체만으로 이해하기 힘들거나 세밀하게 조정이 필요할때 속성태그를 사용합니다. 속성은 태그마다 사용법이 조금씩 다르나, 역시 검색을 통해서 상세한걸 알수 있어요!!!
그럼 이번 강의는 여기까지 합니다.!!
자, 한번씩 이것저것 테스트해보면 더 좋겠죠?
생활코딩 강의를 참고로 필요에 맞게 재잭성하였습니다.
opentutorials.org/course/3084/18407
댓글