css100, day9

1. preview

> dom에 이벤트를 부여해보자!

2. 코드 설명

1) scss

(1) 글자에 기울기 주기

• title 클래스 안에 글자들이 있는데, 이 글자에 기울기를 줘보자.
• font-style에 oblique을 추가하여 사진처럼 글자가 기울어진다.

.center {
  .title {
    font-size: 25px;
    font-style: oblique;  //글자 기울기 
  }
}

(2) hover시 변화주기

hover전	hover시

• 그림과 같이 hover를 했을 때 배경색에 효과를 주고 싶다면 &:hover를 사용한다.
• 이때 배경색이 변하는 속도에 변화를 주고 싶다면 transition를 이용하자.

.point {
  position: relative;
  background-color: #ff5f6d;
  transition: 0.3s;
  cursor: pointer;
  &:hover {
    background-color: #ffc371;
  }
}

(3) 삼각형 만들기

• 가상 클래스
  : 가상클래스before, after를 사용하면, html에 태그를 추가하지 않고 요소를 사용할 수 있다.
  : 이때 가상클래스에 content속성은 필수이며, 특정 내용을 기입하고 싶지 않다면 content:""를 사용하자.

• border로 삼각형 만들기
  : 우리는 css에서 상자를 만들 때 border속성을 이용한다.
  : 그런데 이 border 속성은 top, left, bottom, right로 구성되어 있다.
  : 아래와 같은 css를 적용하면, 그림처럼 영역이 나누어져 있는 걸 알 수 있다.

border-top: 50px solid #000;
border-right: 50px solid #F00;
border-bottom: 50px solid #0F0;
border-left: 50px solid #00F;

그렇다면 어떻게 이 상자를 삼각형으로 만들 수 있을까?

: 만약 삼각형을 만들고 싶다면 transparent(투명화)를 사용해보자.
: 그림처럼 역삼각형을 만들고 싶다면, border-left, border-right를 투명하게 만들면 된다.

.pop {
  ...
  &:after {
    content: "";  /*가상클래스에선 필수*/
    position: absolute;
    top: 95px;
    right: 20px;
    border-left: 10px solid transparent;  /*왼쪽 투명*/
    border-right: 10px solid transparent; /*오른쪽 투명*/
    border-top: 10px solid rgb(51, 51, 51); /*위부분 살리기*/
  }
  ..
}

2) js

(1) js로 노드 만들기

• createElement(노드)를 사용하면 특정 dom을 생성할 수 있다.
• innerHTML을 이용하면 생성된 노드에 html코드를 추가할 수 있다.

const point = document.querySelector('.point');
const body = document.querySelector('.center');  
let popBox = document.createElement('div');      //노드생성

//html 추가
popBox.innerHTML = "<span class='highlight'>Obsession</span>, a persistent disturbing preoccupation with an often unreasonable idea or feeling</p>";  

(2) 특정 dom에 자식 추가하기

• appendChild을 사용하면 특정 dom에 자식 dom을 추가할 수 있다.

body.appendChild(popBox);  //자식으로 추가

(3) 클래스 추가하기

• classList.add('클래스명')을 사용해 dom에 클래스를 추가할 수 있다.
• classList.remove('클래스명')를 하면 클래스를 제거할 수 있다.

popBox.classList.add('pop');

(4) 이벤트 적용하기

gif와 같이 움직이는 애니메이션을 주고 싶다면?? addEventListener를 사용하자.

• addEventListener("이벤트", 콜백함수)를 이용하면 특정 이벤트 발생에 따라 발생시키고 싶은 함수를 추가할 수 있다.

• 만약 특정 dom의 style를 변형하고 싶다면, dom.style.css속성 = '값'을 사용하면 된다.

//mouseover시 popBox의 투명도와 위치를 변경한다.
point.addEventListener("mouseover", function(){  
  popBox.style.opacity = 1;
  popBox.style.top = '-35px';
	
});

//mouseleave시 popBox의 투명도와 위치를 변경한다.
point.addEventListener("mouseleave", function(){
  popBox.style.opacity = 0;
  popBox.style.top = '-50px';
});