안녕하세요. 박대리입니다. 이번 포스팅에서는 북클럽 스킨의 포스팅 제목 배경을 변경해보겠습니다. 북클럽의 포스팅 제목 배경 기본값은 썸네일 혹은 대표 이미지입니다. 썸네일에 따라 위의 그림처럼 포스팅 제목이 잘 인식이 안되는 경우가 있습니다. 제목 폰트 색상 기본값이 흰색이라 어두운 배경이 아니면 제목이 잘 보이지 않습니다. 이를 해결하기 위한 방법 중 하나가 배경을 특정한 이미지로 고정시키는 것입니다. HTML 편집기의 파일 업로드 창에서 추가 버튼을 눌러 사용할 이미지를 추가하고 적용을 클릭합니다. 업로드한 파일을 마우스 우클릭하여 링크 주소 복사를 하여 링크 주소를 메모장에 옮겨놓습니다. HTML 편집창에서 Ctrl+F(맥 cmd+f) 를 눌러 div class=“post-cover” 를 검색하여 ..

안녕하세요. 티스토리 북클럽 스킨의 메인 화면의 기본값에서는 포스팅 목록 간에 구분선이 없습니다. 이번 포스팅에서는 북클럽 스킨의 포스팅 목록에 구분선을 추가해보겠습니다. 북클럽 스킨 기본값은 블로그 메인 페이지의 포스팅 목록 사이에 구분선이 없습니다. border 속성을 사용하여 포스팅 목록이 확실히 구분되도록 구분선을 추가해보겠습니다. HTML 편집기를 열고 CSS 속성창에서 Ctrl+F(맥 cmd+f) 를 눌러 .list-type-thumbnail .post-item { 을 검색하여 찾아줍니다. 그런 다음 우선 border-bottom: 1px solid black; 을 추가해 줍니다. 적용을 누르고 화면 새로 고침을 하여 변경된 블로그 페이지를 확인합니다. 간단한 방법으로 위의 그림과 같이 구분선..

안녕하세요. 이전 포스팅에서 txc-textbox 속성과 border 속성을 활용하여 글 상자 서식을 만들었습니다. 이번 포스팅에서는 기존에 만들었던 글 상자 모서리에 라운드 효과를 주는 방법에 대해 알아보겠습니다. 위의 그림과 같이 기존의 글 상자 서식에서 border 속성 중 하나인 border-radius를 활용하여 모서리에 라운드 처리를 해보겠습니다. 속성값은 위와 같으며 기존 글 상자 속성값에서 border-radius: 20px 속성값만 추가되었습니다. border-radius: 20px의 의미는 4개의 모서리 모두 반지름 20px의 라운드를 적용한다는 뜻입니다. 4개의 모서리에 각기 다른 반지름 값의 라운드를 적용하고 싶다면 아래와 같이 속성값을 나누어 적용하면 됩니다. 위 속성의 의미는 상..

안녕하세요. 이번 포스팅에서는 텍스트에 그림자 효과를 주는 HTML 속성값에 대하여 알아보겠습니다. 우선 아래와 같이 텍스트 그림자 효과의 예시를 만들어보았습니다. 내용을 입력하세요 위의 속성값을 사용하면 그림처럼 텍스트에 그림자 효과를 줄 수 있습니다. 텍스트에 그림자 효과를 주는 속성값은 ‘text-shadow’이며 그 외 color, font-size, font-weight는 제가 임의로 구성한 값입니다. color = 글자 색상 font-size : 글자 크기 font-weight : 글자 두께 굳이 위의 속성값들을 추가하지 않아도 되며, text-shadow 속성만으로 그림자 효과를 줄 수 있습니다. text-shadow 속성은 총 4개의 값으로 구성됩니다. ex) text-shadow: 3px..

안녕하세요. 이번 포스팅에서는 HTML로 글 상자 서식을 만들어보겠습니다. 블로그 글을 쓰다 보면 강조하고 싶은 부분이나 구분하고 싶은 부분에 글 상자를 사용하는 경우가 있습니다. 위와 같이 글 상자를 만들 경우 티스토리 글쓰기에서 쉽고 빠르게 글 상자를 추가하는 방법을 알아보겠습니다. 티스토리 글쓰기의 서식 기능을 활용하여 글 상자 HTML 코드를 저장해두는 방식입니다. 우선 티스토리 관리창에서 콘텐츠 -> 서식 관리로 들어갑니다. 우측 상단의 서식 쓰기를 클릭합니다. 원하는 서식 제목을 입력하고 HTML 편집창을 열어줍니다. HTML 편집창에 위의 서식 값들을 입력하고 다시 기본 모드로 돌아옵니다. 위 서식 값은 배경은 white, 상자와 글 여백은 10px, 테두리 두께는 5px, 테두리 색상은 파..