html, css로 터미널 처럼 표현하기

HTML CSS 코드

터미널의 에러 메세지를 html 로 표현에서 블로글로 올릴일이 뜨문뜨문 있어서요. 전 아래와 같이 html, css 코드를 작성하였습니다.

<head>
<style>
  .terminal {
    background-color: black; /* 배경색 검정 */
    color: white; /* 글자색 하양 */
    border: 2px solid green; /* 테두리 색상 및 두께 */
    padding: 20px; /* 내부 여백 */
    font-family: 'Courier New', Courier, monospace; /* 폰트 스타일 */
    font-size: 16px; /* 글자 크기 */
    white-space: pre-wrap; /* 공백과 줄바꿈 처리 */
  }
</style>
</head>
<div class="terminal">Error: 
  homebrew-cask is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow This command may take a few minutes to run due to the large size of the repository. This restriction has been made on GitHub's request because updating shallow clones is an extremely expensive operation due to the tree layout and traffic of Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you automatically to avoid repeatedly performing an expensive unshallow operation in CI systems (which should instead be fixed to not use shallow clones). Sorry for the inconvenience!
</div>

적용 예시

위 코드를 적용한 예시는 아래와 같습니다.

Error: homebrew-cask is a shallow clone. To `brew update`, first run: git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow This command may take a few minutes to run due to the large size of the repository. This restriction has been made on GitHub's request because updating shallow clones is an extremely expensive operation due to the tree layout and traffic of Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you automatically to avoid repeatedly performing an expensive unshallow operation in CI systems (which should instead be fixed to not use shallow clones). Sorry for the inconvenience!

코드펜 예시

위 코드 내용을 코드펜에 작성해둔 예시 입니다.

See the Pen 터미널 화면처럼 by hyunho (@momalcy) on CodePen.

'html, css, javascript' 카테고리의 다른 글

사이드바 하위 메뉴 클릭하면 나오고 클릭하면 사라지는 기능 (0)	2024.03.13
쿠팡 파트너스 배너 오른쪽 정렬 (4)	2024.01.15
iframe 가운데 정렬 방법 (2)	2024.01.04
html 두개의 비디오를 한줄에 넣기 (0)	2023.12.24
ul li 줄 간격조절 (0)	2023.08.05

아항 !!

html, css로 터미널 처럼 표현하기