HTML 무료로 배우기 #5 img, 이미지 올리기

 

이렇게 아래의 코드를 올린다

 

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" width="100%">
</p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. </p>

 

 

이렇게 img src = "https;;//.........> 를 올리는데 

img만 쓰면 이미지가 안올라온다. 그래서 속성(attribution)을 넣어주어야 하는데 source의 줄임인 src를 뒤에 붙여주고 이미지 파일의 주소를 넣어준다. img src = ""의 형태가 된다.

 

 

이렇게 하고 나면...

 

 

이런식의 결과가 나온다. 이미지가 중간에 횡하니 만들어져서 조금 어색하다

 

 

 

그래서 바꾸어주기를

 

 

width = "100%" 를 넣어주는것이다. 그렇게 되면

 

 

 

이렇게 화면에 가득차게 바꾸어줄 수 있게 된다.

 

 

 

 

 

컴퓨터에 있는 이미지를 쓸 수 도 있다

 

일단 이미지를 다운로드 한다

아래 사이트에서 무료로 다운로드 할 수 있다.

unsplash.com

아름다운 무료 이미지 및 사진 | Unsplash

 

여기에서 다운로드를 하고

다운로드한 이미지를 드래그해서 Explorer 에 web에 넣어준다

 

 

그다음 파일 이름을 img src = "...." 에 넣어주면

 

 

 

짠! 이렇게 이미지가 올라간다

 

 

여기까지도 어려운것은 없는 것 같다. 마치 산수처럼 그냥 쉽다. 이렇게 쉬운건줄 알았으면 미리 배우는것인데... ㅎㅎㅎ

다행인 일이다! 재밌는것 같다. 앞으로도 계속 배워 나가겠다.