Css Advanced (Section 7~)

1. Background 

#product-overview {
    background: url("freedom.jpg"); // bacgroung-image("freedom.jpg"); 도 똑같다
    background-image: url("freedom.jpg");
    background-size: 100px; // 반복되게 된다. // background-size:cover 는 100%랑 같다. // 다른 요소 : contain
    background-position: 20px; // 왼쪽에서 얼마나 떨어지는지
    backgroud-repeat: norepeat;
    background-origin: border-box // 이미지가 border라인에 겹치게// content-box, padding-box
    background-clip: border-box //
    background-attachment: fixed // 이미지 고정되도록
    // 줄여서 쓰는 법(위에 이미지, size,position)
    background: url("freedom.jpg") left 10% bottom 20%/cover;
    width: 100%;
    height: 528px;
    padding: 10px;
    margin-top:43px;
    position: relative;
}


.main-header__brand {
    color: #0e4f1f;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    display: inline-block; // 이렇게 넣어주고 아래 img 태그 적용되게 할 수 있다. 이 class의 태그 자체가 인라인 태그라서
}
.main-header__brand img {
    height: 100%;
}

 

2. <img>

<div class="testimonial__image-container">
	<img src="../images/customer-1.jpg" alt="Mike Statham - Customer" class="testimonial__image">
</div>

.testimonial__image-container {
  width: 65%;
  display: inline-block;
  vertical-align: middle; // 세로 가운데 정렬
  box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3);
}

.testimonial__image {
  width: 100%;
  vertical-align: middle;
}

2-1. backgorund-image, img 태그 차이점 (검색엔진, 성능 면)

https://daco2020.tistory.com/54

<img > 태그 와 {background-image} 의 차이를 알고 싶어?

 

3. gradient (linear, radial)

1) linear

#product-overview {
	background-image: linear-gradient(red, blud);// 첫 번째 인자-> 두번째인자 direction 방향
    // 첫 번째에 방향 지정할 수도 있고, degree 지정할 수도 있다.
    width: 100%;
    height: 528px;
    padding: 10px;
    margin-top:43px;
    position: relative;
}


.main-header__brand {
    color: #0e4f1f;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    display: inline-block; // 이렇게 넣어주고 아래 img 태그 적용되게 할 수 있다. 이 class의 태그 자체가 인라인 태그라서
}
.main-header__brand img {
    height: 100%;
}

2) radial

#product-overview {
	background-image: radial-gradient(circle at top, red, blud);// 
    width: 100%;
    height: 528px;
    padding: 10px;
    margin-top:43px;
    position: relative;
}


.main-header__brand {
    color: #0e4f1f;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    display: inline-block; // 이렇게 넣어주고 아래 img 태그 적용되게 할 수 있다. 이 class의 태그 자체가 인라인 태그라서
}
.main-header__brand img {
    height: 100%;
}

108강 filter~