Kudos
Collect
Twiiter
Facebook
Share

[HTML 스타터] 콘텐츠 입력하기 III

마지막 업데이트 3년 전
1 0 0 0
이 글은 시리즈 ‘HTML 스타터’ 의 5 번째 포스팅입니다. 시리즈 더보기

HTML 스타터 여러분, 안녕하세요? 지난 연재에서 h1h2를 이용한 제목과 부제목 입력하는 방법에 대해 알아보았습니다.🧐 지금까지 제가 공부한 HTML은 간단한 규칙만 이해하고 태그 몇개만 외워두면 어렵지 않은 작업인것 같아요. 나중에 연재할 스타일링(css)는 다른 문제이지만 말이에요🤔.여기서는 간단한 HTML 사용방법과 태그를 이용한 콘텐츠 입력방법에 대해 포스팅하니 자세한 태그는 w3schools.com을 이용하시길🙏🏻

오늘은 지난 연재시간에 이어 이미지 입력하는 방법에 대해 알아보겠습니다.
팔로팔로미~!🙋🏻‍♀️

1. 이미지 태그 = img

지난 시간 타이틀에 이어 오늘은 메인 사진을 넣어보겠습니다. FYI 웹페이지에 사진을 넣을 때 내가 찍은 사진이 아니고 다운받은 사진이라면 사진의 사용가능한 범위를 알고 사용해 주세요. 특히 상업용으로 사용이 금지되어있는 사진을 사용은 노노해요! 🙅🏻‍♂️👮🏻‍♀️ 이점은 반드시 기억해 주세요!

사진을 받을 수 있는 사이트 중 제가 자주 사용하는 사이트가 있는데요, 바로 pexels.com입니다. 이곳은 상업용으로도 사용가능한 사진이 있는 곳이니 참고하시면 좋을것 같아요.🙆🏻‍♀️

www.pexels.com
www.pexels.com

이미지는 img태그를 이용하여 넣을 수 있습니다. 여기서 잠깐 📌 img태그는 다른 태그들처럼 종료태그가 없이 사용할 수 있는 태그입니다. 🤓 그럼 여기서 이미지를 다운받아 지금까지 작업한 hello.html에 이미지를 넣어보도록 하겠습니다.

먼저 지난번 작업한 html을 볼까요?

<html>
    <body>
        <div class="main-title">
            <h1>HTML 스타터를 위한 가이드!</h1>        
        </div>

        <div class="sub-title">
            <h2>컴알못도 할수있다! HTML 베이비들을 위한 안내서</h2>
        </div>

        <div class="main-picture">

        </div>

        <div class="main-contents">

        </div>    
    </body>
</html>

2. 이미지 넣어보기!

그럼 img태그를 이용하여 main-picture에 이미지를 넣어보겠습니다. 여기서 중요 포인트‼️ img태그에는 반드시 src를 붙여야합니다. Source의 간추린 말로 src=뒤에 반드시 이미지 파일의 주소를 입력해 주세요. 여기서는 제 컴퓨터 다운로드 파일에 있는 사진을 이용하지만 실제 서버에서 운영하는 웹페이지일 경우 클라우드 파일에 사진을 업로드하여 사용하시는 것이 좋습니다.

<html>
    <body>
        <div class="main-title">
            <h1>HTML 스타터를 위한 가이드!</h1>        
        </div>

        <div class="sub-title">
            <h2>컴알못도 할수있다! HTML 베이비들을 위한 안내서</h2>
        </div>

        <div class="main-picture">
            <img src="file:///Users/sunbee/Downloads/computer-hands-laptop-2115217.jpg">

        </div>

        <div class="main-contents">

        </div>    
    </body>
</html>

그럼 위의 html을 실제 브라우저에 열어보겠습니다. 참! 조금 전에도 이야기했듯이 위의 코드를 여러분의 컴퓨터에 그대로 적용하시면 이미지가 안보여요🙅🏻‍♂️

Uploading an Image
Uploading an Image

We will adjust the size of image in CSS post.

Hi, it's Alexis here! I recently began studying coding (basically HTML) and thought I can share some of infos (that I've been learning so far) with some of you who just stepped into this world. I will be posting the basics of HTML and others including stuff like "Mac How to..."

연재
HTML 을 처음 접하는 분을 위하여 최대한 알기 쉽게 설명하려고 노력하였습니다. HTML 을 공부해야 하는데 알기쉬운 설명의 교재를 찾지 못한 분들에게 도움이 되면 좋겠습니다.
Essedrop - 이미지 주소를 만드는 가장 빠른 방법
 

독자 의견

  • 이미지 사이트 정보 잘 보고 갑니다~^^

저자 @alexis 에게 의견 남기기:

Please sign in to comment.
Markdown is also available in comment.