특정 게시물 안에 활성 상태의 색상 버튼(이미지가 아닌)을 만들고 싶습니다

개발
1

안녕하세요. 코딩을 못 합니다. 특정 게시물 안에 활성 상태의 색상 버튼(이미지가 아닌)을 만들고 싶습니다. 게시물 편집기 창에 어떤 코드를 입력해야 할까요.
제가 원하는 모습 :point_down:


게시물 편집기 창에서 코딩을 시도해본 결과 :point_down: :see_no_evil:

image
image1170×1031 52.6 KB

도와주세요. 올바른 코드를 알려주세요 :pray: :pray: :pray:

2

이것을 확인해 보세요:

3

제 이해로는 어차피 작동하지 않으므로 에디터 창에 버튼 코드를 추가할 수 없을 것 같습니다.
제 이해로는 어차피 작동하지 않으므로 에디터 창에 버튼 코드를 추가할 수도 없고, 특정 게시물의 배경을 설정할 수도 없을 것 같습니다. 그리고 HTML 화이트리스트에 먼저 코드를 추가해야 하나요?

무언가를 오해했다면 죄송합니다 :pray:, 저는 코딩 전문가가 아니고 영어도 잘 못합니다. 지금은 구글 번역기를 사용하고 있습니다.

4

아마도 한 장의 이미지가 천 마디 말보다 낫겠죠 :slight_smile:

image
image2498×1440 183 KB

[data-theme-button] a {
        display: inline-block;
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
}

버튼을 중앙 정렬하려면:

[data-theme-button] {
    display: flex;
    justify-content: center;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

image
image901×462 13.8 KB

5

훌륭하네요, 정말 대단합니다 :exploding_head:. 정말 감사드립니다 :+1: :+1: :+1:

다양한 버튼 옵션을 만드는 논리를 이해한 것 같습니다.
내일 코드 실험 결과를 공유할게요.

그동안 한 가지 더 질문이 있습니다: 버튼을 게시물의 오른쪽 가장자리에 정렬하려면 어떤 명령을 사용해야 하나요?

다시 한번 감사드립니다 :raised_hands:

6

CSS에서 텍스트의 크기와 굵기를 인코딩하는 것이 가능한가요?

7 
[data-theme-button] {
    display: flex;
    justify-content: end;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

네, 다음 속성을 사용하세요:

font-size와 font-weight

원하는 값을 지정하면 됩니다.

문서:

:information_source: (마진 대신 플렉스박스 속성을 사용하여 버튼을 정렬하도록) 메시지를 수정하여 CSS 코드를 더 깔끔하게 정리했습니다.

8

정말 감사합니다. 제게 당신의 답변은 매우 중요합니다. 공부하고 있는 중입니다.

9

참고로, 사이트를 여기저기 조정하는 방법에 대한 질문을 가끔 하는 것은 괜찮지만, 엄밀히 말하면 기본적인 CSS와 HTML에 대한 질문은 해당 분야에 특화된 포럼에서 하는 것이 더 적절합니다.

10

예제에 따라 코드를 업데이트하려고 했을 때 오류가 발생했습니다.

image
image925×642 58.6 KB

하지만 두 번째 문자인 "}"를 제거하자 오류가 사라졌습니다

image
image519×357 33.1 KB

제가 올바르게 처리한 것일까요?

11

안녕하세요. "전용 포럼"을 올바르게 이해한 건지, discourse와는 전혀 관련이 없는 포럼을 말씀하시는 건지 궁금합니다. 아니면 discourse에 CSS와 HTML 문제를 논의하기 위한 별도의 포럼이 있는 건가요. (제 브라우저가 올바르게 번역하는지 확실하지 않습니다)

12

무례하게 말씀드려 죄송합니다 :pray: 제 CSS 예시를 가지고 보여줄 수 있을까요? :pray:

P.S. 토론을 하면서 코딩의 세계를 탐험하기 시작했습니다 :sweat_smile:

13

네, 죄송합니다. 코드를 복사-붙여넣기하는 과정에서 실수를 했습니다. :+1:

그 사람은 Discourse와 직접적인 관련이 없는 일반적인 CSS 관련 질문(예: CSS를 사용하여 텍스트 크기나 굵기를 변경하는 방법 등)은 meta.discourse.org에서 논의해서는 안 되며, CSS에 대해 배우고 질문할 수 있는 다른 곳에서 다루어야 한다고 말합니다.

CSS를 사용하여 Discourse에서 특정 작업을 수행하는 방법에 대한 구체적인 질문이 있다면, meta.discourse.org가 적절한 장소입니다.

CSS 기초를 배우시는 것을 권장합니다. 선호하는 검색 엔진에 "CSS tutorial"을 자신의 언어로 입력하고, 여기서 시작할 수 있는 지식을 얻어보십시오. 이는 나중에 Discourse 포럼의 스타일을 사용자 지정하는 데 큰 도움이 될 것입니다.

14

안녕하세요, 감사합니다. 이제 명확해졌어요!
제공해 주신 링크들을 꼭 사용하겠습니다 :+1: