구독은 사랑입니다.

Fiksioner 테마: 버튼 4종 코드 구현하기

가나톡ganaTOK
가나톡ganaTOK
Update:

Fiksioner 테마: 버튼 4종 구현하기

오늘은 '블로소득님'이 제안한 블로그 글쓰기에서 사용하는 '링크버튼'을 사용하는 방법을 여러분과 공유합니다. 준비한 버튼을 레드, 블루, 블랙 3가지 색상 버전에다. 그린버튼을 추가했습니다. 먼저 구현되는 버튼은 링크의 글에 따라 길이를 달리해서 보여드립니다. 아래의 코드값은 16진수값을 이용해서 RGB각각의 16진수값(헥사hex값)을 조합하면 우리가 눈으로보는 컬러값을 지정하게 됩니다. 컴퓨터는 2진수와 2진수를 표기하기 쉽게하는 16진수값을 사용해서 프로그램을 하게 됩니다. 그리하여,

버튼 4색 코드 넣는 위치

아래의 코드를 복사하여 어디에 이 코드를 입력해야하는지 알려드리도록 하겠습니다. 우리가 사용하는 블로그스팟, 관리자페이지에 들어가면 왼쪽 사이드바에 '테마', 그리고 '설정' 이 있습니다. 이때 설정을 통해서 우리가 사용하는 스킨(블로그 스팟에서는 테마라고 불립니다.)의 html편집에 들어가 아래의 코드를 입력하고 사용하시면 됩니다.

테마를 누르면 나타나는 화면은 다음과 같습니다. 여기서 맞춤설정의 옆에 있는 역삼각형을 누르면 아래 오른 쪽 이미지처럼 팝업된 메뉴를 만날수 있고 우리는 'html편집'을 선택하여 테마를 편집(주어진 코드를 삽입)하면 됩니다.
편집모드로 들어간 후, 마우스를 테마코드창에 클릭을 한후 CTRL+F키(검색find)를 눌러서 검색창이 오른쪽 상단에 뜨면 그곳에 ]]></b:skin> 입력합니다. 그리고 앤터키를 치면 노란색바탕의 ']]></b:skin>' 코드가 있는 위치를 찾을 수 있습니다.

]]></b:skin>를 이렇게 찾아서 그 위에 코드를 붙여넣기(Ctrl-v)만 하시면 됩니다.

이제 복사(ctrl-c)하여 붙여넣기 할 '버튼코드'를 알아보도록 하겠습니다.

Fiksioner 테마 버튼 4종 코드

아래 코드를 전체선택하고 복사(ctrl-c)하고 앞서 보인 위치에 붙여넣기(ctrl-v)하시면 됩니다.

/* 파란색 버튼 (Button Blue) */
.btn-b {
    display: inline-block !important;  /* 텍스트에 맞게 버튼 크기 조정 */
    padding:1px 5px !important;
    background-color: #0074D9 !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 13px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    width: auto !important;  /* 버튼 너비를 텍스트에 맞게 자동으로 설정 */
}

.btn-b:hover {
    background-color: #FF4136 !important;
    color: white !important;
}

/* 빨간색 버튼 (Button Red) */
.btn-r {
    display: block !important;
    width: 40% !important;
    padding:1px 5px !important;
    background-color: #FF4136 !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 13px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-r:hover {
    background-color: #E30022 !important;
    color: white !important;
}

/* 검은색 버튼 (Button Black) */
.btn-k {
    display: block !important;
    width: 60% !important;
    padding:1px 5px !important;
    background-color: #000000 !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 13px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-k:hover {
    background-color: #333333 !important;
    color: white !important;
}

/* 그린 버튼 (Button Green) */
.btn-g {
    display: block !important;
    width: 80% !important;
    padding:1px 5px !important;
    background-color: #024702  !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 13px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-g:hover {
    background-color: #22ff00 !important;
    color: white !important;
}

이 CSS 코드는 파란색~ 4종의 버튼을 디자인하기 위한 스타일 규칙입니다. 각 속성은 버튼의 외관과 동작을 정의합니다. 아래는 각 속성에 대한 설명입니다:

CSS 코드 해석:

  1. display: block !important;

    • 버튼을 블록 요소로 설정하여, 전체 너비를 차지하도록 합니다. !important는 다른 스타일 규칙이 이를 덮어쓰지 못하도록 우선순위를 높입니다.

  2. width: 20% !important;

    • 버튼의 너비를 부모 요소의 20%로 설정합니다. 비율 기반으로 버튼의 너비를 지정합니다.

  3. padding: 8px 20px !important;

    • 버튼의 내부 여백을 설정합니다. 8px는 상하 여백, 20px는 좌우 여백입니다.

  4. background-color: #0074D9 !important;

    • 버튼의 배경색을 파란색으로 설정합니다. 색상 코드 #0074D9는 특정 파란색을 의미합니다.

  5. color: white !important;

    • 버튼 텍스트의 색상을 흰색으로 설정합니다.

  6. text-align: center !important;

    • 버튼 내의 텍스트를 중앙 정렬합니다.

  7. font-size: 16px !important;

    • 버튼의 글자 크기를 16px로 설정합니다.

  8. font-weight: bold !important;

    • 버튼의 글씨를 굵게 만듭니다.

  9. border-radius: 5px !important;

    • 버튼의 모서리를 둥글게 설정합니다. 5px는 둥글게 할 정도를 나타냅니다.

  10. margin-bottom: 10px !important;

    • 버튼의 하단에 10px의 여백을 추가하여 다른 요소들과 간격을 둡니다.

  11. border: none !important;

    • 버튼의 경계선을 없앱니다.

  12. transition: all 0.3s ease !important;

    • 버튼에 마우스를 올릴 때나 다른 상태 변화가 있을 때, 0.3초 동안 부드럽게 전환되도록 설정합니다.

몇가지 수정하기:

/* 파란색 버튼 (Button Blue) */
.btn-b {
    display: inline-block !important;  /* 텍스트에 맞게 버튼 크기 조정 */
    padding: 2px 2px !important;
    background-color: #0074D9 !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 15px !important;
    margin-bottom: 10px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    width: auto !important;  /* 버튼 너비를 텍스트에 맞게 자동으로 설정 */
}

 버튼 4종 코드 사용법:

버튼 코드를 테마에 잘 적용하셨다면 이제 본문에 버튼을 넣어 사용해야 합니다. 본문에 글을 작성한 후에 왼쪽에 있는 연필 모양을 클릭해서 HTML 보기를 누릅니다. 우리가 글을 작성하는 모드는 두가지로 word입력모드과 html 코드입력모드가 있습니다. 대개는 워드 입력으로 문서를 작성하고 이 문서는 html코드로 저장됩니다. 우리는 지금 html모드로 직접들어 가는 것입니다.
아래의 코드는 설정에서 글템플릿에 저장하여 사용하시면 좋습니다. 사용해 보시조!
이 버튼이 만들어 지게 됩니다. 링크이용시 버튼이 생겨 가독성이 올라가는 효과를 느껴보십시요. 감사합니다. 블로소득님께 코드공유에 감사드립니다. 허락없이 참조해서 만들었습니다. 
<a class="btn-b" href="#">파란색 버튼</a>
<a class="btn-r" href="#">빨간색 버튼</a>
<a class="btn-k" href="#">검은색 버튼</a>
<a class="btn-g" href="#">그린색 버튼</a>
 

Advanced Color Picker

Advanced Color Picker



HEX: #942626

RGB: rgb(148, 38, 38)

파란색 버튼빨간색 버튼검은색 버튼그린색 버튼

Related Posts

로드 중…

댓글 쓰기