레이블이 블로그인 게시물을 표시합니다. 모든 게시물 표시
레이블이 블로그인 게시물을 표시합니다. 모든 게시물 표시

2021년 3월 7일 일요일

구글 블로그(블로거) 틀 벗어난 사진 크기 조정하기⁉️


 ☆ 일단 이 글을 읽으려는 방문자들 중에 html5 코딩에 대해서 기본 지식이라도 있다면 시간 낭비이니 그냥 나가시길. 아주 기초적이면서도 허접한 팁을 기술하려는 것이니 이 글을 읽는 것은 시간 낭비임.

 나 같은 경우 일단 컴퓨터는 켜고 끄는 거 밖에 할 줄 모르는 흔히 얘기하는 컴맹임. 예전에는 네이버 블로그를 하다가 짜증이 나서 다른 포털로 옮기려다가 다음의 티스토리는 뭔 생뚱맞은 초대장이 필요하다 해서 제쳐버리고 구글 블로거로 이전을 하였다. 대체 뭔 그지 같은 초대장⁉️ 요즘에는 클럽 하우스라는 앱이 초대장이 필요하다던데 에고지풍이네. 어쨌든 구글 블로그를 하다 보니 다른 건 차치하더라도 가장 애로사항이 바로 사진 크기 조절이 가장 어렵다는 것이다.
HTML5 형식
HTML5 보기
 블로그를 보면 사진을 크게 확대하면 이런 식으로 우측 가젯(?) 속으로 숨어버린다. 그렇다고 사진을 줄이면 넘 작아서 보기도 어렵고 당최 CSS 메뉴로는 조절하기가 힘들다. 지금까지 기냥 그러려니 하고 하고 있었는데 블로그 글을 쓰다가 좌측 상단을 보면....
구글 블로그 작성 선택
블로그 작성 형식 선택
 좌측 작성 아이콘(CSS?)을 클릭하면 일반 작성 모드인 '새 글 작성 보기'와 'HTML 보기'가 나온다. 거기서 'HTML 보기'를 선택하면
HTML5 형식 지정
HTML 보기
 그러면, 이런 알 수 없는 화면이 나온다. 이 상태로도 할 수는 있지만 복잡해 보이니 상단에 있는 HTML 형식 지정이란 아이콘을 클릭하면
HTML 정렬
정렬된 보기
 이런 식으로 정리가 된다. 그러면 이 부분에서 사진 부분을 수정하면 된다. 사진에 관련된 부분은
사진 이미지 크기 치수
사진 이미지 크기
 사진 좌, 우 여백에 해당하는 margin-left: 1em(사진 좌측 마진)에서 1em에서 '1'을 '0'으로 바꾸어주면 좌측 여백이 없어진다. 사진 높이는 height="480", 사진 폭은 width="640"이 해당 항목이다. 난 아이폰 일반 모드로 찍은 사진이라서 거의 '매우 크게'로 올리면 우측이 많이 삐져나온다.
 이제 저 치수를 알맞게 조정하면 된다. 뭐 나름대로 알아서 하면 되겠지만 나 같은 경우는 일단 폭이 아니 맞아서 우측이 튀어나오는 경우라 일단 폭을 먼저 맞춘 후 비율에 맞게 높이도 맞추었다. 굳이 높이까지 조정은 안 해도 되겠지만 사진이 실물과 비율이 달라서 이상해 보일 수도 있으니 각자 알아서들 하시길. 일단 폭은 570으로 하니 맞고 높이는 비율 계산을 하면 '480X640'이니 폭 대비 높이가 0.75니까 570X0.75는 427.5로 바꿨다.
블로그 틀 벗어난 사진 이미지
틀을 벗어난 사진 이미지
틀 안에 있는 사진 이미지
틀 안에 있는 사진 이미지
 뭐 이런 식으로 맞추면 될 듯하다.