7월 9일_CSS(그라데이션, 속성 선택자, 가상클래스)

# 그라데이션 효과

• linear-gradient(to 방향/각도, 색상 중지점)

방향으로 지정하기
.grad3 {
    background: rgb(72, 255, 0);
    background: linear-gradient(to left top, rgb(247, 0, 255), rgb(26, 171, 255));
  }
 
 각도로 지정하기
 .grad4 {
    background: rgb(72, 255, 0);
    background: linear-gradient(38deg, rgb(47, 68, 255), rgb(0, 255, 115));
  }

 

---

 

# 연결 선택자

• 선택자와 선택자를 연결해 적용 대상을 제한
• 컴비네이션 선택자, 조합 선택자 라고도 함

 

# 하위 선택자

• 부모 요소에 포함 된 모든 하위 요소에 스타일이 적용
• 자식요소 뿐아니라 손자, 손자의 손자 요소등 모든 하위 요소 적용
• 하위 선택자를 정의 할 때는 상위 요소와 하위 요소를 나란히 써줌

  section p {
    color: blue;
  }
  --section 에 포함된 p태그 전부 스타일 지정
  
  section > p {
    color: blue;
  }
  --section에 포함된 자식 태그인 p만 스타일 지정
  
  h1 + p {
    background-color: aquamarine;
    color: red;
  }
  --h1 요소의 형제 요소 중에 첫번째 p요소에 적용
  
  h1 ~ p { 
    background-color: aquamarine;
    color: red;
  }
  --h1의 형제 요소 전체에 적용

 

 

# 속성  선택자

• 지정한 속성을 가진 요소를 찾아 스타일 적용

  a[href] {
    background-color: yellow;
    border: 1px solid #000;
  }

 

  a[target="_blank"] {
    padding-right: 30px;
    background: url('image/apple-bg.jpg') no-repeat center right;
  }

 

[속성]	지정한 '속성'일 때	[href]
[속성 = 값]	'값' 에 일치할 때	[target = "_blank"]
[속성 ~= 값]	여러 값들 중 특정 '값'이 포함되어 있을 때(단어별)	[class ~= "button"]
[속성 |= 값]	'값'이 포함되어 있을 때 (하이픈 포함 단어별)	[class |= "값"]
[속성 ^= 값]	'값'으로 시작할 때	[title ^= "값"]
[속성 $= 값]	'값'으로 끝날 때	[href $= "값"]
[속성 *= 값]	'값'이 속성 값의 일부 일 때	[href *= "값"]

---

# 가상 클래스

• :link 방문하지 않은 링크에 스타일 적용
• :visited 방문한 링크에 스타일 적용
• :active 웹요소를 활성화 했을 때 스타일 적용
• :hover 웹 요소에 마우스 커서를 올려 놓을 때 스타일 적용
• :focus 웹 요소에 초점이 맞추어 졌을 때 스타일 적용

<style>
  .container {
    width: 960px;
    margin: 0 auto;
  }
  .navi {
    width: 960px;
    height: 60px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ccc;
  }
  .navi ul {
    list-style: none;
    padding-top: 10px;
    padding-bottom: 5px;
  }
  .navi ul li {
    float: left;
    width: 150px;
    padding: 10px;
  }
  .navi a:link , .navi a:visited {
    display: block;
    font-size: 14px;
    color: #000;
    padding:  10px;
    text-decoration: none;
    text-align: center;
  }
  .navi a:hover, .navi a:focus {
    background-color: #222;
    color: #fff;
  }
  .navi a:active {
    background-color: #0069e0;
  }
  .contents {
    display: block;
    border: 1px solid #4d4d4d;
    border-radius: 10px;
    width: 400px;
    height: 250px;
    margin: 50px auto;
    padding: 40px 20px;
    line-height: 1.5em;
  }
  #intro:target {
    background-color: #0069e0;
    color: #fff;
  }
  #room:target {
    background-color: #e07f00;
    color: #fff;
  }
  #reservation:target {
    background-color: #e0007b;
    color: #fff;
  }
</style>