web design rules: shadow, border-redius

1.박스에 shadow넣는 방법과
text에 shadow 넣는 방법을 알아보았다.

먼저 박스에 shadow넣는 방법!

.chair {
  box-shadow: 0px 20px 30px 0px rgb(0, 0, 0, 0.07);
}

적용하고 싶은 클래스 네임에다가
요렇게 넣어주면 된다.
맨처음은 그림자 수평방향을 정해주는애고
두번째는 수직방향을 정해주는 애다.
시도해봤더니 숫자가 클수록 오른쪽으로
마이너스로 하면 왼쪽으로 갔다.
세번째에는 그림자 투명도를 결정해주는 애!
네번째는 그림자 크기를 결정해준다고 한다.
자세한건 밑의 MDN 문서를 참조해보자.

MDN BOX SHADOW

텍스트에 shadow넣어주고 싶으면
이것도 아주 간단하다!

 text-shadow: 0px 5px 5px 0px rgb(0, 0, 0, 0.07); 

위에랑 똑같은데 요렇게 text-shadow라고만 적어주면 된다는 사실!

2.border redius도 배워보았다.
이건 예전에 알고 있었던거긴 한데
그래도 실제로 프로젝트에 적용해보니 재밌었다.

.chair {
  box-shadow: 0px 20px 30px 0px rgb(0, 0, 0, 0.07);
  border: 12px;
}

.chair img {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

요런식으로 넣어주면 되는데 이미지에서
밑 왼쪽, 오른쪽 이렇게 콕 집어줘서
redius 없애 줄 수 있는건 처음알았다!!!!