공부하자

유효성 검사를 할때는 함수를 하나 만들고 그 안에 다 때려 박아서 함.

여태껏 많은 블로그들을 돌아보았고, 너무 오래된 것들이라 정보 찾기가 힘들었는데, 많은 분들의 도움을 받아 해냈다.

우선 여타 블로그들의 경우 사용한 방식은

button의 type을 submit에서 button으로 바꾼 이후 script 에서 onclick을 이용해 작동 시키는 방식을 많이 사용했는데,

이는 input에 값을 입력하고 엔터를 치면 서브밋이 되어버리는 문제가 생겼다. 

오로지 회원가입 버튼으로만 한다면 모를까, 엔터를 쳐버리면 action이 동작해버리니 큰 문제였다.

해당 문제를 해결하기 위해 엔터기능을 막는 방안을 이용했어야 했는데, 해당 기능을 구현하지 못하였고, 구현과정에서 계속 오류가 나서 만들기를 실패했다. 

그런데 form에 onsubmit = "return joinform_check()"를 줘서 submit을 작동 시키는 방식이 있었고, 이 방법이 훨씬 편했다.

onsubmit은 사용자가 input 에 값을 입력하고, form을 통해 값을 보내 action의 경로로 진입하기 직전! 바로 그 타이밍에 동작하는 이벤트핸들러이다.

onsubmit = return false 를 하게되면 false 라는 거짓값이 return(돌아오다)하게 되는데, 그러면 action이 작동하지 못하고 현재페이지에 머물게 된다. 이를 이용하여, onsubmit = "return joinform_check()"를 동작시키고 유효성 검사 함수인  joinform_check()의 결과값이 true 이면 정상적으로 action이 작동하게 만들고, false 이면  action이 작동하지 못하게 하여 현재페이지에 머물게 할 수 있다.

ex) 유효성 테스트를 위한 함수. 이름만 입력받는다는 가정을 했을때.

function joinform_check() {

참고 : Character classes - JavaScript | MDN (mozilla.org)

정규식은 항상 //를 작성하고 시작.

ex)우편번호 5자리를 받고싶음

const reg_post = /^\d{5}$/;

^ : 꺽새표시가 붙으면 무조건 바로 뒤에오는 패턴만으로 값이 시작되어야 한다는 뜻. ex)^\d 는 오로지 숫자로만.

\d :  숫자라는 뜻.

{x} :  x자리만큼

$ :  끝내겠다. 라는 소리. 예시에선 5자리가 나오면 끝내버린다 라는 뜻.

ex) 전화번호

const reg_tel = /^(02|064)-(\d{3}|\d{4})-\d{4})$/;

(02|064) :  처음은 무조건 02 아니면 064이다. | 를 이용해 값을 늘릴 수 있음.

' - ' :   ' - '는 하이픈으로 값을 입력할 때 꼭 같이 입력을 해야한다.

const reg_mobile = /^(010)-\d{4}-\d{4}$/;

const reg_email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

\w :  a-z , A-Z, 0-9, _ 까지 이용가능하다. 

+ : 무조건 하나 이상의 앞의 패턴이 들어가야한다.

\. :  ' . ' 은 정규 표현식에 들어 있는 패턴이므로, 문자로서의 ' . '을 이용하기 위해선 앞에 ' \ ' 를 붙여줘야한다. 

[x]? : x라는 값이 있을 수도있고, 없을 수도 있다. 이어서 계속 작성하면 다 조건에 포함 가능

         -  ex)[xyz]? : x와 y와 z가 있을 수도 있고, 없을 수도 있다.

* : 곱하기는 여러개 있을 수 있다는 뜻으로,

      - ex) ([\.-]?\w+)* 에서는( .이나-가 있을 수도 있고, 문자는 무조건 하나 이상이다)가 여러개 있을 수 있다. 라는 

@ : 무조건 @가 들어가야한다.

\w{2,3} : 적어도 \w 패턴이 2개에서 3개 이상은 있어야 한다.

(?= .* )은 보통 비밀번호 유효성 검사할 때 필수로 하나씩은 들어가야할 때 사용하는데, 작성한 모든 문자를 체크한다 라는 의미로 파악하면 된다.

.이 모든 단일문자를 뜻하고, * 이 여러개를 뜻하니 합치면 여러개의 단일 문자 이기때문에 작성한 모든 문자를 체크한다라는 의미로 이용하면 될듯.

정규식 테스트 방법

console.log(reg_post.test('파라미터 or  값 직접입력');

true 가 나오면 정규식 통과

false가 나오면 정규식 통과 실패

innerHTML - 요소안에 있는 HTML 자체를 문자열로 리턴

*태그와 태그 사이의 들여쓰기나 줄바꿈도 모두 포함.

요소안의 HTML을 확인하는 것 보다는 요소안의 HTML을 수정할 때 자주 사용.

출력시 first <li>~ last </li> 까지 출력됨.

ex) 기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

이 상황에 JS로

<script>

const myTag = document.querySelector('#list-1');

myTag.innerHTML = '<li>789</li>';

</script>

를 사용한다면 

변경된 HTML

<ul id = "list-1">

  <li>789</li>

</ul>

처럼 바뀌어 출력된다.

출력 :   <li>789</li>

만약 

script에서 

myTag.innerHTML += '<li>789</li>'; 

처럼 += 을 사용한다면 해당 리스트의 마지막 부분에 추가된다.

그러면

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

  <li>789</li>

</ul>

로 바뀌어 출력 된다.

출력 :

  <li>123</li>

  <li>456</li>

  <li>789</li>

outerHTML - 해당 요소를 포함한 전체의 HTML 코드를 문자열로 리턴해준다.

innerHTML과 같이 들여쓰기와 줄바꿈이 다 있다.

모든 요소를 포함하고 있다보니, 값의 수정이 아닌, 값이 아예 다른 값이 되버린다.

기존의 출력에도 <ul>~</ul>까지 다 출력됨.

ex)

기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

다음과 같은 코드가 있을 때.

myTag.outerHTML = '<ul id = "new-list"><li>789</li></ul>';

이를 적용하면

변경된 HTML

<ul id = "new-list">

  <li>789</li>

</ul>

이 처럼 id명도 바뀌어 출력된다.

textContent

- innerHTML과 비슷한데, 요소 안의 내용을 가져오는 것은 동일. 하지만 태그를 제외한 값만 가져옴.

- 역시나 innerHTML 처럼 값을 수정할 수도 있음.

기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

일때 

myTag.textHTML = 'new text';

를 사용하면

 'new text';

만 출력됨.

근데, 얘는 특수문자도 텍스트로 출력함.

ex)

myTag.textHTML = '<li>new text</li>';

를 하면

 '<li>new text</li>';

가 출력됨.

*이는 실제 HTML 값이 변하는게 아니라, JS를 출력한 이후 콘솔의 값이 변하는 것이라는 점을 주의해야함.

createElement - 원하는 태그 이름을 요소 노드로 만들 수 있음.

ex)

1. 변수 생성(기존에 ul id = one, two 존재)

const first = document.createElement('li');  // li태그 생성

2. 변수 안에 문자 넣기

first.textContent = '처음';  // 생성한 li 태그에 문자 '처음'을 넣음

3. 값이 있는 first를 prepend를 이용하여 호출한 노드에 첫번째 노드로 값 추

two.prepend(first); // prepend(변수) 

-> 메소드를 호출한 노드의 제일 첫번째 자식 노드로  파라미터로 전달한 값을 추가할 수 있음

two.append(last); // append(변수) 

-> 메소드를 호출한 노드의 제일 마지막 자식 노드로 파라미터로 전달한 값을 추가할 수 있음

two.before(prev); // before(변수) 

-> 메소드를 호출한 노드의 앞쪽에 파라미터로 전달한 값을 형제노드로 추가할 수 있음

two.after(next); // after(변수) 

-> 메소드를 호출한 노드의 뒤쪽에 파라미터로 전달한 값을 형제노드로 추가할 수 있음

빨간색으로 적은 파라미터(first,last,prev,next)자리에 파라미터가 아닌 문자열을 넣으면

문자열이 출력되고, 문자열을 적고, 파라미터를 적는 등 여러가지를 적으면 순차적으로 값이 

나열된다.

*prepend 나 before의 경우에는 요소를 앞으로 추가하기 때문에 여러개의 값을 전달하게 되면 

역순으로 추가될 거라고 오해할 수 있는데 적은 그대로 한꺼번에 출력된다.

노드를 삭제하거나 이동

삭제

two.remove(); 원하는 노드를 선택하여 호출한 뒤 remove 를 사용하면 자식노드가 모두 삭제됨.

- 자식 요소를 선택하여 삭제하는법

one.children[2].remove();

이동

(prepend,append,before,after 이용)

one.append(two.children[1]); -> one 노드의 마지막 노드로 two노드의 2번째 자식노드가 이동한다.

two.children[1].after(one.children[1]); -> two 노드의 2번째 자식노드 다음으로 one 노드의 2번째 자식 노드가 이동한다.

Script는 body태그의 최 하단에 위치하거나,

최하단에 script src = "index.js" 와 같이 JS파일에 연결해주며 시작.

document.getElementById('id');

document - 문서

getElementById('id'); - id라는 이름의 아이디를 가져온다.

document.getElementsByClassName('class');

getElementsByClassName('.class'); - class 라는 이름의 클래스를 가져온다. 깊이와는 상관없이 위에서부터 출력.

존재하지 않는 id 값을 사용하면 null 값이 나타남. 

document.getElementsByTagName('태그이름')

document.getElementsByTagName('태그이름'); - 태그이름으로 태그를 선택하여 해당되 모든 태그를 다 가져옴.

document.querySelector('css');

document.querySelector('css'); - css 선택자로 태그 선택하기.

-1. document.querySelector('#ID'); - id를 통해 불러옴. document.getElementById('id');과 같은 효과

-2. document.qurerySelector('.class'); - class명을 통해 불러옴. document.getElementsByClassName('class');와 유사하지만 쿼리셀렉터 이용시 해당 클래스가 들어가있는 요소중 가장 먼저 나온 요소만 나옴.

  - 그렇다면, 쿼리셀렉터로 document.getElementsByClassName('class');와 같은 효과를 내려면 어찌하나

 = document.querySelectorAll('.class'); 를 사용하면 됨.

Event와 버튼클릭

ex) const btn = document.querySelector('#myBtn');

btn.onclick = function() {                                  // onclick 이라는 프로퍼티에 함수를 할당. 이벤트 핸들러

  console.log('hello world!');                      // 클릭을 할때마다 특별한 동작 수행.

}                   

이벤트가 발생했을때 특별한 동작을 하도록 이벤트를 다루는 것 - 이벤트 핸들링

구체적인 동작 - 이벤트 핸들러

alert('message');

- alert 함수를 사용하면 브라우저에 경고창을 띄울 수 있다.

window 객체 - 전역객체.(Global Object)

console.log 또한 window객체로, 앞에 window를 붙여 window.console.log를 해야하지만, 전역객체기 때문에 앞의 window를 빼도 됨.

console.log(window);  하면 다양한 프로퍼티를 보거나 제어할 수 있음.

ex)console.log(window.innerWidht); - 창의 너비

     console.log(window.innerHeight); - 창의 높이

     console에서 window.open/close 로 창을 켜고 끌 수도 있음.

Window - Web API | MDN (mozilla.org)

DOM(Document Object Model) - 문서 객체 모델

웹 페이지에 나타나는 html 문서 전체를 객체로 

document 객체가 웹 문서의 최상단 객체로, 진입점의 역할.

console.log(document); 를 하면 html 문서가 출력됨.

태그가아니라 객체로 보고싶다면

console.dir(document); 를 해야함.

console.dir 은 문자열 표시 형식

dir은 여러개의 값을 출력할 수 없다.

노드(node)

부모노드 - console.log(myTag.parentElement);

형제노드 - console.log(myTag.previousElementSibling); //왼쪽노드, 우선순위의 노드

                 console.log(myTag.nextElementSibling);// 오른쪽 노드, 후순위 노드

자식노드 - console.log(myTag.children[x])

                console.log(myTag.firstElementChild); // 첫번째 자식 노드

                console.log(myTag.lastElementChild); // 마지막 자식노드.

위의 것들은 이어서 사용 가능. ex) console.log(myTag.parentElement.previousElementSibling);

function event1{

  console.log('hello');

}

addEventListener('행동(click,submit ....)',event1);  생성

removeEventListener('행동(click,submit ....)',event1);  지우기.

@media(min-width: 00px){

값.

}

@media(조건){

조건이 맞을때 값이 변경된다.

}

position 

sticky :

- 기존의 자리를 유지하다가, 스크롤을 하여 웹 브라우저의 상단에 닿으면 fixed 처럼 움직임.

- 다시 제자리로 돌아가면 고정.

- 기본적으로 static처럼 작동.

- top : 0;  ->>  브라우저 기준 맨 위에 닿았을 때 작동한다.

backdrop-filter : 배경필터. 배경을 흐리게 또는 색상이동과 같은 그래픽 효과를 줌

flex :

- 기본 축(Main Axis) - 왼쪽에서 오른쪽으로 가는 수평 축.

- 교차 축(Cross Axis) - 위쪽에서 아래쪽으로 가는 수직 축. 

* 그러나 direction에 따라 기본축과 교차축의 내용이 서로 바뀐다.

*-reverse를 하면 방향도 바뀐다.

* 기본적으로 요소들은 기본 축 방향으로 진행하며, 교차축은 꽉 채운다.

- flex-direction : 배치할 방향

  - 기본적으로 가로 방향.(row행)

  - 세로방향(column열)

  - 왼쪽에서 오른쪽으로, 위에서 아래로 가는데, -reverse를 하면 반대로 동작.

- justify-content, align-items : 정렬

  - justify-content :

    - 기본축 방향 정렬

    - center : 중앙정렬

    - flex-end : 기본축의 맨 끝을 기준으로 정렬

    - flex-start : 기본축에서 맨 앞(기본)

    - space-around : 기본축에서 띄엄띄엄 배치. 서로 양 옆에 같은 공간을 가짐. : 

    - space-between : 기본축에서 양 끝에 배치.

    - space-evenly : 기본축에서 띄엄띄엄 배치. 서로 양 옆의 총 공간이 같음. 

  - align-items :

    - 교차축 방향 정렬

    - center : 중앙정렬

    - flex-end : 교차축의 맨 끝을 기준으로 정렬

    - flex-start : 교차축에서 맨 앞

    - stretch : 교차축에서 늘려서 배치(기본)

- flex-wrap : 요소가 넘칠 때

  -wrap : 넘치는건 줄바꿈됨.

- gap :  요소 간격

  - gap : 세로px 가로px 근데 마진처럼 전방향으 동작하는게 아니라, 요소가 있다면, 요소간의 간격에만 적용된다.

- flex-grow, flex-shrink,flex-basis : 크기 늘이거나 줄이기. 유연한 배치

  - flex-grow : 상대적인 값(기본값 0, 숫자에 비례하여 크기가 늘어남.)

  - flex-shirink : 공간이 넘칠때  width를 강제로 줄이는 정도(기본값 1, 0일때는 크기를 줄이지 않음. 숫자가 클 수록 많이 줄임.)

  - flex-basis : 요소의 시작 크기.(기본값 auto) 

  - flex-grow, flex-shrink, flex-basis를 동시에 사용 가능 : flex : 1 0 100px

Grid

- 가로 세로 두 방향(2차원) 으로 배치할 수 있는 것.

- 왼쪽에서 오른쪽으로(column),위에서 아래(row)

- 각 칸을 나누는 줄 : grid line

- 각 칸 : grid cell

- grid-template-rows 

- grid-template-columns : 격자 나누기 = 한 줄을 입력한 값으로 나눈다.

ex) grid-template-rows : 10px 10px 10px; -> 10px 세칸

grid-template : 10px 10px 10px / 20px 20px 20px

-> 가로(columns) / 세로(rows)

Q.크기를 유동적으로는 불가능한가

A. 가능.

gird-template : 1fr 1fr 1fr ; - 1 : 1: 1의 비율. 상대적인  수치를 넣으면 됨.

*유동 크기를 정해줄 수도 있음.

grid-template : minmax(200px,300px) - minmax에도 fr 단위를 쓸 수 있는데, MAX값에만 사용 가능.

*반복적인 처리

repeat(횟수, 사이즈)

- gap : 간격

flex 와 사용법이 완전히 같음.

- grid-auto-rows

- grid-auto-columns: 크기 미리 정하기

따로 rows/columns의 값을 정하지 않았을때 사용.

우선 grid-template-rows/columns 로 값 선언 후 

grid-auto-rows/columns : 값.

ex) gid-auto-rows : 200px; -> 모든 로우값이 200px 

 grid-auto-rows : 100px 200px 300px; -> 100,200,300px 이 번갈아가면서 나옴.

- grid-row/column, span : 원하는 위치에, 여러 칸에 걸쳐서 배치

grid는 왼쪽 위 모서리가 (1.1)이다. 그래서 1씩 증가하며 칸을 찾을 수도 있고,

           우측 아래 모서리는 (-1,-1)로 -1씩 감소하며 칸을 찾을 수도 있다.

ex) 5X5 cell의 grid는 (3,3)과 (-3,-3)이 같다.

사용법

- div를 (3,3)의 자리로 옮기고 싶을때

<div>

  <style>

    grid-row : 3;

    grid-column : 3;

  </style>

</div>

*주의할점. grid 모서리 격자의 번호지 셀의 번호가 아님. 4x5의 칸을 가지고 있는 그리드의 경우

(1,1)~(5,6) 까지의 모서리 격자 번호가 존재. 

예를 들어 ex)

(2,3)cell ~ (4,5)cell 의 자리까지 같은 색으로 채우고 싶을때

<div>

  <style>

    grid-row : 2 / 5;  /* row 2번줄 ~ 5번줄까지 */

    grid-column : 3 / 5;  /* column 3번줄 ~ 6번줄까지 */ 

또는

    grid-row : 2 / span 3; /* row 2번줄부터 아래로 3칸 */

    grid-column : 3 / span 3; /* column 3번줄부터 오른쪽으로 3칸 */

  </style>

</div>

- grid-area, grid-template-areas : 이름으로 배치

  grid-area : 이름;   - 이름 선정.

  grid-template-areas : "이름, 이름" "이름,이름"; - "앞은 row,뒤는 column값"

ex)

<div class = "a">

  <div class = "b">

  </div>

  <div class = "c">

  </div>

</div>

css

.a{

  display : grid;

  grid-template:

    repeat(2, 1fr) / repeat(2, 1fr)

    grid-template-areas : "r g" "r g";

}

.b{

gird-area : r;

}

.c{

grid-area : g;

}

normal flow = 웹 사이트의 기본 틀.

position :

- 기본 틀을 부숨.

- static :

     - position의 기본값

     - 원래 있어야 할 위치에 배치

     - 일반적인 글의 흐름을 따름

     - 위치의 기준. 

     - top bottom right left를 이용함.

     - 모든 요소는 기본적으로 static임.

- relative : 

      - 상대적임. 

      - 원래 있어야할 위치를 기준.

      - 원래 있던 공간은 그대로 비워둠.

- absolute :

     - 가장 가까운 조상요소를 기준으로.

     - relative 가 있는 곳을 기준삼음.

     - 기존의 배치를 벗어남. = 이후에 나오는 div가 자리를 차지함.

     - top,bottm,right,left를 전부 0px로 설정하거나,

        inset 0px;을 하면 조상요소를 덮어버림.

- fixed :

     - 기준이 브라우저 화면임.

     - 고정됐다 라는 뜻으로, 화면을 이동해도 고정됨.

     - 원래 있던 자리는 다음 div가 차지.

     - 스크롤을 계속 해도 제자리에 있음.

     - 네비게이션이랑 내용이 겹쳐서 안보일 수 있음

-> margin을 이용해서 네비게이션 바의 높이만큼 너비를 지정해줘서 네비게이션이 따라오게 만들 수 있다.

index.html 파일은 루트폴더에 접속했을 때 제일 먼저 보여주는 페이지의 명이다.

href = "주소"를 작성할 때 맨 앞에

/ 를 붙이면 최상위 폴더로 이동.

./ 를 붙이면 현재 폴더 - 현재폴더의 경우 아무것도 안붙여도 됨.

../ 를 붙이면 상위 폴더로 이동한다.

또한 최상위 폴더의 index.html로 이동하려면 / 하나면 경로에 넣으면 이동한다.

글을 인용할 때는 <blockquote>,<q> 이 둘을 사용한다. 차이는

<blockquote>는 전문을, <q>는 말하던 도중 짧은 인용을 위해 사용한다.

순서가 있는 리스트 <ol></ol> order list

순서가 없는 리스트 <ul></ul>unorder list

video 속성.

동영상을 재생. <video src = "비디오명.확장자"></video>

태그 : 

autoplay - 자동재생. 사파리에서만 작동 

muted - 주로 autoplay와 함께 사용되며 자동재생 후 뮤트시켜줌. 해당 태그를 추가로 달아줘야 크롬에서도 돌아감.

controls - 동영상 조절이가능. 음량 및 시간 

audio 속성

오디오를 재생. <audio src = "오디오명.확장자"></audio>

태그 : 

controls - 안쓰면 화면에 안나옴. 작성 해야 나온다.

autoplay - 자동재생. 사파리에서만 작동 

muted - 주로 autoplay와 함께 사용되며 자동재생 후 뮤트시켜줌. 해당 태그를 추가로 달아줘야 크롬에서도 돌아감.

iframe

html 안에서 html파일을 불러올 수 있다.

iframe src = "주소"

form post get 확인하기 좋은 사이트 : requestBin