하룹코어 에듀센터

피시,태블릿,모바일 기기별로 반응형 최적화 맞춤별 디자인

다양한 애니메이션 효과를 클릭 한번으로 적용시키십시오

하룹코어로 병원 랜딩페이지제작 천만원 이상 절약하는방법

코딩없이 웹에서 바로 텍스트 변경 및 폰트까지 변경하는법

포토샵 없이, jQuery나 자바스크립트 코딩없이 하룹코어만으로 배경디자인을 하는 방법

하룹코어를 이용하시면, 포토샵이 없어도, 제이쿼리나 자바스크립트 코딩없이도 매우 다이나믹한 배경을 만드실 수 있습니다.

1.단순 이미지를 배경으로 이용하기
그냥 아무사진이나 올려주세요. 가로크기는 1920px가 적당하며, 세로크기는 마음대로 하시면 됩니다. 하지만 이러한 경우 글씨가 잘 안보이시죠? 이럴때는 디자이너한테 배경이미지에 오버레이처리를 해달라고 한뒤, 오버레이된 이미지를 올리시는데, 하룹코어는 이러한 포토샵 기능들까지 클릭 한번으로 이용하실 수 있습니다.

2.배경을 고정시켜서 다이내믹한 효과 연출하기
가끔 배경을 고정시켜서 다이내믹한 랜딩페이지 효과를 연출하는 기능을 보셨을것입니다. 예를들어 빅터 메인을 보시면, 되는데, 이렇게 배경을 고정시키는것 역시, 하룹코어에서는 매우 간단하게 해결 하실 수 있습니다. 섹션 수정을 누르시고, 일반설정에서 스크롤을 고정으로 변경하시면, 배경을 이렇게 고정시키실 수 있습니다.

이외에 배경을 색상만으로 변경하기, 이미지 반복하여 배경에 적용하기, 그리고 배경을 슬라이드시켜서 슬라이드 섹션도 황당할 정도로 간단하게 적용이 바로 가능합니다. 만약 뒷 배경에 슬라이드가 되는 기능을 개발하기 위해 기본 HTML부터, React, Vue, Angular, Svelte까지 틀만 잡는부분만 코딩을 한다면

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {});
    </script>
  </body>
</html>
REACT
{
  "tags": [
    "swiper"
  ],
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build"
  },
  "name": "swiper-default-react",
  "license": "MIT",
  "devDependencies": {
    "vite": "^2.5.0"
  },
  "dependencies": {
    "swiper": "^7.0.0",
    "react-dom": "17.0.1",
    "react": "17.0.1"
  }
}
VUE
{
  "tags": [
    "swiper"
  ],
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build"
  },
  "name": "swiper-default-vue",
  "license": "MIT",
  "devDependencies": {
    "vite": "^2.5.0",
    "@vue/compiler-sfc": "^3.2.4",
    "@vitejs/plugin-vue": "^1.4.0"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "swiper": "^7.0.0"
  }
}
ANGULAR
{
  "tags": [
    "swiper"
  ],
  "scripts": {
    "start": "ng serve",
    "ng": "ng",
    "build": "ng build --prod"
  },
  "name": "swiper-default-angular",
  "license": "MIT",
  "devDependencies": {
    "typescript": "~4.3.5",
    "@types/node": "^12.11.1",
    "@angular/compiler-cli": "~12.2.0",
    "@angular/cli": "~12.2.2",
    "@angular-devkit/build-angular": "~12.2.2"
  },
  "dependencies": {
    "zone.js": "~0.11.4",
    "tslib": "^2.3.0",
    "swiper": "^7.0.0",
    "rxjs": "~6.6.0",
    "@angular/router": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/animations": "~12.2.0"
  }
}
SVELTE
{
  "tags": [
    "swiper",
    "svelte"
  ],
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build"
  },
  "name": "swiper-default-svelte",
  "license": "MIT",
  "devDependencies": {
    "vite": "^2.5.0",
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.19"
  },
  "dependencies": {
    "swiper": "^7.0.0",
    "svelte": "^3.38.2"
  }
}

이렇게 해서 기초적인 틀만 잡았고, 이제 CSS나 jQuery 혹은 자바스크립트로 돌아가는 방식을 설정해주고, 모양을 설정해줘야하는데, 하룹코어가 적용되어있는 홈페이지는 이러한 수많은 코딩들이 알아서 지정한 부분을 로드해주게 됩니다.

그러므로 스마트폰으로 이미지를 찍어도, 무료이미지사이트에서 받은 이미지만 넣어도, 상당수의 부분들을 하룹코어가 알아서 잡아주므로, 대충 이미지 넣고, 글씨 적었는데, 매우 멋진 하나의 섹션이 만들어지게 되죠.

하룹코어를 통해, 개발팀을 구축하는 병원이나, 웹에이전시에 엄청난 수정비용과 유지보수 비용을 지불하는 병원들이 실제로 매우 줄어들고 있습니다. 하룹코어를 통해 원장님 마음껏, 원하시는대로 홈페이지 및 랜딩페이지를 관리해보십시오.