• 방명록을 남겨 주세요 :-) 일주일 동안 열지 않기
  • 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

깨알팁

팁 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

웹팁 PC에서 이미지 로고 선명하게 하는 방법

이윰
291 0 0

PNG, JPEG 이미지 로고를 PC에서 선명하게 출력하는 방법입니다.

 

이미지 비율을 유지한 채 크기 줄이기

<div class="logo">
<img src="로고 이미지 경로/logo.png">
</div>

예를 들어 위와 같은 위치에 로고가 배치된다고 가정하고, PC에서 보일 로고 사이즈를 가로 50px 세로 40px로 하고 싶다면, 
두 배 크기인 가로 100px 세로 80px의 크기로 만들어 줍니다.
(모바일은 해상도가 크기 때문에 PC 로고의 두 배 크기로 만들어 주는데 디자인이 동일하다면 같은 걸 사용해도 되겠죠?!)

 

다음, 아래와 같이 이미지를 비율을 유지하고 크기만 줄여 줍니다.

<div class="logo">
<img src="로고 이미지 경로/logo.png" style="width: auto; height: 40px;">
</div>

또는, 아래처럼 스타일 시트에서 이미지 크기를 줄여 줍니다.

.logo img { width: auto; height: 40px; }

<비교>

logox1-min.png

<원본 사이즈로 업로드한 로고 50x40>

logox2-min.png

<두 배 크기로 업로드하고 이미지를 비율에 맞게 크기를 줄여준 로고 100x80>

신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 조회 수
0
image
63
0
image
291
0
normal
39
0
normal
114
+1
normal
168
0
normal
224
+1
image
342
+2
image
362
+4
normal
1103
+1
image
268
+1
image
228
0
normal
176
0
normal
200
+1
normal
1045
+1
normal
128
+5
image
253
+1
normal
245
+2
normal
1821
+1
image
298
+1
normal
314