Infor

Design Site Reference

Site URL
dribbble https://dribbble.com
behance https://www.behance.net
pinterest https://www.pinterest.co.kr

Coding Site Reference

Site URL
HTML Mozilla https://developer.mozilla.org
HTML W3schools https://www.w3schools.com
CSS Mozilla https://developer.mozilla.org
CSS W3schools https://www.w3schools.com
Entity Code https://www.toptal.com
Emmet cheat-sheet https://docs.emmet.io/cheat-sheet
다음 트로이 (반응형 검사) http://troy.labs.daum.net/
html 시작하기 http://richclub99.dothome.co.kr
그라데이션 색상설정 https://webgradients.com/

Site Research Reference

Site URL
5 Day (국내) http://www.5day.co.kr
db cut (국내) https://www.dbcut.com
awwwards http://www.awwwards.com
csswinner http://www.csswinner.com
land-book https://land-book.com
lapa.ninja http://www.lapa.ninja

생활코딩

  • 코딩은 웹의 전반적인 흐름을 먼저 알고있어야한다.



HTML 수업

1. HTML 기술소개
  • HTML은 하이퍼텍스트를 가장 중요한 특징으로하는 마크업이라는 형식을가진 컴퓨터 프로그래밍언어이며, 사람과 컴퓨터(웹브라우저)사이의 약속이다.
2. HTML - 기본문법 1
  • -실습에 쓸 html파일만들기 웹브라우저가 읽을수 있도록하기
3. HTML - 기본문법 2
  • 태그의문법 (시작태그와 닫히는태그) 태그의이름은 약속되어있다.
4. HTML - 하이퍼텍스트와 속성
  • HTML - 하이퍼텍스트와 속성
  • 속성과 링크 (문서와문서가 연결되있는특성을 코드를이용하여 어떻게 표현할수있는가) 속성의 순서는 상관없으며 <a>태그에 taget,title속성이용가능
5. 맥에서 텍스트 에디터 사용시 주의 사항
  • 텍스트에디터-스마트인용체크 유의
6. 태그의 중첩과 목록
  • 리스트의 성격에 따른 태그의 사용과 태그의 중첩 :<ul>,<li>태그의 기능(group)/<ol>의기능
7. 문서의 구조
  • 부가적인 정보(head)-본문(body) 의 구조를 가지고있으며,html태그,head 속title,meta charset등은 문서를 설명해주는태그이다.
8. DOCTYPE
  • <doctype>은 document type의약자이며 어떠한 표준에 따라서 제정된 태그들인지 선언하는 역할을 한다.
9. 웹사이트 만들기
  • 문단별 링크를 먼저 걸어주고 세부 html을 만드는 작업, 어떤태그든 검색으로도 충분히 사용할수있다.
10. 개발도구
  • atom ,emmet 사용법 ex)tad키 활용,alt+ctrl+방향키로 편집점 쉽게이동
11. HTML의 변천사와 통계
  • 빈도수가 높은 태그와 시대별 버전에따른 태그의 변화

주요태그

12. 단락 - p
  • p태그의 기능과 함께 br태그를 응용하여 간격 조절하기 혹은 후에 css언어로 세부조정가능하다.
13. 줄바꿈 - br
  • a forced line-break의 약자로 줄 강제변경
14. 이미지 - img
  • img는 닫는태그가 필요없다.사이즈정할땐 비율 유의해야한다.alt속성으로 이름을 써주면 이미지를 깨졌을때의 대안정보이다.(참고사이트:pixabay)
15. 표 - table
  • table에서 table data의 약자인 td의 역할을 알아보고 행끼리의 묶음지어주는것을 할 수있다=tr
16. 입력양식 - form
  • form은 사용자가 입력한 정보를 서버로 전송할때 사용하는것을 뜻한다.
17. 텍스트 입력
  • form태그중 텍스트를 입력받는 태그에는 기본값을 줄 수있는 value, 입력칸을 조절할수있는 textarea등 다양한 속성을 이용 할 수있다.
18. 선택
  • 드롭다운리스트는 제한된 공간안에서 어려개의 선택지를 선택할 수 있게 하는 기능이다.(select-option)에서 multiple
19. 버튼
  • input을 이용한 다양한 버튼 들을 응용 할 수있다.
20. 데이터 전송 - hidden
  • hidden 태그는 보이지않지만 서버로전송할경우(ui필요하지않을 경우) 사용한다.



CSS 수업

CSS 소개
  • css언어는 html을 꾸며주는 언어이다.정보와 디자인의 분리를 시켜준다.
1. 실습환경
  • css를 시작하려면 html이 준비되어있어야 한다.
2. HTML과 CSS가 만나는 법
  • html문법에는 css문법과 결합되어있다.
선택자

3. 선택자와 선언
  • 선택자와 선언은 주어와 서술어로 해석할 수 있다. 그사이의 ;은 구분자로 정의할 수 있다.
4. 선택자의 종류
  • 선택자는 효과를 주기위한 가장 중요한 첫단계이다.
5. 부모 자식 선택자
  • id,class,태그 선택자의 세부사항을 정할때 부모 자식 선택자의 관계를 이용한다.
6. 선택자 공부 팁
  • css cheat sheet의 중요성
7. 가상 클래스 선택자
  • 가상클래스 선택자는 클래스선택자처럼 동작하지만 각각의 엘리먼트의 특성에따라 사용되는 선택자이다.맥락에 따라 달라짐

여러가지 선택자들


8. 다양한 선택자들 1
  • 이미지화를 통한 선택자 수업1
9. 다양한 선택자들 2
  • 이미지화를 통한 선택자 수업2
10. 다양한 선택자들 3
  • 이미지화를 통한 선택자 수업3
11. 다양한 선택자들 4
  • 이미지화를 통한 선택자 수업4
12. 속성을 공부하는 방법
  • 빈도수를 중점으로 두고 속성을 공부해야한다.



타이포그래피


13. font-size
  • font-size에서는 단위를 유의해서 사용한다. px은 바뀌지 않지만 rem은 가변성이있다.
14. color
  • 폰트에 컬러라는 속성을 넣어 지정해줄수 있다.(color name,hex,rgb)
15. text-align
  • 텍스트를 정렬하는 방법은 컬러나 테두리효과와 같이 쓸 수 있고 justify로 균등하게 맞출 수도 있다.
16. font
  • font 의 여러가지속성을 축약형으로 쓸 수있다. 단, 순서를 지켜야한다.
17. 웹폰트
  • 웹 폰트란 사용자가 서버에서 없는 폰트를 다운로드해서 사용할 수 있게하는 기법이다.

조화

18. 상속
  • 엘리먼트에 속성을 주었을때 하위 엘리먼트가 그 성질을 이어받는것을 상속이라 하며 생산성을 높인다.
19. stylish
  • stylish도구를 이용하여 css를 커스터마이징을 하거나 공유하고 적용 할 수있다.
20.캐스케이딩
  • 캐스케이딩이라는 기능은 사용자가 자기가 사용하는기능의디자인에대한 자기결정권을 가질수 있으면서도 질서 안에 속해있는 규칙이다.

HTML 수업 2

21.컨트롤의 제목-lavel
  • lavel은 특별한 기능보다는 어떠한 부분을 특정하게 이름을 연결시켜준다.
22.method
  • form태그로 정보를 url로 전달하거나 감춰서 전달하여야할때 전송방법의 타입을 정할때 사용하는 속성이다.
  • get : 기본 방식
  • post : url 뒤의 데이터를 숨겨서 전송하여 노출되지않는다. (추천)
23.파일 업로드
  • input으로 형식과 전송을 만들고 form action으로 경로를 지정해준다.
  • method는 전송 방식을 정해주며 enctype은 multipart/form-data로 해줄것.
24.정보로서의 html
  • 정보들이 웹화 하면서, 정보를 담는 그릇의 역할을 하고 있는 것이 바로 HTML이다.
25.글꼴 font (퇴출됨)
  • 대표적으로 퇴출된 태그로써 시각적인 디자인일뿐이지 정보에대한 설명을 줄 수 없다. 대신 css 프로그래밍언어를 통한 보완을 진행하게 된다.
26. meta
  • 어떠한데이터를 설명해주는 데이터이며, 본문에 들어가있지않은 콘텐츠의 요약이나 설명을 해주는 태그이며, 좀 더 가치있는 정보로 만들수 있고 검색과 연관되어 매우 중요하다.
27.의미론적 태그
  • 웹의 트렌드중 하나가 semantic다. 정보들을 명확하게 표시해주는 태그들을 semantic태그라고하며 좀더 html을 의미론적으로 다가갈 수 있다. 즉 좌표가 되어주는 것이다. (ex: header, footer)
28. 검색엔진 최적화 1
  • 검색엔진들이 컨텐츠를 잘 해석하고 상위에 노출될 수 있도록 해주는것을 뜻하며, 의미론적태그를 이용하여 잘 설명하는것이 최적화의 방법중 하나이다. -구글 검색엔진 최적화 가이드
29. 검색엔진 최적화 2
  • title 태그이용하여 명확하고 독창적인 타이틀달아주기
  • meta 태그활용하기 url 구조 개선하기 리다이렉션 기능 넣기
30. 검색엔진 최적화 3
  • 사이트내에서 이동하기 쉽게 만들기
  • 브레드프럼 :사이드 이동경로를 통해 상위 하위 경로를 알수 있게 하기
31. 검색엔진 최적화 4
  • 검색엔진을 위한것이아닌 사용자를 위한 콘텐츠
  • 작성하기 보다 나은 앵커 텍스트 작성 : a태그에 대한 타이틀 작성할때 유의
32. 검색엔진 최적화 5
  • img를 넣을때 alt 속성 사용하기 제목과 관련된 검색엔진 최적화-옵션 사용하기
33. 검색엔진 최적화 6
  • robot.txt 효과적으로 활용하기 =검색에 필요하지않은 부분을 제어해준다 (url뒤에 치면 알아 볼 수있다.)
  • 단, robot.txt 를 보안 도구로 사용해선 안된다. 기능이 없기 때문이다.
34. 검색엔진 최적화 7
  • 페이지랭크(사이트마다의 랭킹이며 높은 랭킹을 상위노출시킨다.)
35. 웹 개발자 도구
  • 웹개발에 있어 필요한 분석작업들을 도와주는 도구로써, 크롬-개발자도구 참고.
  • 도구중 디바이스모드를 사용하면 기기마다의 화면모양을 볼 수 있다.
36. 모바일지원 (viewport)
  • meta-name-viewport 태그를 이용하여 디바이스에 맞게 화면이 움직이도록 설정할 수 있다.
40. HTML5의 입력양식1
  • 편의기능 대폭향상 (input type의 다양화) 모바일에서 더욱 편하게 사용하기위한 것이 포커스 이며, 제어의기능도 생겼다.
41. HTML5의 입력양식2
  • date : 날짜입력하기(캘린더가 나온다)
  • month: 년과 월 입력
  • email : 이메일 입력칸
  • range : 조절 바 (min으로 범위 조정가능)
42. HTML5의 입력양식의 속성들
  • autocomplete : 자동완성기능을 활성화/비활성화 할수있으며, 특정부분만 제어 할 수도 있다.
  • placeholder : 입력칸안에 폼의 설명이 생기며 입력을 시작하면 사라진다.
  • autofocus : 페이지 접근시 자동적으로 커서가 그부분으로 이동한다.
43. HTML5의 입력 값 체크
  • 사용자가 입력한 정보의 유효성을 체크할 수 있다.

CSS 수업 2

21.도구소개 - Bracket
  • bracket의 기능소개
  • 번개기능: 실시간 미리보기 가능
  • 자동완성화 기능
  • 오른쪽클릭 -빠른편집 : 수정할 부분을 찾아서 바꿔준다.
  • 빠른문서 : 사용법 빨리 숙지 가능 확장기능
22.인라인 vs 블럭
  • 인라인: 자신과 자신주변의 텍스트와 같은 선상에 있는 태그
  • 블록 : 자신이 있는 선상의 화면 전체를 잡아먹는 태그이며, 다음 텍스트는 밑으로간다.
23.박스모델
  • 박스의 테두리는 기준점이 될 수 있으며, 안쪽여백(padding) 바깥쪽여백(margin)을 줄 수 있게된다.
24.box-sizing
  • box-sizing속성은 컨텐츠 박스가 기본값이지만 보더박스로 설정시 보더의 두께가 상관없이 보더 끝점이 같아지게 된다.
25.마진겹침 현상-1
  • 위아래있는 마진값중에 좀더 큰 마진값이 두개의 간격값이 된다.
마진겹침 현상-2
  • 부모와 자식 엘리먼트 모두 마진값이 있을때의 경우 -부모가 시각적인 효과가 없는 경우 부모 자식 엘리먼트의 마진값중 큰 값이 자식엘리먼트의 마진값 즉 위치로 사용되게 된다. 이것이 부모 태그와 자식태그의 마진은 겹침이다.
마진겹침 현상-3
  • 위아래 마진값을 주었는 데도 오버랩 되는 경우
26.포지션
  • 어디에 위치할지를 결정 해주며, 각각의 엘리먼트는 기본값(static)이 있기때문에 상대적으로 움직이게 하려면 position을 relative를 주고 움직여야 하는것이다.
27.flex -intro
  • 주로 레이아웃을 잡을 때 쓰는 기능이며, 각각에 부여되야 하는 속성이 다르다.
  • container: display, flex-direction, flex-wrap, align-content등 item: order, flex-grow, flex-shrink, flex-basis 등
flex-2
  • div나 class의 중요성이아닌 부모와자식의 유무가 중요하다.
  • 부모에게 flex를 주고 flex-direction을이용하여 자식태그의 정렬을 바꿀 수 있다.
  • 기본값은 row 이기때문에 가로로 된다.
flex-3
  • flex중 item에 주어지는 속성 알아보기
  • nth-child : 자식들 중 몇번째를 지정
  • flex-basis : flex의 지정되있는 방향에 해당되는 엘리먼트의 크기를 지정해준다.
  • flex-grow : 기본값은 0으로 지정되있지만, 값을 주는 경우 공평하게 자식 엘리먼트들에게 들어간다.
  • 특정부분에 더큰값을 주는 경우 캐스케이딩의 뜻대로 그 큰값을 가진 엘리먼트를 우선순위인채로 나머지가 나뉘어진다.
  • flex-shrink: 크기가 있는 엘리먼트를 고통분담시키느냐안시키냐 혹은 얼마나 시키냐를 결정한다.
flex-4
  • flex이용하여 홀리그레일레이아웃 만들어보기
flex-5
  • 정렬의 다양한 속성 배우기 jusify-conent : 컨테이너가 화면어디에 위치할지 정한다.
  • align-item : 아이템 전체의 정렬 align-content : 같은 행에있는 그룹과 그룹사이의 정렬을 정한다.
28.multi column
  • 컬럼을 나눠서 조각조각내어 좀더 읽기 편하게 만드느 기능을 뜻 한다.
  • 중간에 h1태그와 같은 블럭요소가 들어가면 컬럼을 무시한채 제목이 들어가게된다.
  • cloumn-count : 컬럼의 갯수를 정한다, 이 갯수는 화면에 크기에 상관없이 유지된다.
  • cloumn-width : 컬럼의 가로값을 정하며, 카운트와 독립적으로 쓸 수 있다.
  • text-align의 값을 justify으로 주면 컬럼을 가지런히 만든다.
  • cloumn-rule-style : 컬럼사이의 선에대한 스타일
29.media query-기본
  • 미디어의 상태를 미디어에게 되묻고 상태에따른 디자인을 할 수 있게 되는것을 뜻한다. (예를 들어 500px 이하의 화면에서의 디자인을 따로 정하고자 할때)
media query-응용
  • 미디어쿼리를 이용하면 화면의 크기에 따라 컬럼의 정렬을 바꿀 수 있다.
30.float-1
  • float 이용하여 이미지를 텍스트와 조화롭게 삽입하기
float-2
  • float 이용하여 화면크기에 상관없이 고정되어있는 홀리그레일 레이아웃 만들기
31. 배경 (background)
  • 뒷배경을 뜻하며 다양한 속성을 넣을 수 있다.
32. 필터 (filter)
  • 최신기능으로써 포토샵기능을 코드화 했다고 볼 수 있으며, 컬러이미지를 흑백처리 한다던가 블러처리를 할 수 있다.
  • 원본이미지를 손상시키지 않으며 텍스트나 영상에도 동적인 기능을 가질 수 있게 되는것이다.
33.혼합 (blend)-background-blend
    background-blend-mode를 주게면 백그라운드 컬러와 백그라운드 이미지가 섞이게 된다.
  • 이때 백그라운드 컬러에 rgb 컬러나 rgba 투명도를 활용할 수 있다.
34.혼합 (blend)-mix-blend
  • 마우스 오버할때 블랜드 효과가 들어가도록 하기
35.변형 (transform)-1
  • 엘리먼트의 회전이나 변형과 같은 효과를 주는 속성이다.
변형 (transform)-2
  • tranform속성을 사용 할 때의 단위를 알아 두어야 하며, 변형의 기준점이나 변형의 정도는 설정 할 수 있다.
  • tranform 속성은 인라인 엘리먼트에서는 동작하지 않는다.
36. 전환 (transition)-1
  • 장면 전환을 누구에게 줄지를 정하는 transition-property 변화의 속도를 정하는 transition-duration
전환 (transition)-2
  • 장면전환의 효과를 줄때 시간차를 줄 수 있는 transition-delay
  • 속도를 균일하게가 아닌 불균형하게 커스터마이징 transition-timing-function
link & import
  • link, import : 중복의 제거를 위해 css파일을 외부로 빼는 기능
  • 중복이 일어나면 : 유지보수가 어렵고 / 코드이해도가 낮아지고 / 사용자와 개발자의 비용이 증가하는등의문제
  • 방법 : <style> 태그 혹은 <style> 태그 안에 @import로 css파일 삽입
코드 경량화(minify)
  • minify : 웹사이트의 규모가 커졌을 때 코드를 경량화하기 위한 기술
  • cleancss같은 사이트 이용
  • 보통 경량화한 파일에는 ~~~.min.확장자 같이 .min이 들어감
CSS 뛰어넘기, preprocesser 1 - 소개
  • 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고 이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구들을 개발했는데 이런 도구를 preprocessor이라고 한다.
CSS 뛰어넘기, preprocesser 2 - 에디터의확장기능
  • preprocesser : 표준화된 css문법은 아니지만 더 편리하게 개인이 커스터마이징한 기능들을 쓸 수 있고 그것을 css표준문법으로 변환해주는 기술
CSS 뛰어넘기, preprocesser 3 : 명령어로컴파일하기
  • http://lesscss.org/ (온라인 변환기)
  • http://sass-lang.com/
  • http://stylus-lang.com/ (온라인 변환기)
Fontello 1 : 소개
  • 딩벳폰트는 폰트 대신 어떤 문자에 해당하는 이미지로 이루어진 폰트를 의미한다.
Fontello 2 : 사용법
  • fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스이다.
Fontello 3 : 원리
  • fontello : 아이콘을 폰트의 형태로 바꿔서 사용할 수 있게 하는 기술
  • 사용법 : <i class="해당 폰트 이름"></i>
Fontello 4 : 폰트만들기
  • 특정한 단어의 프리픽스를 사용하는 아이콘이미지를 다운받을 수 있다.(하이닉스 페이지에서 사용했던 이미지아이콘 참고)

JavaScript 수업

1.웹브라우저와 JavaScript
  • html : 정보를 표현하는 언어
  • css : 정보를 디자인하는 역할
  • java script : 만들어진 페이지를 동적으로 변화시키고 제어하는 역할을 한다.
  • ex) 버튼을 클릭했을때만 클래스가 지정되도록 제어해주어서 클래스에 적용된 디자인이 클릭시에만 나타나도록 구현하고자할때
2.실습방법
  • 크롬개발자도구를 이용하면 자바스크립트 명령을 실시간으로 미리보기가 가능하다. 서브라임 설명
3.HTML에서 JavaScript 로드하기 (inline)
  • html에 java script 로드하는 방법 inline : onclick등의 속성을 이용하여 코드만을 변경시켜 적용가능하다. 단, html과 java문법이 섞여있어서 유지보수가 힘들다.
4.HTML에서 JavaScript 로드하기 (script 태그이용)
  • script : script 태그안에 자바스크립트 코드를 넣는다 .구분이 쉽다.
5.HTML에서 JavaScript 로드하기 (외부 파일로 분리)
  • 외부파일분리 : script 에 src속성을 통해 자바스크립트를 외부파일로 분리를 시킨다. html과 완전히 분리가 가능하므로 유지보수가 편리하다. html 파일의 용량을 경량화 시켜준다.
6.HTML에서 JavaScript 로드하기 (onload)
  • sript파일의 위치 : 헤드태그에 위치할경우 모든 웹페이지를 해석후에 들어갈 위험성이 있고 렌더링이 지연되기때문에 온로드 속성을 넣어줘야하고 위험성이 크지만 바디 끝쪽에 위치시에 input 해석 후에 들어가기때문에 편리하고 빠르다.
7.Object Model (1)
  • 브라우저가 여러구성요소로 객체화 되있어야 자바스크립트가 제어할 수 있게 된다. 자바스크립트를 이용하여 객체를 지정할 수 있고, 메소드를 호출하는 등으로 제어를 하게 된다.
8.Object Model (2)
  • dom=도큐먼트 오브젝트를 뜻하며 웹페이지에있는 문서. body,img 태그등을 담당한다. bom=브라우저 오브젝트를 뜻하며 그럼에도 dom은 따로 두고 있다.
9.BOM
  • browser object model 자바스크립트를 통하여 현재의 버전명 url 혹은 페이지를 열게하는등을 해주게 하는 모델이다.
10.전역객체 Window
  • 변수가 함수에 속하지 않으면 전역변수 이며 전역함수,전역변수를 만드는 것은 window의 프로퍼티를 만드는 것이다.
11.사용자와 커뮤니케이션 하기(alert)
  • alert : 확인전에는 다음 스크립트가 실행되지않는 특성이있다.
12.사용자와 커뮤니케이션 하기(confirm)
  • confirm : 확인을 눌렀느냐 혹은 취소를 눌렀느냐에 따라 true ,false로 리턴해주고 그에맞는 내용을 뜨게해주는 기능이다.
13.사용자와 커뮤니케이션 하기(prompt)
  • onclick="func prompt"로 실행시킨후 prompt : 사용자가 입력한 값을 얻어서 자바스크립트가 다음 실행시킬 값을 정할 수 있게 되는 간단한 로그인 시스템이라고 볼 수 있다.
14.Location 객체 (1)
  • console.log에선 콤마를 이용하면 여러개의 인자를 얻을 수 있으며, 객체에대한 내용을 출력해주게된다. location.href를 이용하면 현재 url을 알 수 있다. http//-protoal / 절대주소-host / 상대주소-pattname / 전달한값-search / 위치를나타내는 값-hash/
15.Location 객체 (2)
  • 사용자를 다른 url로 이동시켜야 하는 경우에 로케이션 href 프로퍼티를 자바스크립트로 변경시켜주면 된다. 현재 웹페이지내용을 리로드 하고 싶다면 href에 현재 페이지를 현재페이지로 변경시킨다고 해주면 리로드가 되어 갱신된다. 혹은 location.reload 이용
16.Navigator 객체 (1)
  • 네비게이터 객체란 자바스크립트를 이용하여 지금 사용하고있는 브라우저의 버전을 알수있는 기능이다. 그것을 이용하여 브라우저에 맞는 코딩을 할 수 있게 된다.
17.Navigator 객체 (2)
  • 필요한 프로퍼티를 열람하고 정보를 얻으면되는데 appname부분이 브라우저의 결과를 나타낸다. 하지만 파이어폭스나 크롬도 같은 네임으로 나오는 등 변별력이 없으므로 , appversion 부분을 보면된다.
18.Navigator 객체 (3)
  • 기능테스트와 네비게이터객체를 잘 이용해야 크로스브라우징에서 자유롭다. 기능테스트는 어떠한 기능을 작동하는지 아닌지를 알수 있으며, keys 라는 메소드는 object의 값을 배열로 리턴해준다. (true, false)를 구별하여 리스트로 볼 수 있는 것이다.
19.창 제어
  • 새창을 주거나, 창의 이름을 주거나, 스크립트를 실행할 창을 정하는 등. 특성에 맞는메소드를 호출하여 창을 제어할수 있다.
20.DOM-제어 대상을 찾기
  • get elements by tagname : 여러개의 엘리먼트를 태그이름을 통해 가져오다 )라는 메소드를 이용하여 호출을 하면 그 태그를 담은 객체를 유사배열하여 리턴해주게 된다.