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