쓰리래빗츠 블로그

CSS로 라이브러리에 로고 넣기

(주)쓰리래빗츠2020-11-23

CSS로 라이브러리에 로고를 넣는 방법입니다.

1

라이브러리에 CSS 설정하기

웹 페이지로 CSS를 만들어 이를 라이브러리에 설정합니다. 자세한 사항은 다음 가이드를 참고합니다.

2

로고 그림 올리기

다음 순서로 로고 그림을 올립니다.

  1. <도구 | 웹 페이지> 메뉴를 선택합니다.

  2. 웹 페이지에서 <1그림> 메뉴를 선택합니다.

  3. <2올리기> 링크를 클릭하여 로고 그림을 올립니다.

  4. <3경로 복사> 링크로 로고 경로를 복사합니다.

3

CSS 설정하기

background 관련 속성을 하나로 합치지 않습니다.

로고를 메뉴 왼쪽에 배치하기

로고를 메뉴 왼쪽에 배치하려면 CSS를 다음과 같이 작성합니다.

.r_top {
    background-image: url(/r/wp/669c5512eb757438);
    background-position: 20px 18px;
    background-repeat: no-repeat;
}

.r_top .r_library_menu {
    margin-left: 100px;
}
  • background-image 속성 값을 앞에서 복사한 그림 경로로 바꿉니다.

  • background-position 속성으로 로고 위치를 설정합니다.

  • margin-left 속성으로 로고가 위치할 왼쪽 여백을 설정합니다. 로고에 맞게 크기를 설정합니다.

로고를 메뉴 위에 배치하기

로고를 메뉴 위에 배치하려면 CSS를 다음과 같이 작성합니다.

.r_top {
    background-image: url(/r/wp/669c5512eb757438);
    background-position: 45px 10px;
    background-repeat: no-repeat;
    padding-top: 25px;
}
  • background-image 속성 값을 앞에서 복사한 그림 경로로 바꿉니다.

  • background-position 속성으로 로고 위치를 설정합니다.

  • 로고를 메뉴 위에 배치하려면 padding-top 속성으로 로고가 위치할 위 여백을 설정합니다.