| 어두운 배경이 싫으시다면 페이지 우측 하단에 보이는 초승달 모양의 아이콘을 클릭하면 화이트모드로 변경됩니다. 초승달 모양 버튼 : `화이트/다크 모드` 전환 |
 |
이전 포스팅에 이어서 hELLO 스킨에 대한 CSS 편집하는 부분을 추가해서 설명하도록 하겠습니다. 해당 부분은 hELLO 스킨에 대한 기본적인 스타일 편집으로 꼭 하실 필요는 없고, 하더라도 취향에 맞춰 본인에 맞춰 값을 수정해 주시면 됩니다.
아직 hELLO 스킨을 적용하지 않으셨다면 아래 링크를 통해 스킨을 먼저 적용하시길 바랍니다. 해당 글은 hELLO 스킨을 기준으로 설명합니다.
티스토리 스킨 적용하기 - hELLO 스킨
1. 스킨 받기제가 이전 블로그에서부터 사용하던 hELLO 스킨을 다운로드받아 추가해보도록 하겠습니다. hELLO 티스토리 스킨을 소개합니다.hELLO 는 2020년 3월 첫 공개 이후 지금에 이르기까지 티
rightnowhj.tistory.com
1. CSS 코드 검색 방법
CSS의 내용이 많아 특정 문구를 찾기 어려울 수 있으니 반드시 `Ctrl + F` 단축키로 단어를 검색해서 찾으시길 바랍니다.
※ 검색을 할 때 반드시 CSS 또는 HTML 페이지창을 한 번 클릭해서 커서가 코드 안에서 깜빡이는 상태에서 `Ctrl + F`로 검색하셔야 합니다. 만약 웹브라우저가 선택된 상태에서 `Ctrl + F` 단축키를 사용하면 현재 화면에 보이는 부분만 검색되게 됩니다.
= 검색결과는 우측 스크롤바(이것도 두개가 나란히 있는데 왼쪽 스크롤 바가 코드 안에서 움직이는 스크롤바)에 옅은 갈색으로 왼쪽에 표시됩니다. (아래 이미지에서 화살표 시작점 참고)
= 우측에 붙은 짙은 갈색은 검색하기 전에도 계속 보이는데 이거는 일종의 경고 메시지로 중복된 코드를 사용하거나 써봐야 적용이 안 되는 코드일 경우 나타납니다. 실행할 때에는 문제가 발생되지는 않습니다.
2. 인라인 코드블럭 스타일 수정하기
위의 이미지처럼 `blockquote` 또는 `code`를 검색하면 페이지 중간쯤에 아래와 같은 코드 부분을 찾습니다. 인라인 코드블록은 `code`라는 이름의 태그로 감싸면 작은 코드블록 형태로 만들어줍니다.
이전 포스팅의 hELLO 스킨 적용에서 '인라인 코드 블럭 스크립트 추가'를 적용하였다면, `(숫자1키 옆에, Tab 위에 있는 키)로 감싸면 코드블록으로 변경됩니다.
#article .contents_style p code,
#article .contents_style ol[data-ke-list-type] code,
#article .contents_style ul[data-ke-list-type] code,
#article .contents_style table[data-ke-align] code,
#article .contents_style blockquote[data-ke-style=style2] code,
#article .contents_style blockquote[data-ke-style=style3] code {
position: relative;
top: -1px;
white-space: normal;
border-radius: 0.375rem;
--tw-bg-opacity: 1;
/* background-color: rgb(244 244 246 / var(--tw-bg-opacity)); */
background-color: rgb(55 53 53 / var(--tw-bg-opacity));
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-family: SUIT, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(255 85 68 / var(--tw-text-opacity))
}
위 코드부분을 찾으면 처음 상태가 `/* background-color: rgb(244 244 246 / var(--tw-bg-opacity)); */` 이 부분이 주석이 없는 상태로 있을 것이고 그 아래 `background-color: rgb(55 53 53 / var(--tw-bg-opacity));` 이 부분이 없을 겁니다.
위와 같이 코드를 수정해 주시면 됩니다. 여기서는 주석을 `/* */` 형태로 감싸주면 됩니다. 해당 코드에 마우스 클릭하여 커서가 깜빡이는 상태에서 `Ctrl + K, C`를 눌러주면 자동으로 주석이 감싸지며, 다시 누르면 주석이 해제됩니다.
※ 해당 주석은 HTML 태그는 안 됩니다. CSS 또는 자바스크립트 코드 안에서만 주석이 `/* */` 형태로 감싸집니다.
화이트 모드에서 이 인라인 코드 블록이 하얀색 배경에 기본으로 빨간 글씨로 나오는데, 저의 경우 화이트 또는 다크모드 모두 검은색 배경에 노란색 글씨로 나오게 수정하였습니다.
노란 글씨 출력 및 기타 옵션설정하기 위해 아래 코드를 CSS의 맨 아래에 추가해 줍니다.
/* 인라인 코드블럭 설정 */
p code {
font-family: Consolas !important;
line-height: normal;
color: #ffe35a !important;
border-radius: 3px;
font-size: 100% !important;
padding: 0.2em 0.4em;
margin-right: 0.2em;
display: inline-block;
}
`color`에 보이는 작은 색상 아이콘에 마우스를 올리면 색상 팔레트가 나타나고, 팔레트에서 원하는 색상을 클릭해서 적용할 수 있습니다. 수동으로 색의 값을 찾아서 적을 필요 없습니다 😅
3. 인용문구 스타일 편집
인용문구(blockquote)의 배경색과 글자색을 변경하도록 하겠습니다. 여기서 `blockquote`란 글쓰기에서 인용문구 효과를 줄 때 사용하는 스타일의 id입니다. (아래 이미지 참고)
특히 style2인 아래와 같은 인용문구 형태가 다크모드에서는 옅어서 잘 안 보이고, 화이트 모드에서는 너무 하얗게 나와서 잘 안 보여서 약간 수정해 주었습니다.
이게 blockquote style2의 모습
아래 이미지를 참고하여 `blockquote`를 검색하여 해당 지점을 찾아서 아래와 같이 코드를 변경해 줍니다.
/** 밝을 때 blockquote style2의 border-color 어두운색으로 */
#article .contents_style blockquote[data-ke-style][data-ke-style=style2] {
border-left-width: 2px;
border-style: solid;
--tw-border-opacity: 1;
/* border-color: rgb(230 230 233 / var(--tw-border-opacity)); */
border-color: rgb(30 30 33 / var(--tw-border-opacity));
padding-left: 0.75rem;
padding-right: 0.25rem;
text-align: left;
font-size: 0.9rem;
line-height: 2;
--tw-text-opacity: 1;
color: rgb(53 54 56 / var(--tw-border-opacity))
/* color: rgb(153 153 161 / var(--tw-text-opacity)) */
}
/** 반대로 다크모드일 때는 하얀색으로 통일 */
.dark #article .contents_style blockquote[data-ke-style][data-ke-style=style2] {
--tw-border-opacity: 1;
/* 수정 */
border-color: rgb(244 244 246 / var(--tw-border-opacity));
/* 추가 */
--tw-text-opacity: 1;
color: rgb(244 244 246 / var(--tw-text-opacity))
}
해당 코드를 수정하였다면 바로 아래 코드도 수정해 줍니다. 아래에 있는 코드는 `blockquote style3`의 글자 색상입니다.
이게 blockquote style3의 모습
#article .contents_style blockquote[data-ke-style][data-ke-style=style3] {
border-radius: 0.375rem;
border-width: 0px;
--tw-bg-opacity: 1;
background-color: rgb(244 244 246 / var(--tw-bg-opacity));
padding: 1.25rem;
line-height: 2;
--tw-text-opacity: 1;
color: rgb(53 54 56 / var(--tw-border-opacity))
/* color: rgb(153 153 161 / var(--tw-text-opacity)) */
}
.dark #article .contents_style blockquote[data-ke-style][data-ke-style=style3] {
--tw-bg-opacity: 1;
background-color: rgb(41 42 45 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(244 244 246 / var(--tw-text-opacity))
/* color: rgb(153 153 161 / var(--tw-text-opacity)) */
}
여기까지 CSS를 수정하였다면 마지막 '적용'까지 잊지 마시고 눌러서 편집한 내용을 적용시킵니다. 그리고 글을 쓰고 나서 미리 보기 또는 비공개글 등을 이용하거나 기존에 작성한 글이 있다면 들어가서 확인하시면 됩니다.
4. 이미지 그리드 블록(imagegirdblock) = 여러 이미지 합치기 가로폭 수정
블로그 글을 작성하다 보면 이미지를 한 장씩 넣는 것보다 두 장 또는 그 이상의 이미지를 나란히 한 줄에 보여주고 싶을 때가 있습니다. 그럴 때는 이미지를 Drag&Drop하여 이미지 옆에 붙이면 됩니다. 이때 빨간색 줄로 이미지의 우측이나 좌측에 배치할 때 나타납니다.
이런 식으로 이미지를 한 줄에 여러 개의 이미지를 묶어서 보여주는 것을 'Image Grid Block (이미지 그리드 블록)'이라고 합니다. 마찬가지로 CSS에서도 `imagegridblock`으로 검색하면 속성을 찾아서 수정할 수 있습니다.
에디터에 이미지를 추가한 뒤 아래처럼 추가한 이미지를 클릭하면 위에 '이미지 편집바'가 나타납니다. 여기서 기본이 '가운데 정렬' 상태인데 왼쪽에 보이는 '본문 폭 맞춤'을 선택하면 본문 가로폭에 맞게 이미지의 크기가 조정됩니다.
보통 이미지의 가로폭이 본문보다 크면 본문 옆으로 나가버려서 저렇게 본문 폭에 맞추면 본문에 딱 맞춰서 깔끔하게 이미지가 나타납니다.
하지만 이미지 그리드 블록에는 저런 이미지 바가 나오지 않습니다. 아래와 같이 두 가지 아이콘만 나오고, '정렬'과 관련된 옵션은 없습니다. 대신 CSS에서 `imagegridblock`의 속성을 편집하여 가로폭에 맞추도록 수정해야 합니다. 수정을 하지 않을 경우, 제작자가 의도한 1100px 가로폭에 맞춰 가로폭이 고정됩니다.
'HTML 편집'에서 'CSS' 탭으로 이동합니다. 그리고 `imagegridblock`을 검색합니다. 그러면 가운데 하나가 검색됩니다. 여기에 아래 코드를 추가해 줍니다.
/* 이미지 그리드 블록(2개 이상 이어붙인 이미지)의 가로폭 가득차게 설정 */
figure.imagegridblock {
width: 100% !important;
}
최종적으로 아래와 같은 코드가 됩니다. 우측 상단에 '적용' 버튼을 눌러 수정을 완료합니다. 이제 이미지를 두 개 이상 붙인 이미지 그리드 블록은 가로폭이 자동으로 본문폭에 맞춰서 조정됩니다.
구독 및 좋아요는 컨텐츠를 생산하는데 많은 도움이 됩니다. 😊
감사합니다.