yeosang0508 님의 블로그

한 페이지 않에서 여러가지 폼이 사용되는데 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 창 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)이라고 할 수 있다.

사용자가 아이디와 비밀번호를 정보를 입력 -> 로그인 버튼을 클릭 -> 내용이 웹 서버로 전달
서버는 자신이 가지고 있는 사용자 데이터베이스를 찾아내 사용자가 보내 온 아이디와 비밀번호가 서로 일치하는 정보인지 여부를 확인 후 결과를 브라우저에 보낸다.

form 태그

• form 태그는 몇 가지 속성을 통하여 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로그램을 이용하여 처리할 것인지 지정한다.
• form 태그와 /form 태그 사이에 여러 폼 테그들을 삽압하면서 원하는 폼 형태를 만들 수 있다.

<form [속성="속성 값"]> 여러 폼 요소 </form>

label 태그

• label 태그는 폼 요소에 레이블을 붙이기 위한 것
• label은 입력 창 옆 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트
• label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있다.

<label [속성="속성 값"] 레이블 <input...> </label>

<label for="id이름">
	<input id="id이름" [속성="속성 값"]>
</label>

fieldset, legend 태그

• 폼 요소 그룹으로 묶기

<fieldset [속성="속성 값"]> ... </fieldset>

input 태그

• 아이디나 검색어를 입력하는 텍스트 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그로 넣을 수 있는 항목은 아이디나 비밀번호를 비롯하여 이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양하다.

• 웹에서의 폼은 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다.

<input type="유형" [속성="속성 값"]>

type="hidden"

• hidden 필드는 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소이다. (사용자에게 보여 줄 필요가 없지만, 관리자가 알아야 할 때 사용)

<input type="hidden" name="이름" value="서버로 넘길 값">

type="text"

• 폼에서 가장 많이 사용하는 요소로 주로 아이디, 이름, 주소 등 텍스트 입력할 때 사용한다.

type="password"

• 패스워드 필드는 텍스트 필드와 거의 같지만 사용자가 입력하는 내용이 화면에 표시되지 않고 '*'와 같이 표시된다. 속성도 value 속성이 없다는 점만 제외하면 텍스트 필드와 같다.

imagesLoaded

imagesLoaded는 문서 안에 또는 특정 요소 안에 있는 이미지가 모두 로딩되었는지 감지하는 자바스크립트 라이브러리이다.

이미지가 로딩되기 전에, 로딩 중에 있을 때, 로딩된 후에 어떤 작업을 하고 싶을 때 유용하다.

cdnjs에서 imagesLoaded를 가져오고 jquery아래 masonry위에 두어야 정상작동된다.

$(".box-1").imagesLoaded(function(){
  let $grid = $(".box-1").masonry();
  
  $(".loading-box").addClass("hide");
});

-> .box-1의 후손까지 로딩되면 실행!
-> 장소에 따라 인터넷 걸리는 시간이 다르기에 진짜로 걸리는 시간만큼만 로딩창을 띄우기 위해 사용한다.

ScrollTrigger

• ScrollTrigger는 최소한의 코드로 스크롤 기반 애니메이션을 만든다.

gsap.to(대상, {
	scrollTrigger:{
    	trigger:대상,
        스크롤속성:값,
        스크롤속성:값
	}, 속성:값, duration:재생시간
})

nicescroll

css에서 overflow: auto를 사용하면, 크기를 벗언라 시 자동으로 스크롤 바가 생긴다. nicescroll적용함으로써 스크롤 바가 계속 남아있지않고, 아이폰 스크롤바처럼 사라지고, 공간도 차지하지 않는다.

$('body').niceScroll();

jquery 링크 다음 cdnjs에서 nicescroll 링크를 가져와 아래에 넣어주어야 정상작동된다.

Masonry

Masonry 레이아웃은 하나의 축이 일반적인 그리드 레이아웃을 사용하고 달느 한 축이 Masonry 레이아웃을 사용하는 레이아웃 방법이다. Masonry 레이아웃을 사용하는 축의 방향으로는 요소를 빈틈 없이 차곡차곡 쌓는 형태의 UI를 가리킨다.

• pinterest 와 같은 이미지 콘텐츠를 다루는 웹 페이지에서 Masonry 레이아웃이 구현된 페이지를 흔하게 볼 수 있다.
• 웹에서는 보통 스크롤 동작이 이루어지는 방향인 위에서부터 아래로 요소를 나열하는 것을 가리켜 Masonry 레이아웃이라고 한다.

cdnjs에서 masonry 링크를 가져온다.
masonry에서 events jquery

var $grid = $('.container').masonry();

setTimeout

일정 시간 뒤에 원하는 동작을 할 때 사용한다.

• setTimeout 함수는 일정시간이 지난 후 함수가 한번 실행되고, clearTimeout 함수는 setTimeout함수를 취소하는 역할을 한다.
• 주로 일정 시간 뒤 로그아웃 처리할 때, 몇초뒤에 이벤트 팝업을 띄울 경우 사용한다.
•  

setTimeout([함수 또는 문자열], [지연될 시간(단위: 밀리초, 기본값은 0)], [인자1],[인자2],...);

setTimeout(function(){
  let $grid = $('.container').masonry();
},5000);

Element.closest()

• Element의 closest() 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함하여 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다.
• 만약 조상이 없다면 null값을 반환한다.

const closestElement = element.closest(selectors);

JS- Index

• 배열의 요소(element)에 접근하기 위해서는 배열의 순서(index)를 이용하여 할 수 있다.
• 배열의 요소를 수정하기 위해서는 수정하고 싶은 배열의 순서에 다른 데이터를 삽입하면 된다.
• 배열의 길이를 구하기 위해서는 length를 이용한다.
  ex) myArray.length

큐(Queue)

• 선입선출(FIFO, First-In-First-Out) 방식을 따르는 자료구조로 먼저 저장된 데이터가 먼저 꺼내지는 형태이다.

offer(E e) -> 큐의 맨 뒤에 지정된 요소를 추가한다. 큐가 가득 차서 요소를 추가할 수 없는 경우 false를 반환
add() -> 큐의 맨 뒤에 지정된 요소를 추가, 큐가 가득차서 요소를 추가할 수 없는 경우 IllegalStateException 예외 발생
poll() -> 큐의 맨 앞에서 요소를 제거하고 반환한다. 큐가 비어 있으면 null을 반환
peek() -> 큐의 맨 앞에서 요소를 반환, 큐가 비어 있으면 null을 반환
clear() -> 큐의 모든 요소를 제거

쌓여있는 큐 제거

$this.find('> .faq-box__answer').stop().slideDown(300);

스택(Stack)

• 후입선출(LIFO, Last-In-First-Out) 방식을 따르는 자료구조로, 마지막에 저장된 데이터가 가장 먼저 꺼내지는 형태이다.

push -> 스텍의 맨 위에 지정된 요소를 추가한다.
pop() -> 스텍의 맨 위에서 요소를 제거하고 반환한다. 스텍이 비어있으면 예외 발생
peek() -> 스텍의 맨 위에서 요소를 반환한다. 스텍이 비어있으면 예외 발생

JS-SHOW, HIDE

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

JS-SLIDEDOWN, SLIDEUP

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
});
</script>

JS-FADEIN, FADEOUT

• 요소를 서서히 나타내지고, 서서히 없어지게 해 줄 수 있는 메서드

<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").fadeOut();
  });
  $(".btn2").click(function(){
    $("p").fadeIn();
  });
});
</script>

linear-gradient()

• linear-gradient()는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성한다.

background-image: linear-gradient(to bottom, #000, #fff);

• gradient()는 image 데이터 유형에 속하기 때문에, image가 사용되는 곳에만 쓰일 수 있다. 그렇기에 linear-gradient()는 background-color 속성이나 color 데이터 유형을 사용하는 다른 속성에는 적용할 수 없다.

BEM 방식

• BEM은 Block, Element, Modifier를 뜻한다. 그리고 각각 __, --로 구분한다.

 <nav class="top-bar__menu-box-1">

위 코드에서 top-bar은 Block, menu는 Element

어떤 목적인가에 따라 이름을 짓는다.

1. Block

• 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트를 블럭이라고 부른다.
• 독립적인 형태

2. Element

• element는 블럭을 구성하는 단위이다.
• 의존적인 형태

3. Modifier

• block이나 element의 속성을 담당한다. 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용하면 된다.

CSS Media Query

• 미디어 쿼리는 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분이다. 사용자가 실행 중인 환경에 대해서 다른 것들을 감지하는 데에도 사용할 수 있다.
• 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념

@media media-type and (media-feature-rule) {
  
}

@media (조건) {
  스타일
}

• 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시됩니다.

/* 768px 이상 에서만 보임 */
@media ( max-width:767px ) {
  .visible-on-md-up {
    display:none;
  }
}

/* 767px 이하 에서만 보임 */
@media ( min-width:768px ) {
  .visible-on-sm-down {
    display:none;
  }
}

좁은 화면, 큰 화면 각각 특정 스타일을 적용하고 싶을 때는 화면의 최대 너비 또는 최소 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있습니다.

DOM?

DOM(문서 객체 모델)이란, 웹페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.

즉, 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다.

document node(문서노드)

• HTML 문서 전체를 나타내는 노드

element node(요소노드)

• 모든 HTML요소 (body, H1~6, div, nav 등)는 이 요소 노드이다.
• 요소 노드는 문서의 구조를 서술한다고 말할 수 있고, 속성, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다.

attribute node(속성 노드)

• 모든 HTML 요소의 속성은 이 속성 노드이다. 요소 노드에 대한 정보를 가지고 있다.

text node (텍스트 노드)

• HTML 문서의 모든 텍스트는 이 텍스트 노드, 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다.

toggle

• on/off 스위치
• add()와 remove()메서드를 한번에 사용할 수 있다.

$('.box-1 > *').click(function() {
  let $this = $(this);
  
  if ( $this.hasClass('active') ) {
    $this.removeClass('active');
  }
  else {
    $this.addClass('active');
  }
});

mouseenter, mouseover

• 어떤 요소 안으로 마우스가 들어오는 순간 감지하는 마우스 이벤트

mouseleave, mouseout

• 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트

next

• 인접 동생(1 or 0)
• '+'

prev

• 인접 형(1 or 0)

parent

• 부모 (1)
• 해당 요소의 바로 위 존재하는 하나의 부모 요소 반환 / 인접한 하나의 요소를 반환

children

• 어떤 요소의 자식 요소를 선택
• 자식들(n or 0)
• '>'

find

• 후손

siblings

• 형제들

$(selector).siblings(filter)