16장 Cafe25

TO AC·2022년 3월 16일

CCS

목록 보기

20/20

index

``` 까페25 | 클라우드 호스팅 서비스

<!-- Head -->
<section class="docs-head bg-primary py-3">
  <div class="container grid">
    <div>
      <h1 class="xl">자동설치</h1>
      <p class="lead">설치형 프로그램을 손쉽게 자동으로 설치해드립니다. 한번의 클릭으로 간편하게 이용할 수 있습니다.</p>
    </div>
    <img src="images/docs.png" alt="" />
  </div>
</section>

<!-- Docs main -->
<section class="docs-main my-4">
  <div class="container grid">
    <div class="card bg-light p-3">
      <h3 class="my-2">설치방법</h3>
      <nav>
        <ul>
          <li><a class="text-primary" href="#">Introduction</a></li>
          <li><a href="#">About Loruki</a></li>
          <li><a href="#">Installation</a></li>
        </ul>
      </nav>

      <h3 class="my-2">배포하는방법</h3>
      <nav>
        <ul>
          <li><a href="#">Setting up a container</a></li>
          <li><a href="#">Using the CLI</a></li>
          <li><a href="#">Managing resources</a></li>
          <li><a href="#">Upgrade & downgrade</a></li>
        </ul>
      </nav>
    </div>
    <div class="card">
      <h2>자동설치방법</h2>
      <p>설치할 프로그램 선택 후 호스팅 결제를 완료하시면 세팅 완료와 동시에 프로그램도 함께 자동 설치됩니다. 한번의 클릭으로 간편하게 이용할 수 있습니다.</p>

      <div class="alert alert-success"><i class="fas fa-info"></i> 이제 설치 매뉴얼을 보지 않아도 됩니다.</div>

      <h3>버튼 클릭으로 인스톨</h3>
      <p>프로그램 자동설치는 고객님께 필요한 설치형 프로그램을 신규 호스팅 세팅과 동시에 또는 사용중인 호스팅에 자동으로 설치해드리는 서비스입니다</p>
      <a href="#" class="btn btn-primary">Install CLI</a>

      <h3>필수조건</h3>
      <ul>
        <li>Windows 10, Mac OSX, Linux</li>
        <li>Node.js v12 or higher</li>
      </ul>

      <h3>Install</h3>
      <p>Mac (Homebrew)</p>
      <pre><code>$ brew install loruki-cli</code></pre>
      <p>NPM</p>
      <pre><code>$ npm install loruki-cli</code></pre>
      <p>Yarn</p>
      <pre><code>$ yarn install loruki-cli</code></pre>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="footer bg-dark py-5">
  <div class="container grid grid-3">
    <div>
      <h1>CAFE25</h1>
      <p>Copyright &copy; 2022</p>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="features.html">Features</a></li>
        <li><a href="docs.html">Docs</a></li>
      </ul>
    </nav>
    <div class="social">
      <a href="#"><i class="fab fa-github fa-2x"></i></a>
      <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
      <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
      <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
    </div>
  </div>
</footer>

```

features

``` 까페25 | 클라우드 호스팅 서비스

내게 맞는 서비스

까페25가 제공하는 여러 종류의 호스팅을 내게 맞는 조건에 맞춰 쉽게 선택할 수 있습니다.

<!-- Sub head -->
<section class="features-sub-head bg-light py-3">
  <div class="container grid">
    <div>
      <h1 class="md">다양한 플랫폼 호스팅</h1>
      <p>
        워드프레스, 제로보드XE, 그누보드, 킴스큐, 텍스트큐브 자동설치를 제공합니다. 킴스큐, 텍스트큐브, XE 등 일부 프로그램은 PHP7 환경에서 자동설치가 지원되지 않습니다. 호스팅 신청 또는 메뉴를
        통해 이용할 수 있습니다.
      </p>
    </div>
    <img src="images/server2.png" alt="" />
  </div>
</section>

<section class="features-main my-2">
  <div class="container grid grid-3">
    <div class="card flex">
      <i class="fas fa-server fa-3x"></i>
      <p>고객의 데이터를 2대의 디스크에 동시에 저장해 안전하게 관리하는 RAID 기술 적용 이중백업시스템을 전서버에 적용하고 있습니다.</p>
    </div>
    <div class="card flex">
      <i class="fas fa-network-wired fa-3x"></i>
      <p>기본적으로 리눅스 환경의 MySQL을 제공하고 추가적으로 사용자가 원하실 경우에는 MS-SQL, Oralcle, PgSQL를 이용 가능합니다</p>
    </div>
    <div class="card flex">
      <i class="fas fa-laptop-code fa-3x"></i>
      <p>100Gbps 백본망 연동으로 최상의 네트워크 환경을 이용할 수 있습니다.</p>
    </div>
    <div class="card flex">
      <i class="fas fa-database fa-3x"></i>
      <p>다양한 웹 공격과 악의적인 접속요청 등으로부터 사이트를 지켜 드립니다.</p>
    </div>
    <div class="card flex">
      <i class="fas fa-power-off fa-3x"></i>
      <p>Full SSD 서버에 이어 10배 넓어진 대역폭으로 성능은 한발 더 앞서갑니다.</p>
    </div>
    <div class="card flex">
      <i class="fas fa-upload fa-3x"></i>
      <p>CDN 서비스를 무료로 추가 제공하여 무료로 사용할 기회를 드립니다.</p>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="footer bg-dark py-5">
  <div class="container grid grid-3">
    <div>
      <h1>CAFE25</h1>
      <p>Copyright &copy; 2022</p>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="features.html">Features</a></li>
        <li><a href="docs.html">Docs</a></li>
      </ul>
    </nav>
    <div class="social">
      <a href="#"><i class="fab fa-github fa-2x"></i></a>
      <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
      <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
      <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
    </div>
  </div>
</footer>

```

docs

``` 까페25 | 클라우드 호스팅 서비스

<!-- Head -->
<section class="docs-head bg-primary py-3">
  <div class="container grid">
    <div>
      <h1 class="xl">자동설치</h1>
      <p class="lead">설치형 프로그램을 손쉽게 자동으로 설치해드립니다. 한번의 클릭으로 간편하게 이용할 수 있습니다.</p>
    </div>
    <img src="images/docs.png" alt="" />
  </div>
</section>

<!-- Docs main -->
<section class="docs-main my-4">
  <div class="container grid">
    <div class="card bg-light p-3">
      <h3 class="my-2">설치방법</h3>
      <nav>
        <ul>
          <li><a class="text-primary" href="#">Introduction</a></li>
          <li><a href="#">About Loruki</a></li>
          <li><a href="#">Installation</a></li>
        </ul>
      </nav>

      <h3 class="my-2">배포하는방법</h3>
      <nav>
        <ul>
          <li><a href="#">Setting up a container</a></li>
          <li><a href="#">Using the CLI</a></li>
          <li><a href="#">Managing resources</a></li>
          <li><a href="#">Upgrade & downgrade</a></li>
        </ul>
      </nav>
    </div>
    <div class="card">
      <h2>자동설치방법</h2>
      <p>설치할 프로그램 선택 후 호스팅 결제를 완료하시면 세팅 완료와 동시에 프로그램도 함께 자동 설치됩니다. 한번의 클릭으로 간편하게 이용할 수 있습니다.</p>

      <div class="alert alert-success"><i class="fas fa-info"></i> 이제 설치 매뉴얼을 보지 않아도 됩니다.</div>

      <h3>버튼 클릭으로 인스톨</h3>
      <p>프로그램 자동설치는 고객님께 필요한 설치형 프로그램을 신규 호스팅 세팅과 동시에 또는 사용중인 호스팅에 자동으로 설치해드리는 서비스입니다</p>
      <a href="#" class="btn btn-primary">Install CLI</a>

      <h3>필수조건</h3>
      <ul>
        <li>Windows 10, Mac OSX, Linux</li>
        <li>Node.js v12 or higher</li>
      </ul>

      <h3>Install</h3>
      <p>Mac (Homebrew)</p>
      <pre><code>$ brew install loruki-cli</code></pre>
      <p>NPM</p>
      <pre><code>$ npm install loruki-cli</code></pre>
      <p>Yarn</p>
      <pre><code>$ yarn install loruki-cli</code></pre>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="footer bg-dark py-5">
  <div class="container grid grid-3">
    <div>
      <h1>CAFE25</h1>
      <p>Copyright &copy; 2022</p>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="features.html">Features</a></li>
        <li><a href="docs.html">Docs</a></li>
      </ul>
    </nav>
    <div class="social">
      <a href="#"><i class="fab fa-github fa-2x"></i></a>
      <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
      <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
      <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
    </div>
  </div>
</footer>

```

style

``` @import url('https://fonts.googleapis.com/css2?family=Hubballi&family=Single+Day&display=swap');

/ 자주쓰는 색을 변수로 --변수명 /
:root {
--primary-color: #047aed;
--secondary-color: #1c3fa8;
--dark-color: #002240;
--light-color: #f4f4f4;
--success-color: #5cb85c;
--error-color: #d9534f;
}

/ 각 태그들의 기본 마진/패딩을 초기값 0으로 하고 박스모델 기준을 보더-박스로 한다. /

{
/* 은 모든 태그들을 선택 /
box-sizing: border-box;
padding: 0;
margin: 0;
}

body {
font-family: 'Nanum Gothic Coding', monospace;
color: #333;
line-height: 1.6; /세로줄간격 1.6배 160%/
}

ul{
list-style-type: none; /리스트 앞의 • 없애기 /
}

a {
text-decoration: none; / a태그 링크 없애기 /
color: #333;
}

h1,
h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}

p {
margin: 10px 0;
}

img {
/ 화면에 100%로 맞춤 /
width: 100%;
}

code,
pre {
background: #333;
color: #fff;
padding: 10px;
}

.hidden {
/ 화면에 표시 안함 display:none과 같음 /
visibility: hidden;
height: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
}

/ 그리드 3개 정렬 33.33% 씩 /
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}

/ 플랙스 가운데 정렬 /
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/ 네브바 메뉴 /
.navbar {
background-color: var(--primary-color);
color: #fff;
height: 70px;
}

.navbar ul {
display: flex;
}
.navbar a{
color: #fff;
padding: 10px;
margin: 0 5px;
}
.navbar .flex{
justify-content: space-between;
}
.navbar a:hover{
border-bottom: 2px solid #fff;
}
/ 섹션 쇼케이스 /
.showcase {
height: 400px;
background-color: var(--primary-color);
color: #fff;
position: relative;
}
.showcase h1 {
font-size: 40px;
}
.showcase p{
margin: 20px 0;
}
.showcase .grid{
/ 넘어갔을경우도 보이게 /
overflow: visible;
grid-template-columns: 55% auto;
gap: 30px;
}
.showcase-text {
/ 애니메이션 왼쪽에서 /
animation: slideInFromLeft 1s ease-in;
}
.showcase-form {
/ 상대좌표 원래위치 기준으로 top,Left,bottom,right /
position: relative;
top: 60px;
height: 350px;
padding: 40px;
width: 400px;
z-index: 100;
justify-self: flex-end;
animation: slideInFromRight 1s ease-in;
}

.showcase-form .form-control{
margin: 30px 0;
}

.showcase-form input[type="text"],
.showcase-form input[type="email"]{
border: 0;
border-bottom: 1px solid #b4becb;
width: 100%;
padding: 3px;
font-size: 16px;
}

.showcase::before,
.showcase::after {
content: '';
position: absolute;
height: 100px;
bottom: -70px;
right: 0;
left: 0;
background-color: #fff;
transform: skewY(-3deg);
}

/ 섹션 stats /
.stats {
padding-top: 100px;
animation: slideInFromBottom 1s ease-in;
}

.stats-heading {
max-width: 500px;
margin: auto;
}

.stats .grid h3 {
font-size: 35px;
}

.stats .grid p {
font-size: 20px;
font-weight: bold;
}

/ 섹션 cli /
.cli .grid {
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
}
/ > 자식태그 /
.cli .grid > *:first-child{
grid-column: 1/span 2;
grid-row: 1 /span 2;
}

/ 섹션 클라우드 /
.cloud .grid {
grid-template-columns: 4fr 3fr;
}

/ 섹션 랭귀지 /
.languages .flex {
flex-wrap: wrap;
}

.languages .card{
text-align: center;
margin: 18px 10px 40px;
/ transform을 쓸때 0.2s 천천히 시작 /
transition: transform 0.2s ease-in;
}

.languages .card:hover {
transform: translateY(-15px);
}

/ 특징 페이지 /
.features-head img,
.docs-head img {
width: 200px;
justify-self: flex-end;
}

.features-sub-head img {
width: 300px;
justify-self: flex-end;
}

.features-main .card > i {
/ 카드 안의 아이콘과 글자사이 거리 /
margin-right: 20px;
}

.features-main .grid {
padding: 30px;
}

.features-main .grid > *:nth-child(1) {
grid-column: 1 / span 3;
}

.features-main .grid > *:nth-child(2) {
grid-column: 1 / span 2;
}

/ 문서 페이지 /
.docs-main h3{
margin: 20px 0;
}

.docs-main .grid {
grid-template-columns: 1fr 2fr;
align-items: flex-start;
}

.docs-main nav li {
font-size: 17px;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #ccc;
}

.docs-main a:hover {
font-weight: bold;
}

/ footer 섹션 /

.footer .social a{
margin: 0 10px;
}

.fa-github:hover {
color: #000000;
}

.fa-facebook:hover {
color: #1773ea;
}

.fa-instagram:hover {
color: #b32e87;
}

.fa-twitter:hover {
color: #1c9cea;
}

/ 애니메이션 /
/ 왼쪽에서 오른쪽으로 /
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(0);
}
}
/ 오른쪽에서 왼쪽으로 /
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}

100% {
transform: translateX(0);
}
}
/ 위에서 아래로 /
@keyframes slideInFromTop {
0% {
transform: translateY(-100%);
}

100% {
transform: translateX(0);
}
}
/ 아래에서 위로 /
@keyframes slideInFromBottom {
0% {
transform: translateY(100%);
}

100% {
transform: translateX(0);
}
}

/ 반응형 페이지 /
/ 태블릿 가로 사이즈 850 이하 /
@media (max-width: 850px) {
.grid,
.showcase .grid,
.stats .grid,
.cli .grid,
.cloud .grid,
.features-main .grid,
.docs-main .grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}

.showcase {
height: auto;
}

.showcase-text {
text-align: center;
margin-top: 40px;
animation: slideInFromTop 1s ease-in;
}

.showcase-form {
justify-self: center;
margin: auto;
animation: slideInFromBottom 1s ease-in;
}

.cli .grid > *:first-child {
grid-column: 1;
grid-row: 1;
}

.features-head,
.features-sub-head,
.docs-head {
text-align: center;
}

.features-head img,
.features-sub-head img,
.docs-head img {
justify-self: center;
}

.features-main .grid > :first-child,
.features-main .grid > :nth-child(2) {
grid-column: 1;
}
}

/ Mobile 가로 사이즈 500px 이하/
@media (max-width: 500px) {
.navbar {
height: 110px;
}

.navbar .flex {
flex-direction: column;
}

.navbar ul {
padding: 10px;
background-color: rgba(0, 0, 0, 0.1);
}

.showcase-form {
width: 300px;
}

.languages .container{
margin: 0;
padding: 0 5px;
}
.languages .flex{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
}
}


<h2> utilities </h2>

/ 자주 사용하는 형태의 CSS 들을 묶어서 클래스로 사용/
/ 여기에 사용한 css는 index, docs, features 공통사용 /
.container{
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}

.card{
background-color: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
}
/ 버튼관련 css /
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
}

.btn-outline {
background-color: transparent;
border: 1px #fff solid;
}

.btn:hover {
transform: scale(0.98);
}

/ 백그라운드 색과 글자색& 버튼색과 글자색 /
/ 바탕색이 어두우면 글자는 발긍ㄴ색 바탕이 밝으면 글자는 어두운색 /
.bg-primary,
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}

.bg-secondary,
.btn-secondary {
background-color: var(--secondary-color);
color: #fff;
}

.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #fff;
}

.bg-light,
.btn-light {
background-color: var(--light-color);
color: #333;
}

/ 예) Footer /
.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
color: #fff;
}

/ 글자 색 /
.text-primary {
color: var(--primary-color);
}

.text-secondary {
color: var(--secondary-color);
}

.text-dark {
color: var(--dark-color);
}

.text-light {
color: var(--light-color);
}

/ 글자 크기 /
.lead {
font-size: 20px;
}

.sm {
font-size: 1rem;
}

.md {
font-size: 2rem;
}

.lg {
font-size: 3rem;
}

.xl {
font-size: 4rem;
}

/ 좌우 정렬 /
.text-center {
text-align: center;
}

/ 경고창 /
.alert {
background-color: var(--light-color);
padding: 10px 20px;
font-weight: bold;
margin: 15px 0;
}

.alert i {
margin-right: 10px;
}

.alert-success {
background-color: var(--success-color);
color: #fff;
}

.alert-error {
background-color: var(--error-color);
color: #fff;
}

/ 그리드 정렬(절반:절반) /
.grid {
display: gird;
/ grid-template-columnsL: 1fr 1fr /
grid-template-columns: repeat(3, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
}
/ 3등분하는 grid /
.grid-3{
/ 가로 3등분을 덮어씀 /
grid-template-columns: repeat(3, 1fr);
}
/ 플렉스 /
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/ 마진 /
.my-1 {
margin: 1rem 0;
}

.my-2 {
margin: 1.5rem 0;
}

.my-3 {
margin: 2rem 0;
}

.my-4 {
margin: 3rem 0;
}

.my-5 {
margin: 4rem 0;
}

.m-1 {
margin: 1rem;
}

.m-2 {
margin: 1.5rem;
}

.m-3 {
margin: 2rem;
}

.m-4 {
margin: 3rem;
}

.m-5 {
margin: 4rem;
}

/ 패딩 /
.py-1 {
padding: 1rem 0;
}

.py-2 {
padding: 1.5rem 0;
}

.py-3 {
padding: 2rem 0;
}

.py-4 {
padding: 3rem 0;
}

.py-5 {
padding: 4rem 0;
}

.p-1 {
padding: 1rem;
}

.p-2 {
padding: 1.5rem;
}

.p-3 {
padding: 2rem;
}

.p-4 {
padding: 3rem;
}

.p-5 {
padding: 4rem;
}

TO AC

유망주

이전 포스트

16장 Cafe25

CCS

index

CAFE25

features

CAFE25

내게 맞는 서비스

docs

CAFE25

style

15장

0개의 댓글