Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

display 와 visibility 차이

Table Tag
<CAPTION>, <COLGROUP>, <THEAD>, <TBODY>, <TFOOT>, <SCOPE>(row,col,rowgroup,colgroup)

jQuery 노드 찾기 (요소 탐색)
jQuery 셀렉터
$("*") //모든 엘리먼트 선택
$("div") //Tag 이름으로 노드 찾기
$("#idName") //id 이름으로 노드 찾기
$(".className") //class 이름으로 노드 찾기
$("ul.className") //ul 엘리먼트 중 class 이름이 className 인 엘리먼트 선택
$("ul, div") //ul 및 div 태그 선택
$("div img") //div 의 자손노드 중 Tag이름이 img인 모든 엘리먼트 선택
$("ul .className") //ul의 자손노드 중 class 이름이 className 인 엘리먼트 선택
$("ul>li") //ul Tag 의 바로 아래 자식노드 중 li Tag 인 엘리먼트 선택
$("prev+next")
$("prev~siblings")

필터
:not(selector) //셀렉터와 일치하지 않는 요소들 리턴
:first //선택된 요소 중 첫 번째 요소
:last //선택된 요소 중 마지막 요소
:even //선택된 요소 중 짝수 인덱스 요소들
:odd //선택된 요소 중 홀수 인덱스 요소들
:eq(index) //선택된 요소 중 지정된 index 번호를 가진 요소
:gt(index) //선택된 요소 중 지정된 index 번호보다 큰 인덱스 요소들
:lt(index) //선택된 요소 중 지정된 index 번호보다 작은 인덱스 요소들
:header //<h1> ~ <h6> 요소들
:animated //애니메이션이 적용된 모든 요소들
:focus //현재 포커스를 가지고 있는 요소
:contains("text") //"text"를 가지고 있는 요소들
:empty	 //자식 요소가 없는 모든 요소들
:parent	 //자식 요소를 가지고 있는 모든 요소들
:has(selector) //selector에 부합하는 요소를 하나 이상 가지고 있는 요소들
:hidden	 //화면에서 숨겨진 모든 요소들
:visible //공간을 차지하고 있는 모든 요소들
:nth-child(expr) //expr 순번의 자식 요소
:first-child //첫번째 자식 요소
:last-child //마지막 자식 요소
:only-child //요소의 자식 요소가 하나뿐인 요소

// 예시
$('div:not("#summary")') //#summary를 제외한 나머지 div 태그들을 선택
$("li").eq(3)	 //찾은 노드 중 4 번째 노드에 접근하기
$("div:has(p)")	 //<p> 요소를 가진 모든 <div> 요소들
$("ul li:nth-child(2)") //두 번째 <li> 요소

속성옵션 필터
$("[attr]")	 //attr 속성을 가진 모든 요소들
$("el[attr]") //속성 attr 를 포함한 모든 el 노드 찾기
$("el[attr=val]") //속성 attr 의 값이 val 인 모든 el 노드 찾기
$("el[attr!=val]") //속성 attr 의 값이 val이 아닌 모든 el 노드 찾기
$("el[attr^=val]") //속성 attr 의 값이 val 로 시작하는 모든 el 노드 찾기
$("el[attr$=val]") //속성 attr 의 값이 val 로 끝나는 모든 el 노드 찾기
$("el[attr*=val]") //속성 attr 의 값이 val 을 포함하고 있는 모든 el 노드 찾기
$("[attribute|='value']") //속성값이 value값과
일치하거나 value- 으로 시작하는 요소들
$("[attr1][attr2]") //지정된 속성중 하나를 가진 모든 요소들

// 예시
$("div[class*=test]") //class의 값이 test를 포함하고 있는 모든 div 노드

폼 요소
// 폼 요소의 값 조회하기
// <input>,<textarea>,<select> 요소의 값을 알아낸다.
.val()

/** 폼 필터
:input, :text, :password, :radio, :checkbox, :submit,
:image, :reset, :button, :file, :selected
:enabled, :disabled, :checked
*/

노드 Traversing
// DOM 객체에 직접 접근하기
$el.get(index)
var li_1 = $("ul li").get(1);

// 선택한 객체집합 내의 정보를 탐색, 조작하기
$elements.each(function(index, element) {});

// 예시
$("li").each(function (index){
  var ids = this.id; //그 노드의 id 속성에 접근할 때
  var $target = $(this); //그 요소에 jQuery 메서드를 사용할 때
  $target.append("<em class='order'>" + ids + "</em>");
  // or
  var $target = $("li").eq(index);
});

// 현재 노드들의 조건 검사
$("li").is(".item")
//
$li.each(function() {
  var $this = $(this);
  if ($this.is(".item")) { // <li> 요소의 class값이 item인지 확인한다.
    // code...
  }
});

// 노드가 위치한 index 값 구하기
$(this).index()
$list.index($obj)
$list.index(DOM)

// 자식노드 탐색
$("ul").children() //모든 자식 노드 찾기
$("ul").children(".select") //특정 자식 노드 찾기

$("ul").children().first() //첫번째 자식노드 찾기
$("ul").children(":first") //첫번째 자식노드 찾기
$("ul").children().eq(0) //첫번째 자식노드 찾기

$("ul").children().last() //마지막 자식노드 찾기
$("ul").children(":last") //마지막 자식노드 찾기
$("ul").children().eq(-1) //마지막 자식노드 찾기

$("ul").children().eq(index) //n번째 자식노드 찾기

// 부모노드 탐색
$("ul.menu").parent() //부모노드 찾기
$("ul.menu").parents() //조상노드 찾기
$("ul.menu").parents(".header") //특정 조상노드 찾기

// 형제노드 탐색
$("li.select").prev()           // 특정 노드의 이전 형제노드 찾기
$("li.select").prevAll()        // 특정 노드의 모든 이전 형제노드 찾기
$("li.select").prevAll("#info") // 이전 형제노드 중 #info를 가진 노드 찾기
$("li.select").next()           // 특정 노드의 다음 형제노드 찾기
$("li.select").nextAll()        // 특정 노드의 모든 다음 형제노드 찾기
$("li.select").nextAll("#info") //다음 형제노드 중 #info를 가진 노드 찾기
$("li.select").siblings('.txt') // 형제 노드를 선택

요소 필터링
// 찾은 노드 중에서 특정 노드만 필터링 하기
$("li").filter(".select")
$liList.filter(".select").css('text-align', 'center');

// 현재 노드의 자손노드 중 특정 노드 찾기
$("ul").find("li.select")
$("#content").find('.test1').css('text-align', 'right');

// index 번호에 해당하는 요소를 리턴
$("li").eq(index)

jQuery 노드 수정 (요소 변경)
노드 Manipulation
// 신규노드 생성
var $li = $("<li>new menu</li>");

// 신규노드를 첫번째 자식노드로 추가
$("ul.menu").prepend($li);
$li.prependTo("ul.menu");

// 신규노드를 마지막 자식노드로 추가
$("ul.menu").append($li);
$li.appendTo("ul.menu");

// 신규노드를 특정노드의 이전 위치에 추가
$li.insertBefore("li.select");
$("li.select").before("$li");

// 신규노드를 특정노드의 다음 위치에 추가
$li.insertAfter("li.select");
$("li.select").after("$li");

// 특정노드를 첫번째 자식노드로 이동
$("ul.menu").prepend($(this));
$(this).prependTo("ul.menu");

// 특정노드를 마지막 자식노드로 이동
$("ul.menu").append($(this));
$(this).appendTo("ul.menu");

// 특정노드를 특정노드의 이전 노드로 이동
$(this).insertBefore("li.select");
$("li.select").before($(this));

// 특정노드를 특정노드의 다음 노드로 이동
$(this).insertAfter("li.select");
$("li.select").after($(this));

// 특정 노드의 자손노드 내용을 문자열로 읽기
$("ul").html()
// 특정 노드의 텍스트노드 내용을 문자열로 읽기
$("li").text()
// 일치하는 모든 요소에 새로운 콘텐츠를 추가한다.
리턴: 교체된 요소들
.replaceWith()
// 노드 내용 수정하기
$("ul").html("<li>new text</li>")
$("li").text("new text")

// 특정 노드 삭제
$("ul.menu li.select").remove();

// 모든 자식노드 삭제
$("ul").children().remove();
$("ul").html("");

// Ctrl + X
$("ul").detach()
// Ctrl + C
$("ul").clone();

/* 예시 */
var $ulMenu = $("ul.menu");
$("ul.menu li").click(function() {
    $ulMenu.prepend($(this));
});
// 클릭한 요소 삭제
$("ul.menu li").click(function() {
    $(this).remove();
});
// 각 요소의 텍스트에 <em>태그 추가하기
$("li.hot").html(function() {
  return "<em>" + $(this).text() + "</em>";
});

속성 조작하기 (attribute & style)
// 스타일값 구하기
.css("font-size");
// 여러 스타일값 구하기
.css(["font-size", "color"]);

// 스타일값 설정하기
.css("color", "red");
.css({ left: 50, top: 50 });

// 선택한 대상에 클래스 추가
.addClass("select info");

// 선택한 대상의 모든 클래스 삭제
.removeClass();
// 선택한 대상의 특정 클래스 삭제
.removeClass("select info");

// 선택한 대상에 특정 클래스 추가/제거 토글
.toggleClass("select");

// 선택한 대상의 특정 속성값 구하기
.attr("href");
// 선택한 대상의 모든 data- 속성값 구하기
.data();
// 선택한 대상의 특정 data- 속성값 구하기
.data("name");

// 선택한 대상의 속성값 설정/변경하기
.attr("src", "./images/02.jpg");
// 선택한 대상의 data- 속성값 설정/변경하기
.data("tel", "1234");

1. 3*2 구조의 이미지 배너.
2. 브라우저 크기에 따라 배열과 정렬을 유지하며 이미지가 잘리지 않고 자동으로 축소되고 확대될 것.
3. 이미지 위에 마우스 오버시 제목, 요약 설명, 보러 가기 버튼, 이미지 오파시티가 동시에 나타나기.

{outer-div} : width:100%;height:auto (width값 기준 높이값 자동)
{inner-div} : width:30%;height:30vw (이미지의 비율이 1:1이기 때문에 inner-div의 width 값 기준 동일한 값으로 30vw)
{inner-hover-div} : width,height: 100% (트랜지션을 위해)

.outer-div{
 width:100%;
 height:auto;
 background:#212121;
 text-align:center;
 padding-top: 10%;
 padding-bottom: 10%;
 margin:0;
 font-size:0;
}

.inner-div{
 display:inline-block;
 width:30%;
 height:30vw;
 margin:0;
}

.inner-hover{
 width:100%;
 height:100%;
 transition-property: background-color;
 transition-duration: 1s;
 transition-timing-function: ease-out;
 transition-delay: 50ms
}

<div class="outer-div">

<div class="inner-div" style="background:url(.jpg) no-repeat center/cover;">
 <div class="inner-hover">
  <div class="font-div"><span class="name-span">{font-div span}</span></div>
  <div class="font-div"><span class="inner-span">{font-div span}</span></div>
  <div class="click-div"><span class="inner-span-view"><a href="#">{click-div span}</a></span></div>
 </div>
</div>

<div class="inner-div" style="background:url(.jpg) no-repeat center/cover;">
 <div class="inner-hover">
  <div class="font-div"><span class="name-span">{font-div span}</span></div>
  <div class="font-div"><span class="inner-span">{font-div span}</span></div>
  <div class="click-div"><span class="inner-span-view"><a href="#">{click-div span}</a></span></div>
 </div>
</div>

<div class="inner-div" style="background:url(.jpg) no-repeat center/cover;">
 <div class="inner-hover">
  <div class="font-div"><span class="name-span">{font-div span}</span></div>
  <div class="font-div"><span class="inner-span">{font-div span}</span></div>
  <div class="click-div"><span class="inner-span-view"><a href="#">{click-div span}</a></span></div>
 </div>
</div>

</div>

이 접근 방식에서는 이미 CSS에 다른 :after또는 :before스타일을 사용하여 클래스를 만들었습니다 . 이 "새" 클래스를 나중에 스타일시트에 배치하여 재정의하는지 확인합니다. 그런 다음 jQuery(또는 바닐라 JavaScript)를 사용하여 이 클래스를 쉽게 추가하거나 제거할 수 있습니다.

장점: jQuery로 구현하기 쉽습니다. 한 번에 여러 스타일을 빠르게 변경합니다. 관심사의 분리를 시행합니다(HTML에서 CSS와 JS를 분리)
단점 : CSS는 내용 때문에, 미리 작성해야 :before하거나 :after완전히 동적이지

p:before {
 content: "foo";
}
p.special:before {
 content: "bar";
}
--
$('p').on('click', function() {
    $(this).toggleClass('special');
});

JavaScript를 사용하여 :after및 :before스타일을 포함하여 문서 스타일시트에 직접 스타일을 추가할 수 있습니다 . jQuery는 편리한 단축키를 제공하지 않지만 다행히 JS는 그렇게 복잡하지 않습니다.
변형으로 jQuery를 사용하여 문서에 완전히 새로운 스타일시트를 추가할 수도 있지만 필요한 코드는 더 깔끔하지 않습니다.
값을 추가하는 것이 아니라 값을 "조작"하는 것에 대해 이야기 하는 경우 다른 접근 방식을 사용하여 기존 또는 스타일 을 읽을:after:before 수도 있습니다 .
약간 더 짧은 코드를 위해 jQuery document.querySelector('p')를 $('p')[0]사용할 때 로 바꿀 수 있습니다 .

장점: 모든 문자열을 스타일에 동적으로 삽입할 수 있습니다. 단점: 원래 스타일은 변경되지 않고 무시됩니다. 반복적인 (ab) 사용으로 인해 DOM이 임의로 커질 수 있습니다.

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
---
var str = "bar";
$('').appendTo('head');
---
var str = window.getComputedStyle(document.querySelector('p'),':before')
 .getPropertyValue('content');

CSS 에서 특정 DOM 속성을 읽는 데 사용할attr() 수도 있습니다 . ( 브라우저가 지원하는 경우 :before, 그것은 지원 attr()뿐만 아니라. ) 이것을 결합하여 content:몇 가지주의 깊게 준비 CSS, 우리는 (그러나 내용 변경 되지 않은 다른 특성, 마진 또는 색상 등)의 :before및 :after동적 :
CSS를 미리 준비할 수 없는 경우 두 번째 기술과 결합할 수 있습니다.

장점: 끝없는 추가 스타일을 만들지 않음 단점: attr CSS에서는 URL 또는 RGB 색상이 아닌 콘텐츠 문자열에만 적용할 수 있습니다.

p:before {
 content: attr(data-before);
 color: red;
 cursor: pointer;
}
---
$('p').on('click', function () {
 $(this).attr('data-before','bar');
});
---
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
 $(this).attr('data-before', str);
});

.box:before {
 content:var(--content,"I am a before element");
 color:var(--color, red);
 font-size:25px;
}
---
<div class="box"></div>
<div class="box" style="--color:blue;--content:'I am a blue element'"></div>
<div class="box" style="--color:black"></div>
<div class="box" style="--color:#f0f;--content:'another element'"></div>

.box:before {
  content:var(--content,"I am a before element");
  color:var(--color, red);
  font-size:25px;
}
.blue {
  --color:blue;
  --content:'I am a blue element';
}
.black {
  --color:black;
}
---
<div class="box"></div>
<div class="box black"></div>
<div class="box blue"></div>

document.querySelectorAll('.box')[0].style.setProperty("--color", "blue");
document.querySelectorAll('.box')[1].style.setProperty("--content", "'I am another element'");
.box:before {
 content:var(--content,"I am a before element");
 color:var(--color, red);
 font-size:25px;
}
<div class="box"></div>
<div class="box"></div>

$('.box').eq(0).css("--color", "blue");
/* the css() function with custom properties works only with a jQuery vesion >= 3.x
 with older version we can use style attribute to set the value. Simply pay
 attention if you already have inline style defined! 
*/
$('.box').eq(1).attr("style","--color:#f0f");
.box:before {
 content:"I am a before element";
 color:var(--color, red);
 font-size:25px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

복잡한 값과 함께 사용할 수도 있습니다.

.box {
  --c:"content";
  --b:linear-gradient(red,blue);
  --s:20px;
  --p:0 15px;
}

.box:before {
  content: var(--c);
  background:var(--b);
  color:#fff;
  font-size: calc(2 * var(--s) + 5px);
  padding:var(--p);
}
<div class="box"></div>