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
반응형
'연구원생활' 카테고리의 다른 글
[html] HTML에서 style 속성을 활용한 배경색 설정하기 (0) | 2025.04.08 |
---|---|
[html]div와 span을 이용하여 영역 나누기 (0) | 2025.04.07 |
[html] html 속성 (0) | 2025.04.07 |
[html] 링크 추가하기 (0) | 2025.04.07 |
[html] <br> 태그 : 줄 바꿈 (0) | 2025.04.07 |