[워드프레스] 구텐베르그 리스트 블럭 위치 조정 및 데코 방법

2018년 말 도입된 구텐베르크 편집기는 시간 갈수록 안정화되고 이를 지원하는 다양한 블럭들이 늘어나면서 상당히 파워플한 편집기로 거듭나고 있습니다.

1년 정도 지나면 전문 편집기들과 경쟁할만한 수준으로 발전할 것 같습니다. 아직은 자유도가 떨어지지만 그러한 한계를 보완해줄 수 있는 플러그인 등이 많이 등장하고 있습니다.

이러한 블럭 플러그인들은 파워플한 기능과 아름다운 디자인을 쉽게 구현해주는 다양한 블럭들을 지원해주고 있고, 리스트 블럭도 마찬가지입니다.

그렇지만 이런 플러그인에서 지원하는 기능을 사용하려면 절차가 번거롭고 세밀한 조정이가능하기 때문에 한정없이 시간을 투입하게 됩니다. 그래서 가능하면 구텐베르그 편집기가 기본으로 제공하는 리스트 블럭을 사용하는데요.

구텐베르그 리스트 블럭 변경

아무래도 기본형은 디자인이 심심하기도 하고 기본저긍로 좌측으로 너무 붙어 있어 리스트 블럭 효과가 적어집니다. 그래서 간단한 CSS만으로 리스트 블럭 주목도를 높이는 방법을 생가해 봤습니다.

제 사이트에 적용한 모습니다. 아래와 같습니다. 위로부터 각각 모바일과 데스크탑에서 구협 모습입니다.

리스트 블럭 변경 CSS 코드

위와 같은 모습을 구현하기 위해 아래와 같은 CSS 코드를 사용했습니다.

데스크탑과 모바일은 폭을 768px를 경계로 나누었습니다. 그리고 순서가 있는 리스트 블럭과 순서가 없는 리스트 블럭을 나누었고, 순서가 있는 리스트 블럭은 숫자에 조금 데코를 추가했습습니다.

순서가 없는 리스트 블럭

순서가 없는 리스트 블럭의 데스크탑 버젼은 아래과 같은 코드를 적용했습니다.

@media (min-width: 768px) {
    .entry-content ul {
        font-style: italic;
        font-size: 17px;
        font-weight: bold;
        padding-left: 80px;
    }
}Code language: PHP (php)

순서가 없는 리스트 블럭의 모바일 버젼은 아래와 같은 코드를 적용했습니다. 아시다시피 인식하는 폭을 변경해 구분시킵니다.

@media only screen and (max-width: 768px) {
    .entry-content ul {
        font-style: italic;
        font-size: 17px;
        font-weight: bold;
        padding-left: 20px;
    }
}Code language: PHP (php)

순서 있는 리스트 블럭

순서 있는 리스트 블럭의 데스크탑 버젼은 아래과 같은 코드를 적용했습니다. 다만 숫자에 약간 데코를 가했습니다. 이 코든ㄴ GeneratePress 테마 지원팀에서 알려준 코드를 기반으로 수정했습니다.

@media (min-width: 768px) {
ol {
    list-style: none !important;
    counter-reset: item;
    margin-left: 40 !important;
}

ol li {
    counter-increment: item;
    margin-bottom: 5px;
    position: relative;
    font-style: italic;
    font-size: 17px;
    font-weight: bold;
    margin-left: 50px;
}

ol li:before {
    margin-right: 10px;
    content: counter(item);
    border-radius: 50%;
    border-top-color: #3e3e3e;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: #3e3e3e;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: #3e3e3e;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #3e3e3e;
    border-left-style: solid;
    border-left-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    color: #3e3e3e;
    width: 1.2em;
    line-height: 1.2em;
    padding: 2px;
    text-align: center;
    position: absolute;
    left: -30px;
}
}Code language: PHP (php)

순서 있는 리스트 블럭의 모바일 버젼은 아래와 같은 코드를 적용했습니다.

@media only screen and (max-width: 768px) {
ol {
    list-style: none !important;
    counter-reset: item;
    margin-left: 0 !important;
}

ol li {
    counter-increment: item;
    margin-bottom: 5px;
    position: relative;
    font-style: italic;
    font-size: 17px;
    font-weight: bold;
    margin-left: 30px;
}

ol li:before {
    margin-right: 10px;
    content: counter(item);
    border-radius: 50%;
    border-top-color: #3e3e3e;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: #3e3e3e;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: #3e3e3e;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #3e3e3e;
    border-left-style: solid;
    border-left-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    color: #3e3e3e;
    width: 1.2em;
    line-height: 1.2em;
    padding: 2px;
    text-align: center;
    position: absolute;
    left: -30px;
}
}Code language: PHP (php)