본문 바로가기

연구원생활

[html] 이미지 추가하기

728x90
반응형

🖼️ <img> 태그 기본 문법

<img src="이미지경로" alt="대체텍스트">

📌 주요 속성 설명

src 이미지의 경로 (필수!)
alt 이미지 설명 (이미지가 안 보일 때 표시되거나 접근성용)
width / height 이미지 크기 지정 (px 또는 %)

 

🔍 예제 1: 인터넷에 있는 이미지 불러오기

<!DOCTYPE html> 
<html>

    <head>
        <title>Weekly Codeit</title>
        <meta charset="utf-8">
    </head>

    <body>
        <h1>Weekly Codeit</h1>
        <!--구글에서 이미지 주소를 들고오기-->
        <img src="https://velog.velcdn.com/images/kmnkit/post/2104bef0-3c9a-406b-ba6f-7f76578f5bf9/machine-learning.jpeg">
        <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? <br>
            하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. <br>
            마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.</p>
        <p>유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://www.codeit.kr/topics/practical-unix-commands">자세히 보기</a>
    </body>
</html>

Weekly Codeit

생산성을 높여줄 유닉스 커맨드 꿀팁

생각만하면 모든게 이루어진다! 꿈 같은 이야기죠?
하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다.
마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.

유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!

자세히 보기

🔍 예제 2: 다운로드 받은 이미지 추가하기

* 다운로드 받은 이미지 파일명만 사용할 경우, index.html 파일이 들어있는 경로에 추가하기

<!DOCTYPE html> 
<html>

    <head>
        <title>Weekly Codeit</title>
        <meta charset="utf-8">
    </head>

    <body>
        <h1>Weekly Codeit</h1>
        <!--구글에서 이미지 주소를 들고오기-->
        <img src="thumbnail-unix.png">
        <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? <br>
            하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. <br>
            마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.</p>
        <p>유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://www.codeit.kr/topics/practical-unix-commands">자세히 보기</a>
    </body>
</html>

Weekly Codeit

생산성을 높여줄 유닉스 커맨드 꿀팁

생각만하면 모든게 이루어진다! 꿈 같은 이야기죠?
하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다.
마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.

유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!

자세히 보기
728x90
반응형