answer-code/html,css,js 회원가입 설명.txt at main · Code-with/answer-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
**HTML 3. 회원가입 창 설명

회원가입 창을 만들기 위한 여러가지 HTML 태그를 학습해봅시다!

<form>태그는 웹 서버에 정보를 제출하기 위한 양식 범위를 정의합니다.
<input>태그는 사용자에게 입력 받을 데이터 양식입니다.
<textarea>태그는 여러 줄의 일반 텍스트 양식입니다.
<select>태그는 옵션을 선택하는 메뉴입니다.
<option>태그는 선택 메뉴(<select>)에서 사용될 옵션입니다.

학습한 내용을 토대로 직접 코드를 작성해 보며 회원가입 창 HTML 뼈대를 세워봅시다!


**CSS 3. 회원가입 창 설명

HTML로 작성한 회원가입창을 꾸며보기 위한 여러가지 CSS 속성을 학습해봅시다!

display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나입니다.
이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.

div { display: block;}
display 속성값이 block인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지합니다.

div { display: inline;}
display 속성값이 inline인 요소는 새로운 라인(line)에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.

div { display: inline-block;}
display 속성값이 inline-block으로 설정된 요소는 해당 요소 자체는 inline 요소처럼 동작하지만 해당 요소 내부에서는 block 요소처럼 동작합니다.

다음으로 position 속성을 학습해보겠습니다!
position 속성은 HTML 요소가 위치를 결정하는 방식을 설정합니다.

div { position: static; }
position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다. 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다.

div { position: relative; }
position 속성값이 relative로 설정된 요소는 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정합니다.

div { position: fixed; }
position 속성값이 fixed로 설정된 요소는 뷰포트(viewport)를 기준으로 위치를 설정합니다. 즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.

div { position: absolute; }
position 속성값이 absolute로 설정된 요소는 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작합니다. 단지 뷰포트를 기준으로 하는 것이 아닌 위치가 설정된 조상 요소를 기준으로 위치를 설정하게 됩니다.

마지막으로 플렉서블 박스(flexible box) 레이아웃을 학습해봅시다!
플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.

이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다. 또한 수평 레이아웃을 쉽게 구성할 수 있도록 합니다. 다음의 예제를 살펴봅시다.

div {
     display: flex;
     flex-direction: row-reverse;
     justify-content: flex-end;
     align-items: flex-end;
     flex-wrap: wrap;
     align-content: space-between;
}

flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정합니다.
justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.
align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정합니다. 이 속성은 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있습니다.
flex-wrap 속성은 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정합니다.
align-content 속성은 flex-wrap 속성의 동작을 변경할 수 있습니다. 이 속성은 align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬합니다.

학습한 내용을 토대로 HTML로 작성한 달력을 CSS로 꾸며봅시다!

**JS 3. 회원가입 창 설명

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 제이쿼리를 학습해봅시다!

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있고, 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
위의 코드를 <head>태그 내부에 작성하여 외부의 CDN 서버에서 jQuery 배포판을 불러와봅시다.
이제 제이쿼리 라이브러리를 사용할 수 있게 되었습니다.
다음으로 jquery 문법을 학습해봅시다!

$(선택자).동작함수();
달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다.
선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. 다음의 예제를 살펴봅시다.

$('.hello').css('color', 'red')

위 코드는 클래스명이 hello인 요소를 선택하여 css의 color 속성 값으로 red를 부여합니다.
이처럼 jQuery는 적은 양의 코드로 빠르고 쉬운 개발을 가능하게 합니다.

다음의 코드는 앞서 살펴봤던 예제를 자바스크립트 코드로 변경한 것입니다.

 var obj = document.querySelectorAll('.hello');
  obj.forEach(function(element){
    element.style.color='red';
  });

제이쿼리 코드에 비해 훨씬 복잡해졌다는 것을 알 수 있습니다.

그렇다면 제이쿼리가 자바스크립트에 비해 항상 우월하다고 말할 수 있을까요?
그렇지 않습니다!

jQuery는 어디까지나 자바스크립트를 이용해서 만든 것이기 때문에, 개발 속도가 아닌 처리 속도 부분에서는 성능이 매우 떨어집니다. 몇단계를 거쳐서 실행하기 때문입니다.

따라서 문서 구조가 복잡하고 길수록, 특히 여러항목의 값을 동시에 처리할수록 Javascript가 JQuery에 비해 훨씬 빠른 속도를 자랑합니다.

그렇기 때문에 상황에 맞춰 Javascript와 JQuery를 적절히 사용하는 것이 좋습니다.

이제 본격적으로 코드를 작성해보며 JQuery를 익혀봅시다!