[6주][1일][1~2th] 요소에 그림자 효과 적용하기

★ 용어 정리

 

 - 색 지정 참고페이지 : https://kuler.adobe.com 사이트에서 다양한 색을 가져올 수 있음

 - box-shadow : 박스가 생기고, 그 박스에 그림자효과가 적용됨

☞ 0px 10px 2px rgba(0,0,0,.5); 왼쪽부터 그림자를 밀어줌

 - text-shadow : 글자에 그림자효과

☞ 5px 3px 5px; 왼쪽부터

 - text-transform: capitalize; 단어의 첫 스펠링을 대문자로 바꿔줌

 

body{

min-height: 400px; 
box-shadow: 0px 10px 2px rgba(0,0,0,.5);

}

 - min-height : 박스쉐도우를 적용했을 때, 그 안의 최소 세로 크기를 지정해 줌.

 

박스 쉐도우 적용시

 

min-height 적용시

 

 

오늘 완성한거(쨘~)

 

소스 코드

CSS

h1 {
 text-shadow: 5px 3px 5px;
 box-shadow: 10px 10px 0px #ff0066; text-align : center;
 width: 400px;
 padding: 10px 20px;
 margin: 10px auto;
 background: #ffcc33;
 border-radius: 20px 0px;
 text-align: center;
 text-transform: capitalize;
}

#article {
 width: 377px;
 height: 231px;
 margin: 20px auto;
 border-radius: 25px;
 box-shadow: 5px 5px 40px #666666;
 padding-top:1px;
 background-image: url(images2/pattern_yellow.png);
}

#wrap {
 font-family: "맑은 고딕", 돋움, arial;
 border-top: 15px solid #83FF93;
 margin : 0px 50px;
 padding: 20px;
 min-height: 400px;
 box-shadow: 0px 10px 2px rgba(0, 0, 0, .5);
 height: 500px;
 margin: 0px 50px;
 background-color: #ff0;
 background-clip: content;
}

p {
 padding: 20px;
 background:#ff0;
 border: 3px dashed;
 border-radius:20px;
 width: 80%;
 margin: 20px auto;
 background-color:rgba(255,255,255,.3);
}

바디

<div id="wrap">
  <h1>Box Shadow</h1>
  <div id="article">
   <p>
    Try not to become a man of success but rather try to become a man of
    value. <br /> (Albert Einstein) 성공한 사람이 아니라 가치 있는 사람이 되려고 힘써라. <br />
    (알버트 아인슈타인)
   </p>
  </div>
 </div>