html,css,js 회원가입 설명 v2.txt

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

회원가입 창을 만들기 위한 여러가지 HTML 태그를 학습해봅시다!<br><br> &lt;form&gt;태그는 웹 서버에 정보를 제출하기 위한 양식 범위를 정의합니다.<br> &lt;input&gt;태그는 사용자에게 입력 받을 데이터 양식입니다.<br> &lt;textarea&gt;태그는 여러 줄의 일반 텍스트 양식입니다.<br> &lt;select&gt;태그는 옵션을 선택하는 메뉴입니다.<br> &lt;option&gt;태그는 선택 메뉴(&lt;select&gt;)에서 사용될 옵션입니다.<br><br> 학습한 내용을 토대로 직접 코드를 작성해 보며 회원가입 창 HTML 뼈대를 세워봅시다!<br>


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

1)
HTML로 작성한 회원가입창을 꾸며보기 위한 여러가지 CSS 속성을 학습해봅시다!<br><br> display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나입니다.<br> 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.<br><br> div { display: block;}<br>display 속성값이 block인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지합니다.<br><br> div { display: inline;}<br>display 속성값이 inline인 요소는 새로운 라인(line)에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.<br><br> div { display: inline-block;}<br> display 속성값이 inline-block으로 설정된 요소는 해당 요소 자체는 inline 요소처럼 동작하지만 해당 요소 내부에서는 block 요소처럼 동작합니다.<br><br>

2)
다음으로 position 속성을 학습해보겠습니다!<br><br> position 속성은 HTML 요소가 위치를 결정하는 방식을 설정합니다.<br><br> div { position: static; }<br>position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다. 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다.<br><br> div { position: relative; }<br> position 속성값이 relative로 설정된 요소는 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정합니다.<br><br> div { position: fixed; }<br>position 속성값이 fixed로 설정된 요소는 뷰포트(viewport)를 기준으로 위치를 설정합니다. 즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.<br><br> div { position: absolute; }<br> position 속성값이 absolute로 설정된 요소는 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작합니다. 단지 뷰포트를 기준으로 하는 것이 아닌 위치가 설정된 조상 요소를 기준으로 위치를 설정하게 됩니다.<br><br>

3)
마지막으로 플렉서블 박스(flexible box) 레이아웃을 학습해봅시다!<br><br> 플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.<br><br> 이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다. 또한 수평 레이아웃을 쉽게 구성할 수 있도록 합니다. 다음의 예제를 살펴봅시다.<br><br> div {<br>&nbsp; display: flex;<br>&nbsp; flex-direction: row-reverse;<br> &nbsp; justify-content: flex-end;<br> &nbsp; align-items: flex-end;<br> &nbsp; flex-wrap: wrap;<br>&nbsp;  align-content: space-between;<br> }<br><br>flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정합니다.<br> justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.<br> align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정합니다. 이 속성은 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있습니다.<br> flex-wrap 속성은 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정합니다.<br> align-content 속성은 flex-wrap 속성의 동작을 변경할 수 있습니다. 이 속성은 align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬합니다.<br><br> 학습한 내용을 토대로 HTML로 작성한 달력을 CSS로 꾸며봅시다!<br>

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

1)
자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 제이쿼리를 학습해봅시다!<br><br> 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.<br> 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있고, 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.<br><br> &lt;script src="https://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;<br> 위의 코드를 &lt;head&gt;태그 내부에 작성하여 외부의 CDN 서버에서 jQuery 배포판을 불러와봅시다. <br><br> 이제 제이쿼리 라이브러리를 사용할 수 있게 되었습니다.<br> 다음으로 jquery 문법을 학습해봅시다!<br>

2)
$(선택자).동작함수();<br>달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다.<br> 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.<br>다음의 예제를 살펴봅시다.<br><br> $('.hello').css('color', 'red')<br><br> 위 코드는 클래스명이 hello인 요소를 선택하여 css의 color 속성 값으로 red를 부여합니다.<br> 이처럼 jQuery는 적은 양의 코드로 빠르고 쉬운 개발을 가능하게 합니다.<br><br> 다음의 코드는 앞서 살펴봤던 예제를 자바스크립트 코드로 변경한 것입니다.<br><br> var obj = document.querySelectorAll('.hello');<br> obj.forEach(function(element){<br> &nbsp; element.style.color='red';<br> });<br><br>제이쿼리 코드에 비해 훨씬 복잡해졌다는 것을 알 수 있습니다.<br><br>

3)
제이쿼리가 자바스크립트에 비해 항상 우월하다고 말할 수 있을까요?<br> 그렇지 않습니다!<br><br>jQuery는 어디까지나 자바스크립트를 이용해서 만든 것이기 때문에, 개발 속도가 아닌 처리 속도 부분에서는 성능이 매우 떨어집니다. 몇단계를 거쳐서 실행하기 때문입니다.<br><br> 따라서 문서 구조가 복잡하고 길수록, 특히 여러항목의 값을 동시에 처리할수록 Javascript가 JQuery에 비해 훨씬 빠른 속도를 자랑합니다.<br><br> 그렇기 때문에 상황에 맞춰 Javascript와 JQuery를 적절히 사용하는 것이 좋습니다.<br><br> 이제 본격적으로 코드를 작성해보며 JQuery를 익혀봅시다!<br><br>