실습 강의

로고 올리는 방법 강의

이미 만들어둔 HTML 강의 문서 상단에 회사 로고를 보기 좋게 넣는 방법을 5단계로 알아봐요. HTML을 몰라도 그대로 따라 하면 됩니다.

소요 시간 약 5분 난이도 왕초보 대상 HTML 강의 문서 보유자 준비물 로고 이미지 파일
START

시작하기 전에 3가지만 확인하세요

아래 세 가지만 맞으면 이 강의를 그대로 따라 하실 수 있어요.

1

로고 이미지 파일

.png 형식을 추천해요. 배경이 투명하면 가장 예쁘지만, 흰 배경 로고도 괜찮아요 — 이 강의에서 그 처리 방법도 알려드려요.

2

문서 파일 위치

로고를 넣을 index.html 파일이 어느 폴더에 있는지 알고 있어야 해요. 그 폴더 안에 로고 파일을 함께 둘 거예요.

3

배포 방식

Cloudflare Pages처럼 폴더 전체를 올리는 방식인지, claude.ai 아티팩트처럼 파일 하나만 다루는 방식인지 확인하세요. 방법이 조금 달라져요.

알아두면 좋아요

웹 문서에 이미지를 넣는 기본 원리는 <img> 태그 하나예요. 이 태그가 "이 경로에 있는 이미지를 여기에 보여줘"라고 브라우저에게 알려주는 역할을 합니다.

STEP 1 / 5

로고 파일을 문서와 같은 폴더에 넣기

1

로고 이미지 파일을 index.html이 있는 폴더에 복사

파일 이름은 띄어쓰기나 한글보다는 영어와 숫자로 짧게(예: logo.png) 지어두면 나중에 경로 오류가 날 확률이 줄어들어요.

📁폴더 구조 예시
C:\ai\내강의자료\
 ├─ index.html   ← 강의 문서
 └─ logo.png     ← 새로 넣을 로고 파일
STEP 2 / 5

CSS로 로고 스타일 만들어두기

2

<style> 태그 안에 로고용 스타일을 추가하세요

아래처럼 크기와 여백을 정해두면 로고가 너무 크거나 찌그러지지 않아요. 흰 배경 박스로 감싸두면 다크 모드에서도 로고가 안 묻혀요.

{ } style 안에 추가 
.brand-logo {
  display: block; height: 30px; width: auto; margin-bottom: 20px;
  background: #ffffff; padding: 6px 12px; border-radius: 10px;
}
포인트

height만 지정하고 width: auto로 두면 로고 원래 비율이 그대로 유지돼서 안 찌그러져요. 크기를 바꾸고 싶으면 height 숫자만 조절하세요.

STEP 3 / 5

<img> 태그를 헤더 맨 위에 넣기

3

문서 맨 위쪽, <header class="hero"> 바로 다음 줄에 삽입

보통 제목(<h1>)보다 위에 있는 짧은 뱃지 문구 앞자리가 가장 자연스러운 위치예요.

</> HTML 본문에 추가 
<header class="hero">
  <img class="brand-logo" src="logo.png" alt="회사 로고"> ← 이 줄 추가
  <span class="eyebrow">...</span>
  <h1 class="title">...</h1>
  ...
</header>

src="logo.png"는 "같은 폴더에 있는 logo.png 파일"이라는 뜻이에요. STEP 1에서 넣은 파일 이름과 정확히 똑같아야 해요(대소문자도 구분됩니다).

STEP 4 / 5

저장하고 미리보기로 확인하기

4

파일을 저장한 뒤, index.html을 더블클릭해 브라우저로 열어보기

헤더 맨 위에 로고가 흰 배경 박스 안에 예쁘게 들어갔는지 확인하세요. 크기가 마음에 안 들면 STEP 2의 height 값을 조절하고 새로고침만 하면 돼요.

STEP 5 / 5

웹서버에 재배포해서 실제 주소에 반영하기

5

Cloudflare Pages를 쓰고 있다면, 문서가 있는 폴더에서 아래 명령어 실행

>_ 명령 프롬프트 
C:\ai\내강의자료> npx wrangler pages deploy . --project-name=프로젝트명

폴더 전체를 올리는 방식이라, index.html과 logo.png가 함께 자동으로 업로드돼요. 배포가 끝나면 같은 공개 주소(https://프로젝트명.pages.dev)에서 바로 확인할 수 있어요.

완료

이제 이 문서를 다시 수정할 때도 같은 방식(수정 → 저장 → wrangler pages deploy)을 반복하면 됩니다.

참고

한 파일짜리 문서(아티팩트)라면 방법이 달라요

claude.ai 아티팩트처럼 파일 하나만 다루는 환경에서는 logo.png를 별도 파일로 둘 수 없어요. 그래서 이미지 자체를 코드 안에 통째로 집어넣는 방법을 씁니다.

폴더 전체를 올리는 경우 (Cloudflare Pages 등)

  1. logo.png 파일을 그대로 폴더에 둔다
  2. src="logo.png"로 상대 경로 참조
  3. 폴더 전체를 배포 명령으로 업로드

파일 하나만 다루는 경우 (아티팩트 등)

  1. 이미지를 "Base64"라는 방식의 긴 글자로 변환
  2. src="data:image/png;base64,(긴글자)" 형태로 코드에 직접 삽입
  3. 이미지 파일 없이도 코드 하나로 완성됨
직접 하지 않아도 돼요

Base64 변환은 손으로 하는 작업이 아니라, Claude에게 "이 로고 파일을 아티팩트에도 넣어줘"라고 요청하면 자동으로 변환해서 넣어줍니다.

문제 해결

자주 겪는 문제

로고 자리에 깨진 이미지 아이콘만 보여요

대부분 파일 이름이나 경로가 안 맞는 경우예요. src="logo.png"에 적은 이름과 실제 폴더에 있는 파일 이름(대소문자 포함)이 정확히 같은지 확인하세요.

다크 모드로 보면 로고가 잘 안 보여요

로고 배경이 투명한데 글자가 어두운 색이면 다크 모드 배경(짙은 색)과 겹쳐서 안 보일 수 있어요. STEP 2의 .brand-logo에 있는 background: #ffffff가 항상 흰 배경을 깔아주는 부분이라, 이 줄을 지우지 않으면 괜찮아요.

로고가 너무 크거나 찌그러져 보여요

.brand-logo의 height 숫자를 줄이거나 늘려보세요(예: 30px → 24px). width는 auto로 두어야 비율이 안 깨져요.

재배포했는데 옛날 화면이 그대로 보여요

브라우저 캐시 때문일 수 있어요. Ctrl + Shift + R로 강력 새로고침을 해보세요. 배포 자체가 실패했다면 명령 프롬프트에 에러 문구가 남아있으니 그 문구를 확인하세요.

마무리

셀프 체크리스트

완료한 단계를 체크해보세요 0 / 6