Tistory 첫 글 작성 : HTML, CSS 공부를 다시 해야겠다.

_

공부 기록이나 프로젝트 기록을 남기기 위해 블로그를 개설해야겠다고 마음 먹고,

깃 블로그, 티스토리, 네이버 블로그 중 고민하다가 티스토리 블로그를 개설하였다. 

 

사실 개설하고 싶었던 것은 깃 블로그였으나 깃에도 익숙하지 않고, 마크 다운 문법도 

전혀 익숙치 않았기 때문에 티스토리에서 조금씩 익혀보고, 깃 블로그는 추후에 도전..

 

티스토리 에디터가 생각보다 익숙치 않고 불편한거 같다... 

 

한 블로그에서 코드를 .git   이런식으로 작성한 것을 보고, 나도 이렇게 적어야지 했지만 

도형 그리기 같은 기능이 없어(있는건지 못찾는건지...) 처음에 고생을 좀 했다. 

 

처음에는 당연히 코드 블록을 사용해서 한 건 줄 알았다. 근데 코드 블럭으로는 저렇게 

안되고, 그럼 table로 하는 건가 했는데 뭔가 원하는 모양이 안나왔다. 다음에는 div를

써서 모양은 만들었는데, 입력하는 글자마다 px를 다르게 해줘야 했고, div를 쓰면

연속으로 안써지고 div 블록은 줄 바꿈이 되버려서 원하는 형식이 아니었다. 구글링을 통해

span 을 쓰면 줄 바꿈이 이루어지지 않는 것을 알게 되고, 드디어 성공...! 

 

혹시 나같이 삽질하는 사람이 있을까봐 글을 남긴다. (색상, padding, 그림자 정도만 원하는 대로

수정하면 원하는 대로 쓸 수 있을것이다)

 

<b><span style="padding: 1px; border: 1px solid #f7949a; color: #db232e; border-radius: 3px; box-shadow: 0.8px 0.8px 0.8px 0.8px #de8186;"> .git </span> </b>

 

일단 원하는 모양으로 만드는 것은 성공하고, 더 편리하게 하기 위해 class 명을 적용해서,

원하는 글자에 <span class="class명"> 이렇게 하면 간단하고

일관된 테마(?)를 적용할 수 있을 거라고 생각했다. 그런데 html 형식으로 글을

작성하고 미리 보기로 하면 css가 적용이 되는데, 막상 저장을 하면 적용이 안됐다.

 

에디터 html 모드에서 그냥 html 처럼, 이런 식으로 코드를 추가해 줬다. html 모드

미리 보기에서는 적용이 잘 되길래, span 태그 안에 넣어준 style을 지우고 저장을 

했는데,,,,날아갔다 (ㅜ.ㅜ) color picker로 색도 여러번 바꾸고, 그림자 크기랑 색도

다 해놨는데 날아가버려서 멘붕..이때 티스토리 접고 그냥 네이버로 갈까 살짝 고민..ㅎㅎ

<style>
	.simple_code {
    	padding: 1px; 
        border: 1px solid #f7949a; 
        color: #db232e; 
        border-radius: 3px; 
        box-shadow: 0.8px 0.8px 0.8px 0.8px #de8186;
    }
</style>

 

그래도 한번만 다시 해보자..하고 다시 구글링을 해보니 

[블로그 관리] - [스킨 편집] - [css]에 위에 코드를 넣어주고, 적용을 해준 후

글 작성시, html 모드에서 아래와 같이 코드를 넣어주면 훨씬 깔끔하고 간결하게 

적용가능!

<p><span class="simple_code">test</span></p>

test

 

 

그나마 html, css를 약간 알아 글을 쓰는데 성공했지, 아예 몰랐으면 힘들었을 거 같다.

조금 사용은 복잡하지만, 내가 하고 싶은대로 커스터마이징 할 수 있다는 건 참 좋은 것

같다. 틈틈히 html/css를 다시 공부해봐야겠다. 이상 험난했던 티스토리 첫 글 쓰기 끝.

 

 

#더 좋은 방법이 있다면 댓글 환영입니다.