My Tech Blog (본문)

⚠️ 문제스크롤을 내릴 때 헤더가 화면 위쪽에 나타나도록 css에 position: fixed; 속성을 주었는데 본문 컨텐츠가 헤더 밑으로 들어가서 잘리는 문제🧐 원인header가 position: fixed로 설정되어 있으면, section이 그 공간을 자동으로 인식하지 못하고 최상단에 붙어 있는 상태가 된다. 이 문제를 해결하려면, section.visual에 margin-top이 아닌 padding-top을 사용해야 한다.margin-top은 요소의 외부 마진을 설정하는 것이지만, padding-top은 요소 내에서 실제 콘텐츠의 위치를 조정하기 때문에, 고정된 header의 크기를 고려해서 요소를 자리에 배치한다. ⚡ 해결법header의 높이만큼 margin-top 속성 추가/* section...

티스토리 heLLO 스킨을 쓰는데 컨텐츠(본문 영역) 가로 폭 길이가 너무 좁아서 양 옆 여백이 많이 남는다. 그래서 크기가 좀 큰 이미지를 첨부하면  본문 크기를 넘어가는 일도 많고, 코드가 조금만 길어지면 코드 블럭에 자꾸 스크롤이 생기는 것이었다. 그래서 오늘은 컨텐츠 좌우 여백 늘리는 방법을 연구해보았다. 처음에는 구글링 했는데 이 문제에 대한 정보가 많이 없어서 그냥 내가 개발자 도구 열어서 찾아보았다. 참고로 본문 컨텐츠 너비를 늘이면 코드블럭 가로 길이도 저절로 늘어날 거 같다고 생각했는데 늘려 보니 같이 늘어난다 ㅎㅎㅎ 1. 개발자 도구로 css 찾기일단 Mac 기준 option command i 눌러서 개발자 도구 가면 현재 본문 컨테이너 크기와 CSS 속성을 확인할 수 있다. 가서 해당..

이미지가 본문 폭을 벗어나는 문제  티스토리에서 hello 스킨을 적용해서 잘 쓰고 있는데, 이 스킨은 이미지가 본문 폭을 벗어났을 때 줄여주는 기능은 탑재하고 있지 않다. 그래서 블로그 스킨편집 창에서 손을 좀 봐 주어야 겠다고 생각했다. 일단 티스토리에서 width가 860보다 더 큰 이미지는 에디터에서는 무조건 860으로 보이게 해 놓은 거 같은데...글을 발행하면 최대크기가 1100으로 되어 있는지 1100까지도 나온다 1. 본문 쪽 맞춤 기능우선 스킨편집에서 html/css를 수정하지 않아도 본문 폭 맞춤 기능을 사용하면 이미지가 줄여지기는 한다.  하지만 에디터로 글을 작성할 때 이미지 크기랑 실제로 글을 발행하고 나서 보여지는 크기가 다르기 때문에 글 작성중에는 실제로 이미지 크기가 어느 정..