맥 스타일의 창 만들기 CSS

맥 스타일의 창을 만들어보겠습니다!
CSS를 이용하면 손쉽게 맥 스타일로 만들 수 있는데요, 공지를 띄운다거나 하는 용도로 사용하기 좋을 것 같습니다 :)

맥 스타일의 창 만들기

짜잔 위와 같은 맥 스타일의 창을 만들어 보겠습니다!😉

맥 스타일의 창 만들기 HTML

우선 맥 스타일의 창을 구성해보겠습니다. 전체를 감싸는 DIV와, 타이틀, 버튼, 그리고 내용이 들어갈 부분까지 나누어주겠습니다.

<div class="floating-window">
    <div class="window-header">
      <div class="window-title">코딩하는 안다형</div>
      <div class="window-controls">
        <div class="window-minimize"></div>
        <div class="window-maximize"></div>
        <div class="window-close"></div>
      </div>
    </div>
    <div class="window-content">
      <p>맥 스타일의 창을 만들어주는 CSS.<br>공지사항을 입력하거나 안내하는 역할을 할 수 있습니다.<br>사용 방법은 무궁무진하죠!~</p>

    </div>
  </div>

이렇게 구성해보았습니다.
여기까지는 그냥 별 거 없죠. 아마 코딩을 모르는 분들도 대충 어떤 느낌인지 알 수 있을 겁니다.
이제 이걸 스타일시트를 적용하여 진짜 맥 스타일의 창으로 만들어보겠습니다.

맥 스타일의 창 만들기 CSS

.floating-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  background-color: #f6f6f6;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}

.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #e6e6e6;
  border-bottom: 1px solid #d6d6d6;
}

.window-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.window-controls {
  display: flex;
}

.window-minimize,
.window-maximize,
.window-close {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 50%;
}

.window-minimize {
  background-color: #f7d54a;
}

.window-maximize {
  background-color: #62c462;
}

.window-close {
  background-color: #ee5f5b;
}

.window-content {
  padding: 12px;
}

각각 스타일 속성을 넣어줍니다.
창 가로 크기를 늘리고 싶다면 .floating-window 속성 중 width: 500px; 부분의 숫자를 조절하면 됩니다!

맥 스타일의 창 만들기 배경 넣는 방법

바탕화면 위에 창이 떠있는 것처럼 만들고 싶다면 아래의 코드를 스타일로 추가해주세요.

body {
  background-image: url('이미지 경로');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

이렇게 하면 맥 스타일의 창 만들기 성공입니다!
버튼이 실제로 동작하지는 않는 코드이지만 조금만 응용하면 창을 움직이게 할 수도 있고, 닫고 키우고 최소화까지 할 수도 있습니다!

예제는 아래 링크를 클릭해주세요! :)

예제 사이트

맥 스타일의 창 만들기