[HTML/CSS] Tailwind로 Mac Terminal 만들기

안녕하세요 이번 게시글에서는 Css 프레임워크인 tailwind로 mac terminal을 만들어 보겠습니다. 

먼저 구현하고자 하는 ui는 다음과 같습니다.

다음은 코드 입니다.

<div class="w-1/2 mx-auto">

<div class="w-full shadow-2xl subpixel-antialiased rounded h-64 bg-black border-black mx-auto">

<div class="flex items-center h-6 rounded-t bg-gray-100 border-b border-gray-500 text-center text-black"

id="headerTerminal">

<div class="flex ml-2 items-center text-center border-red-900 bg-red-500 shadow-inner rounded-full w-3 h-3"

id="closebtn">

</div>

<div class="ml-2 border-yellow-900 bg-yellow-500 shadow-inner rounded-full w-3 h-3" id="minbtn">

</div>

<div class="ml-2 border-green-900 bg-green-500 shadow-inner rounded-full w-3 h-3" id="maxbtn">

</div>

<div class="mx-auto pr-16" id="terminaltitle">

<p class="text-center text-sm">Terminal</p>

</div>

</div>

<div class="pl-1 pt-1 h-auto text-green-200 font-mono text-xs bg-black" id="console">

<p class="pb-1">Last login: Wed Sep 25 09:11:04 on ttys002</p>

<p class="pb-1">HI!!!! This is Stickcode Example !</p>

</div>

</div>

</div>

다음은 사용된 tailwind 속성에 대해서 설명드리겠습니다.

 

1. 전체 구조

<div class="w-1/2 mx-auto">
    ...
</div>

 

이 div는 전체 터미널 창을 중앙에 배치하는 역할을 합니다.

• w-1/2는 너비를 부모 요소의 50%로 설정합니다.
• mx-auto는 좌우 마진을 자동으로 설정하여 가운데 정렬합니다.

2. 터미널 창

<div class="w-full shadow-2xl subpixel-antialiased rounded h-64 bg-black border-black mx-auto">
    ...
</div>

 

이 div는 터미널 창의 바깥 테두리를 나타냅니다.

• w-full은 너비를 100%로 설정합니다.
• shadow-2xl은 큰 그림자 효과를 부여합니다.
• subpixel-antialiased는 텍스트의 렌더링 품질을 개선합니다.
• rounded는 모서리를 둥글게 합니다.
• h-64는 높이를 16rem로 설정합니다.
• bg-black와 border-black는 배경과 테두리 색상을 검정색으로 설정합니다.
• mx-auto는 좌우 중앙 정렬을 위한 설정입니다.

3. 헤더(터미널 상단 바)

<div class="flex items-center h-6 rounded-t bg-gray-100 border-b border-gray-500 text-center text-black" id="headerTerminal">
    ...
</div>

 

터미널의 상단 부분을 나타내며, 닫기, 최소화, 최대화 버튼 및 터미널 제목을 포함합니다.

• flex는 내부 아이템들을 유연한 박스 모델로 배치합니다.
• items-center는 내부 아이템들을 중앙 정렬합니다.
• h-6는 높이를 1.5rem으로 설정합니다.
• rounded-t는 상단 모서리만 둥글게 합니다.
• bg-gray-100, border-b, border-gray-500, text-center, text-black는 배경색, 테두리, 텍스트 정렬 및 텍스트 색상을 설정합니다.

4. 닫기,최소화,최대화 버튼

-> 각각의 div는 작은 원형 버튼을 나타냅니다. 

<div class="flex ml-2 items-center text-center border-red-900 bg-red-500 shadow-inner rounded-full w-3 h-3"

id="closebtn">

</div>

<div class="ml-2 border-yellow-900 bg-yellow-500 shadow-inner rounded-full w-3 h-3" id="minbtn">

</div>

<div class="ml-2 border-green-900 bg-green-500 shadow-inner rounded-full w-3 h-3" id="maxbtn">

</div>

 

5. 터미널 제목 

<div class="mx-auto pr-16" id="terminaltitle">
    <p class="text-center text-sm">Terminal</p>
</div>

터미널 창의 제목을 나타냅니다.

 

6. 터미널 콘솔 내용

<div class="pl-1 pt-1 h-auto text-green-200 font-mono text-xs bg-black" id="console">
    ...
</div>