diff --git a/docs/views/checkbox/api/checkbox.md b/docs/views/checkbox/api/checkbox.md
index ba92bed74..675d6e862 100644
--- a/docs/views/checkbox/api/checkbox.md
+++ b/docs/views/checkbox/api/checkbox.md
@@ -20,36 +20,33 @@
 > 1) 체크박스 그룹 사용 시
 >> <체크박스그룹>
 >
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
-  |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     | null      | Array   | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+  |----- |--------|------|------|------|
+  | v-model | null | Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
 >> <체크박스>
 >
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     |   null    | String, Number, Boolean, Symbol, Array   | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | label       |   null    | String  | HTML element value (required)    |  |
-  | disabled    |   false   | Boolean | HTML element disabled attribute    |  |
+  | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | label | null | String  | HTML element value (required) |  |
+  | disabled | false | Boolean | HTML element disabled attribute |  |
 >
 
 >
 > 2) 체크박스만 사용 시
 >> <체크박스>
 >
->  |    이름     |   디폴트   |  타입   |          설명            |                    종류                           |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model       |         | String or Boolean | <체크박스>의 value    |  |
-  | value       |           | String  | HTML element value    |  |
-  | size       |           | String  | 체크박스의 크기 | '', 'small' |
-  | type       |           | String  | 체크박스 박스의 모양 (default : 테두리 원) | '', 'square' |
-  | after-type |           | String  | 체크박스 내부 체크모양 (deault : 내부 원) | '', 'minus', 'check' |
-  | disabled    |   false   | Boolean | HTML element disabled attribute    |  |
+  | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | label | null | String  | HTML element value (required) |  |
+  | disabled | false | Boolean | HTML element disabled attribute |  |
 
 >### Event
 >> <체크박스그룹>
-
- | 이름 | 파라미터 | 설명 |
- | ---- | ------- | ---- |
+>
+>| 이름 | 파라미터 | 설명 |
+ |------|----------|------|
  | change | event | <체크박스그룹> 내 <체크박스> 변화 이벤트 감지 |
 
 >### 참고
diff --git a/docs/views/checkbox/example/CheckboxGroup.vue b/docs/views/checkbox/example/CheckboxGroup.vue
index 402072aa6..7357abe8e 100644
--- a/docs/views/checkbox/example/CheckboxGroup.vue
+++ b/docs/views/checkbox/example/CheckboxGroup.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="case">
     <p class="case-title">Group</p>
-    <EvCheckboxGroup
+    <ev-checkbox-group
       v-model="checkboxGroup"
     >
-      <EvCheckbox label="Option A">A</EvCheckbox>
-      <EvCheckbox label="Option B" />
-      <EvCheckbox label="Option C" />
-      <EvCheckbox label="Option D" />
-    </EvCheckboxGroup>
+      <ev-checkbox label="Option A">A</ev-checkbox>
+      <ev-checkbox label="Option B" />
+      <ev-checkbox label="Option C" />
+      <ev-checkbox label="Option D" />
+    </ev-checkbox-group>
     <div class="description">
       <span class="badge">
         checkboxGroup
@@ -18,14 +18,14 @@
   </div>
   <div class="case">
     <p class="case-title">Event</p>
-    <EvCheckboxGroup
+    <ev-checkbox-group
       v-model="checkboxGroup2"
     >
-      <EvCheckbox label="Option A">A</EvCheckbox>
-      <EvCheckbox label="Option B">B</EvCheckbox>
-      <EvCheckbox label="Option C" />
-      <EvCheckbox label="Option D" />
-    </EvCheckboxGroup>
+      <ev-checkbox label="Option A">A</ev-checkbox>
+      <ev-checkbox label="Option B">B</ev-checkbox>
+      <ev-checkbox label="Option C" />
+      <ev-checkbox label="Option D" />
+    </ev-checkbox-group>
     <div class="description">
       <span class="badge">
         checkboxGroup2
@@ -41,27 +41,27 @@
   </div>
   <div class="case">
     <p class="case-title">All Check</p>
-    <EvCheckboxGroup
+    <ev-checkbox-group
       v-model="checkboxGroup3"
     >
-      <EvCheckbox
+      <ev-checkbox
         v-for="(info, idx) in checkboxList3"
         :key="idx"
         :label="info.label"
       >
         {{ info.text }}
-      </EvCheckbox>
-    </EvCheckboxGroup>
+      </ev-checkbox>
+    </ev-checkbox-group>
     <div class="description">
       <span class="badge">
         checkboxGroup3
       </span>
-      <EvCheckbox
+      <ev-checkbox
         v-model="allCheck"
         @change="changeAllCheck"
       >
         ALL CHECK
-      </EvCheckbox>
+      </ev-checkbox>
       {{ checkboxGroup3 }}
     </div>
   </div>
@@ -70,8 +70,10 @@
 <script>
 import { ref, watch } from 'vue';
 import { isEqual, sortBy } from 'lodash-es';
+import EvCheckboxGroup from '@/components/checkboxGroup/CheckboxGroup';
 
 export default {
+  components: { EvCheckboxGroup },
   setup() {
     const checkboxGroup = ref(['Option A', 'Option B']);
 
diff --git a/docs/views/checkbox/example/Default.vue b/docs/views/checkbox/example/Default.vue
index 402e787c3..3810bcff2 100644
--- a/docs/views/checkbox/example/Default.vue
+++ b/docs/views/checkbox/example/Default.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="case">
     <p class="case-title">Common</p>
-    <EvCheckbox
+    <ev-checkbox
       v-model="checkVal1"
     >
       Checkbox
-    </EvCheckbox>
+    </ev-checkbox>
     <div class="description">
       <button
         class="btn"
@@ -18,12 +18,12 @@
   </div>
   <div class="case">
     <p class="case-title">Use Change Event</p>
-    <EvCheckbox
+    <ev-checkbox
       v-model="checkVal2"
       @change="changeVal2"
     >
       Single Checkbox
-    </EvCheckbox>
+    </ev-checkbox>
     <div class="description">
       <span class="badge">
         Value in changeEvent
@@ -39,12 +39,12 @@
   </div>
   <div class="case">
     <p class="case-title">Disabled</p>
-    <EvCheckbox
+    <ev-checkbox
       v-model="checkVal3"
       :disabled="isDisable"
     >
       DISABLED
-    </EvCheckbox>
+    </ev-checkbox>
     <div class="description">
       <button
         class="btn"
diff --git a/docs/views/checkbox/index.vue b/docs/views/checkbox/index.vue
index a8fc4e04f..64d6b98a1 100644
--- a/docs/views/checkbox/index.vue
+++ b/docs/views/checkbox/index.vue
@@ -2,7 +2,7 @@
   <h2 class="content-title">
     Checkbox
   </h2>
-  <Example
+  <example
     v-for="(component, index) in components"
     :key="`${component.title}_${index}`"
     :title="component.title"
@@ -11,7 +11,7 @@
     :url="component.url"
     :code-text="component.codeText"
   />
-  <MarkdownView
+  <markdown-view
     :source="mdText"
   />
 </template>
@@ -19,12 +19,12 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 import { parseComponent } from 'vue-template-compiler';
-import Example from '../../components/Example';
+import Example from 'docs/components/Example';
+import MarkdownView from 'docs/components/MarkdownView';
 import Default from './example/Default';
 import CheckboxGroup from './example/CheckboxGroup';
 import DefaultRaw from '!!raw-loader!./example/Default';
 import CheckboxGroupRaw from '!!raw-loader!./example/CheckboxGroup';
-import MarkdownView from '../../components/MarkdownView';
 import CheckboxMd from '!!raw-loader!./api/checkbox.md';
 
 export default {
diff --git a/docs/views/select/api/select.md b/docs/views/select/api/select.md
index f68f5db55..0204d6ca1 100644
--- a/docs/views/select/api/select.md
+++ b/docs/views/select/api/select.md
@@ -1,44 +1,47 @@
 
 >### Desc
- - 태그는 &lt;EvSelect&gt;(이하 <셀렉트>)로 정의
+ - 태그는 &lt;ev-select&gt;(이하 <셀렉트>)로 정의
+ - &lt;EvSelect&gt; 클릭시 나타나는 영역은 dropdown box(이하 <드랍다운 박스>)로 정의
 
 ```
-<EvSelect
+<ev-select
     v-model="초기값(value)"
     :items="[{...}, {...}, {...}]"
 />
 ```
 
  - <셀렉트> 컴포넌트는 `<input type="text" />` 를 래핑하는 구조를 가지고 있다.
- - <셀릭트> 컴포넌트를 클릭하였을 때, :items 속성에 1개 이상의 객체를 가진 배열이 존재하는 경우,
+ - <셀렉트> 컴포넌트를 클릭하였을 때, :items 속성에 1개 이상의 객체를 가진 배열이 존재하는 경우,
    하단에 선택할 리스트 데이터를 보여주는 <드랍다운 박스>가 나타난다.
  - <드랍다운 박스>가 열린 상태에서 <셀렉트>를 한번더 클릭할 시 <드랍다운 박스>는 사라진다. 
  - <드랍다운 박스>는 Vue 3의 `<teleport />` 기능을 사용하여 `body` DOM에 렌더링시킨다.
    이 기능은 애플리케이션 UI를 Vue 앱 외부의 DOM으로 이동시키지만, 코드를 <셀렉트> 컴포넌트에서
    관리하기 위함이다. 
+ - <셀렉트> 컴포넌트의 기본 width는 100%이다.
+   다른 형태를 위해서는 ev-select 클래스에 스타일을 래핑해야한다.
+ - 기본적으로 <드랍다운 박스>의 너비는 <셀렉트> 컴포넌트의 너비와 동일하게 맞춰져 있다.
 
 >### Props
 > 1) 기본 셀렉트 사용 시
 >> <셀렉트>
 >
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
-  |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     |   null    | Boolean, String, Number   | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | placeholder |   ''      | String  | <셀렉트>의 표기문구 |  |
-  | items       |   []      | Array   | <셀렉트> 선택가능한 리스트 |  |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+  |------|--------|------|------|------|
+  | v-model | null | Boolean, String, Number | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | items | [] | Array | <셀렉트> 선택가능한 리스트 |  |
+  | placeholder | '' | String | <셀렉트>의 표기문구 |  |
 > - <셀렉트> 클릭 시 <드랍다운 박스>가 나타나며, 목록 선택 시 <드랍다운 박스>가 닫혀야한다.
 >
 
 >
 > 2) 복수선택 셀렉트 사용 시
 >> <셀렉트>
->
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
-  |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     |   null    | Boolean, String, Number   | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | placeholder |   ''      | String  | <셀렉트>의 표기문구 |  |
-  | items       |   []      | Array   | <셀렉트> 선택가능한 리스트 |  |
-  | multiple    |   false   | Boolean | <셀렉트> 복수 선택 가능여부 |  |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+  |------|--------|------|------|------|
+  | v-model | null | Boolean, String, Number | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | placeholder | '' | String | <셀렉트>의 표기문구 |  |
+  | items | [] | Array | <셀렉트> 선택가능한 리스트 |  |
+  | multiple | false | Boolean | <셀렉트> 복수 선택 가능여부 |  |
 > - <셀렉트> 클릭 시 <드랍다운 박스>가 나타나며, 목록 선택 시 <드랍다운 박스>가 닫히지 말아야 한다.
 >
 
diff --git a/docs/views/select/example/Default.vue b/docs/views/select/example/Default.vue
index b5433aefc..2295057cf 100644
--- a/docs/views/select/example/Default.vue
+++ b/docs/views/select/example/Default.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="case">
     <p class="case-title">Common</p>
-    <EvSelect
+    <ev-select
       v-if="isShow"
       v-model="selectVal1"
       :items="items1"
     />
     <br>
-    <EvSelect
+    <ev-select
       v-model="selectVal2"
       :placeholder="'phdsfsdfjsdhfdfgdfgdfsdjkfhsjkdhjkk'"
       :items="items1"
diff --git a/docs/views/select/index.vue b/docs/views/select/index.vue
index e3e0b03d8..df542365c 100644
--- a/docs/views/select/index.vue
+++ b/docs/views/select/index.vue
@@ -2,7 +2,7 @@
   <h2 class="content-title">
     Select
   </h2>
-  <Example
+  <example
     v-for="(component, index) in components"
     :key="`${component.title}_${index}`"
     :title="component.title"
@@ -11,7 +11,7 @@
     :url="component.url"
     :code-text="component.codeText"
   />
-  <MarkdownView
+  <markdown-view
     :source="mdText"
   />
 </template>
@@ -19,10 +19,10 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 import { parseComponent } from 'vue-template-compiler';
-import Example from '../../components/Example';
+import Example from 'docs/components/Example';
+import MarkdownView from 'docs/components/MarkdownView';
 import Default from './example/Default';
 import DefaultRaw from '!!raw-loader!./example/Default';
-import MarkdownView from '../../components/MarkdownView';
 import apiMd from '!!raw-loader!./api/select.md';
 
 export default {
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index ff0f792f5..2d4550555 100644
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -3,8 +3,8 @@
     role="checkbox"
     class="ev-checkbox"
     :class="[
-      { 'is-disabled': disabled },
-      { 'is-checked': isChecked },
+      { disabled: disabled },
+      { checked: checked },
     ]"
   >
     <input
@@ -41,7 +41,7 @@ export default {
     },
     label: {
       type: [String, Number, Boolean, Symbol],
-      default: null,
+      required: true,
     },
     disabled: {
       type: Boolean,
@@ -62,7 +62,7 @@ export default {
     );
     const refLabel = computed(() => props.label);
 
-    const isChecked = computed(() => {
+    const checked = computed(() => {
       if (Array.isArray(mv.value)) {
         return mv.value.includes(refLabel.value);
       }
@@ -76,7 +76,7 @@ export default {
 
     return {
       mv,
-      isChecked,
+      checked,
       changeMv,
     };
   },
@@ -93,7 +93,7 @@ export default {
   input {
     cursor: pointer;
   }
-  &.is-disabled {
+  &.disabled {
     cursor: not-allowed;
 
     @include evThemify() {
diff --git a/src/components/select/Select.vue b/src/components/select/Select.vue
index 150df29a8..97e21a119 100644
--- a/src/components/select/Select.vue
+++ b/src/components/select/Select.vue
@@ -3,7 +3,7 @@
     ref="select"
     class="ev-select"
     :class="{
-        'is-selected': isDropbox,
+        'selected': isDropbox,
       }"
   >
     <input
@@ -19,7 +19,7 @@
     <i
       class="ev-input-suffix ev-icon-s-arrow-down"
       :class="{
-        'is-selected': isDropbox,
+        'selected': isDropbox,
       }"
     />
   </div>
@@ -35,7 +35,7 @@
           :key="`${item.value}_${idx}`"
           class="ev-select-dropdown-item"
           :class="{
-            'is-selected': item.value === mv,
+            'selected': item.value === mv,
           }"
           :title="item.name"
           @click.stop.prevent="clickItem(item.value)"
@@ -127,7 +127,7 @@ export default {
   border-radius: 2px;
   cursor: pointer;
 
-  &.is-selected {
+  &.selected {
     border: 1px solid #409EFF;
   }
 
@@ -149,7 +149,7 @@ export default {
     transform: rotate(0deg);
     transition-duration: 0.3s;
 
-    &.is-selected {
+    &.selected {
       transform: rotate(180deg);
     }
   }
@@ -190,7 +190,7 @@ export default {
   &:hover {
     opacity: 0.85;
   }
-  &.is-selected {
+  &.selected {
     color: #EBEBEB;
     background-color: #730EF4;
   }
diff --git a/src/components/select/uses.js b/src/components/select/uses.js
index b9e88fb65..7e473dfc3 100644
--- a/src/components/select/uses.js
+++ b/src/components/select/uses.js
@@ -47,12 +47,14 @@ export const useDropdown = () => {
       return;
     }
     isDropbox.value = !isDropbox.value;
-    const borderWidth = (select.value.offsetWidth - select.value.clientWidth) / 2;
-    const selectRect = select.value?.getBoundingClientRect();
+    if (isDropbox.value) {
+      const borderWidth = (select.value.offsetWidth - select.value.clientWidth) / 2;
+      const selectRect = select.value?.getBoundingClientRect();
 
-    dropboxPosition.left = e.pageX - e.offsetX - borderWidth;
-    dropboxPosition.top = e.pageY - e.offsetY + selectRect?.height - borderWidth;
-    dropboxPosition.width = selectRect?.width;
+      dropboxPosition.left = e.pageX - e.offsetX - borderWidth;
+      dropboxPosition.top = e.pageY - e.offsetY + selectRect?.height - borderWidth;
+      dropboxPosition.width = selectRect?.width;
+    }
   };
   const clickDropbox = () => { isDropbox.value = true; };
   const clickOutsideDropbox = () => { isDropbox.value = false; };
diff --git a/vue.config.js b/vue.config.js
index 00f8d0fa1..62f56a550 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 
 module.exports = {
@@ -17,6 +18,12 @@ module.exports = {
       .end();
   },
   configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.join(__dirname, 'src/'),
+        docs: path.join(__dirname, 'docs/'),
+      },
+    },
     plugins: [
       new StyleLintPlugin({
         files: [