서론

벨로그를 포스팅할 때 캡처된 이미지를 사용하건, 업로드하는 경우 각기 크기가 다르게 적용되니 가독성이 너무 떨어지게 된다. 한눈에 보이도록 포스팅된 글의 사진을 다시 수정하다가 포스팅으로 남겨두면 누군가에게 도움이 되지 않을까 생각했다.

네이버 블로그처럼 smart에디터 기능으로 이미지를 하나하나 편집하는 것은 누군가에겐 유용하지만 나는 그냥 에디터 로딩시간 기다리는게 더 싫은것이 사실이다. 꼭 편집을 해야한다면 포토샵을 쓰자는 주의다.

본론으로 돌아가서 결국 velog는 내가 작성할 때마다 html문서를 어느정도 자동작성되는 기능을 갖는다. 때문에 미리보기를 제공하고있다. 상단 "B"버튼으로 특정 문장을 두껍게 만들어보면 아래처럼 마크다운 문법을 자동으로 지정해주는 편의기능이다.

"두껍게"
**"두껍게"**

이미지를 조정하거나 글자를 정렬하는 방법을 고민중이라면 html에서 태그의 속성을 지정할 줄 알아야 한다. 내게 필요한 것이 있을때 w3 school와 같은 곳에서 모르는 것들을 찾아가면서 작성해야한다.

그래도 velog 대부분이 공부한 내용을 포스팅하는 경우가 많은데 공부순서에 갑자기 html+css를 공부해야하나? 그건 좀 비효율 적일것 같다. 그래서 이번에는 바로적용 하는 방법을 알아보고 velog안에서 유저가 적용가능한 css영역은 어디까지 인지 살펴본다.

자동으로 작성되는 tag?

가볍게 알아 두어야 하는 내용중 하나다.

위 그림처럼 내가 작성한다면 사이에 공백이 있는 단락을 기준으로 p태그로 감싸지며, 목록형은 li태그로 인식하고 감싸진다. 여기서 주의할 점은 첫번째 단락의 두번째 줄이 목록형으로 인식되지 않는 다는 점이다. 물론 마크다운에 익숙하다면 몰라도 되지만, 혹시 익숙하지 않다면 유심히 들여다 볼 필요가 있다.

이미지 크기조정

img 크기조정 방법

결국 이미지를 어떻게? 조정하는가에 있어서 가장 확실한 방법은 인라인스타일 지정을 하는 것이다. 게시글에 이미지를 업로드 혹은 붙여넣기를 하는경우 이미지url이 생성된다. 해당 url을 img태그로 감싼 후 스타일을 조정해주면된다.

<-- 벨로그로 업로드 된 후 생성된 url -->
![](https://velog.velcdn.com/**/***.jpg)

<-- img 태그에서 width속성 사용 -->
<img src="https://velog.velcdn.com//**/***.jpg" width=100px;>
  
<-- img 태그에서 style속성 사용-->
<img src="https://velog.velcdn.com//**/***.jpg" style="width=100px;height:100px">

정확한 이유는 모르겠지만 belog에서 html속성인 width과 heigth속성을 직접 사용하면 원본비율이 깨지지 않아 heigth가 적용되지 않는다. 결국 유저가 게시물의 css를 전부 핸들링 할수 없다. 그리고 전부 핸들링되도 안될것이다.

CSS 추가해볼 수는 없나?

이미지를 한땀한땀 지정하다보면 매우 귀찮다. 반복적인 작업은 언제나 손의 피로보다 머리의 피로가 더 큰것 같다. velog의 특성상 내가 입력한 text들이 html 형식으로 변경된다면 sytle을 추가해서 모든 이미지 크기를 조정할 수는 없을까? 라는 생각을 해봤다.

결론부터 이야기하면 적용되지 않는다. 미리보기에서 적용된 것 처럼 보이지만 게시가 된 이후에는 당연하게도 추가되지 않는다.

코드

<style>
.custom-img {
    width: 300px;
    height: 200px;
}
</style>

<-- 벨로그로 업로드 된 후 생성된 url -->
![](https://velog.velcdn.com/**/***.jpg)

<-- img 태그로 감싸서 sytle 지정 -->
<img src="https://velog.velcdn.com//**/***.jpg" class="custom-img" >

실제적용된 모습

실제 출간하기 후 게시물에 적용되는 모습을 보면 meta로 올라가서 css가 아니게 되는 모습을 볼 수 있다.

정리

결국 velog에서 직접 이미나 텍스트의 크기를 조정하는 방법은 직접 태그로 감싸고 sytle속성으로 지정하는 것이 가장 확실하다.

이미지 크기조정

<img src="https://velog.velcdn.com//**/***.jpg" style="width=100px;height:100px">

텍스트 크기조정

<p style="font-size: 16px;">이 o태그 텍스트의 크기는 16px입니다.</p>

<a style="font-size: 24px;">이 a태그 텍스트의 크기는 24px입니다.</a>

실제 크기가 변한 모습

이 o태그 텍스트의 크기는 16px입니다.

이 a태그 텍스트의 크기는 24px입니다.

텍스트 중앙정렬

<p style="text-align: center;">이 텍스트는 가운데 정렬됩니다.</p>

실제 중앙정렬된 텍스트

이 텍스트는 가운데 정렬됩니다.

서론만 공룡인 포스팅 끝