[혼자 공부해서 개발까지]part9 - 테두리와 그림자 효과

오늘 배워볼 내용은 웹 디자인에서 테두리와 그림자의 역할에 대해서 알아보는 시간입니다. 테두리와 그림자는 시각적 요소를 강조하고, 페이지의 요소들이 서로 구분되도록 돕는 중요한 역할을 합니다. 그럼 두개의 속성을 배우러 가볼까요?

 

 

 

목차

• CSS 테두리 효과(boder)
• CSS 그림자 효과(shadow)

 

css 테두리 효과

테두리 효과는 웹 요소의 경계를 정의하는 데 사용됩니다. CSS에서 border 속성을 사용하면 간단하게 요소의 테두리를 설정할 수 있습니다.

 

테두리를 사용하기 위해서는 기본적으로 태두리의 두께, 스타일, 색상을 정의해줘야 합니다. CSS에서는 이 3가지 속성을 나눠서 정의 할 수도 있고, 한번에 묶어서 사용할 수도 있습니다. 우리는 배우는 입장이니 두개 다 아는 것이 좋겠죠??

 

 

방법1  :  각각 나누어서 정의

• 태두리 두께
  

  div {
    border-width: 3px;
  }

  
  
  
• 태두리 스타일
  스타일 종류 : 
  

  스타일	설명	특징
  solid	실선 테두리	깔끔하고 기본적인 실선
  dotted	점선 테두리	점들이 간격을 두고 배열된 형태
  dashed	대시선 테두리	짧은 선들이 반복되는 형태
  double	이중선 테두리	두 개의 실선이 간격을 두고 표시됨
  groove	홈 효과가 있는 테두리	입체적이고 홈이 파인 듯한 느낌

  
  예시 화면
  

  

  
  
  
  
• 태두리 색상
  

  div {
    border-color: red;
  }

  
  
  

 

 

 

방법2: 한번에 정의

예시 코드

div {
  border: 4px groove purple; /* 4px 두께, 홈효과, 보라색 테두리 */
  width : 100px;
  height : 100px;
}

 

 

실행화면

 

 

 

 

 

---

css 그림자 효과

웹페이지에서 그림자 효과는 텍스트, 블럭요소 등에 입체감을 주기 위해서 사용되는 속성입니다. 우리는 그걸 Box-Shadow와 Text-Shadow 속성으로 구분해서 사용할 수 있습니다.

Box-Shadow

• 수평 거리 : 필수
• 수직 거리 : 필수
• 흐림 정도 : 선택
• 확산 정도 : 선택
• 색상 : 선택

 

 

예시 코드

 div {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2); /* 수평 10px, 수직 10px, 흐림 정도 15px, 색상 */
}

 

 

화면

 

Text-shadow 

• 흐림 정도
• 그림자의 색상
• 수직 거리
• 수평 거리

 

 

예시 코드

h1 {
  font-size: 40px;
  color: blue;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); /* 수평 3px, 수직 3px, 흐림 정도 5px, 색상 */
}

 

화면