워드프레스 목록 박스 만들기, 그룹 추가 CSS 클래스 사용방법

01

of 06

목록 박스 만들기 예시

아래 이미지와 같이 목차, 목록에 사용중인 박스다. 간단하게 목록, 위쪽에 제목, 아래쪽에 태그를 작성해서 사용하고 있다. 단순히 아래 이미지 같은 박스를 만드는게 아닌, 워드프레스의 그룹과 추가 CSS 클래스의 다양한 사용법을 설명하려한다.

02

of 06

목록 박스 만들기 구성

① 패턴 : 시리즈 글일 경우에만 사용하기 때문에 패턴으로 작성 (동기화 사용)

② 단락 : 목록의 제목 작성

③ 목록 (UL) : 목록

④ 목록 아이템 (UI) : 목록 아이템 작성 후 링크

⑤ 단락 : 태그가 될만한 단어 작성 후 링크

⑥ 그룹 : ② ~ ⑤ 선택후 전체를 그룹 지정

03

of 06

목록 추가 CSS 클래스

추가 CSS 클래스 : tableul

.tableul {
    list-style: none !important; /* 목록 앞에 점 삭제 */
    margin: -1.6em 0 1em -1em !important; /* 테마에 맞게 수정 */
    font-size: 1rem !important; /* 테마에 맞게 수정 */	
}
Code language: CSS (css)

04

of 06

목록 아이템 추가 CSS 클래스

추가 CSS 클래스 : tableui

.tableui {
    border-bottom: 1px solid #e0e0e0 !important; /* 글 아래 선 */
    margin-bottom: 0.5em !important; /* 테마에 맞게 수정 */
}
Code language: CSS (css)

05

of 06

그룹 추가 CSS 클래스

추가 CSS 클래스 : tablebox blue

.tablebox {
    padding: 20px 30px 0 30px !important; /* 테마에 맞게 수정 */
    border: 1px solid rgba(0, 0, 0, .11); /* 박스 전체 선 */
    border-radius: 5px; /* 박스 모서리 둥글게 */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .1); /* 박스 그림자 넣기 */
    margin: -3em 0 4em 0 !important; /* 테마에 맞게 수정 */	
}

.tablebox a {
    color: #212121; /* 박스 안 글자 색상 */
    text-decoration: none !important; /* 링크에 언더라인 없애기 */
}

.tablebox a:hover {
    color: var(--j-accent-color); /* 링크 위로 마우스 올리면 색상 변경 */
    text-decoration: none !important; /* 링크에 언더라인 없애기 */
}

.blue { /* 색상 변경하기 쉽게 class로 색상 지정 */
    background-color: #f0faff !important;
    overflow-x: initial; /* 테마에 따라 없어도 됨 */
}
Code language: CSS (css)

06

of 06

단락 추가 CSS 클래스

추가 CSS 클래스 : bottom1, 서체 크기 0.88rem

.bottom1 { /* 보통 마진 설정할때 -4 ~ 4까지 설정해놓고 사용 */
    margin: 0 0 1em 0 !important;
}
Code language: CSS (css)