이전 목록 다음
채택완료

이런 글상자는 어떻게 작성하는 걸까요?

건호아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-21 (목) 23:29:53 220
1779373737_0Zh4K6XsGI.webp
1779374432_AGUhAe475m.webp
이런식에 명령어 글 상자를 그누보드에서 사용하고 싶은데 어떻게 해야할까요? 초보라...미리 감사합니다
글상자
|

답변 3개 / 댓글 4개

채택된 답변
+20 포인트
nanase
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-22 (금) 00:18:08
Copy 
<style>
.cmd-container-light {
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    overflow: hidden;
    margin: 10px 0 25px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cmd-header-light {
    background-color: #f8fafc;
    border-bottom: 1px solid #e1e5eb;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cmd-title-light {
    color: #0066cc;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cmd-copy-light {
    color: #718096;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cmd-body-light {
    background-color: #f8fafc;
    padding: 16px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #4a5568;
    margin: 0;
}
.cmd-prompt {
    color: #dd6b20;
    font-weight: bold;
    margin-right: 5px;
}
</style>

<ol>
    <li>Update the server packages catalog.</li>
</ol>

<div class="cmd-container-light">
    <div class="cmd-header-light">
        <span class="cmd-title-light">CONSOLE</span>
        <span class="cmd-copy-light">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
            Copy
        </span>
    </div>
    <div class="cmd-body-light">
        <span class="cmd-prompt">$</span> sudo pkg update
    </div>
</div>


이걸 써보세요.

답변에 대한 댓글 4개

nanase
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-22 (금) 00:18:37
첫번째 이미지처럼 나올겁니다.
nanase
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-22 (금) 00:20:41
1. 테마 CSS에 박아두기: 위 코드의 <style> ... </style> 내부에 있는 내용만 복사해서 사용 중인 그누보드 테마의 CSS 파일(예: /theme/적용된테마/css/default.css 나 style.css) 맨 아래에 붙여넣어 저장하세요.

2. 글 쓸 때는 알맹이만: 글을 작성할 때는 에디터의 [HTML] 버튼을 누른 뒤, 실제 본문 소스(<div>...</div>) 부분만 복사해서 넣으시면 아주 깔끔하게 적용됩니다.

선택해서 필요한 방식으로 적용하세요.
건호아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-23 (토) 16:46:38
copy를 눌르면 코드블럭만 복사되는게 아니고 소스가 복사되네요?????
nanase
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-23 (토) 22:33:43
소스를 스타일.css에 넣으셔야 글자 입력하면 자동으로 창이 뜰거에요
sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-22 (금) 07:43:57

냑에서는 ... 아래처럼 사용하면 됩니다. (별 빼시고 사용)

[★code] 적을코드 [★/code]

Copy 
<?php echo 123; ?>

내 홈피 그누에 이용하시려면, syntaxhighlight 키워드로 구글링하시거나 프리즘이란 거 이용하시면 됩니다. ai 사이트 가서 위 키워드 이용해 검색하면 자세한 과정 나올 것 같네요.
 

Poter
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-05-22 (금) 00:59:15
참고영상 > https://ysmoto.kr/ys2/bbs/board.php?bo_table=basicdown&wr_id=228&sst=wr_hit&sod=desc

소스 >  https://ysmoto.kr/ys2/bbs/board.php?bo_table=basict1000&wr_id=254

참고삼아 보세요. 방법은 같습니다. 

소스 넣어 드렸더니 에러 뿜네요. 영상만 한번 보세요.

여기나 자유게시판 이나 ....
 

Sorry, you have been blocked

You are unable to access sir.kr

답변을 작성하려면 로그인이 필요합니다.