웹3 4일차

{**Tip**}

[CSS]

// 일반 클래스
.box {
  width: 100px;
  height: 100px;
  border: 4px solid yellow;
}


// .box라는 클래스가 .action이라는 클래스를 가질 때 적용될 css.
// 클래스를 붙여쓰며, 중복 적용 가능하다.
// >(자식선택자) ,  +(인접동생선택자), (띄어쓰기) 와 같은 결이다.
.box.active {
  background-color: green;
}

 

[html]

html에서 'lorem'은 긴 문장 예시를 간단히 삽입할 수 있는 요소이다. 

 

 

 

 

 

 

[팝업 창 열고 닫기]

/* 클래스 popup-section와 active를 모두 가질 때 */
.popup-section.active {
    display: block;
}

// 글자를 클릭하면 팝업이 열리는 함수 실행
$('.popup-open').click(add_Popup);
// 닫힘 버튼을 클릭하면 팝업이 닫히는 함수 실행
$('.popup-head').click(remove_Popup);

function add_Popup() {
    // j-query addClass이벤트: 'active'클래스를 개체에 추가한다. 
    $(".popup-section").addClass('active');
}

function remove_Popup() {
    // j-query removeClass이벤트: 'active'클래스를 개체에서 삭제한다.
    $('.popup-section').removeClass('active');
}