CSS 9차시

# Avatar

<h1>Avatar</h1>

    <style>
        .container {
            display: inline-flex;     // flex는 container끼리 위아래로(상하)로 쌓이지만 inline-flex는 좌우로 쌓인다.
            align-items: center;
        }
        img {
            width: 3rem;
            height: 3rem;
            object-fit: cover;     // 사진의 비율을 유지하면서 콘텐츠 박스를 가득 채운다. 비율이 맞지 않으면 일부는 잘려나감
            border-radius: 50%;     // 모서리 둥글게
        }
        h3 {margin-left: 0.5rem;}
    </style>

    <div class="container">
        <img src="이미지 주소" alt="">
        <h3>bunny</h3>
    </div>

---

# Thumbnails (opacity)

<style>
        img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            opacity: 0.8;     // 투명도 : 0은 완전투명, 1은 완전 불투명
            cursor: pointer;
            transition: 0.2s;     // 속성값이 변하는데 걸리는 시간
        }
        img:hover {
            opacity: 1;
        }
    </style>

 

<div class="container">
        <img src="이미지 주소" alt="">
        <img src="#" alt="">
        <img src="#" alt="">
    </div>

---

# Thumbnail (Scalable)

마우스를 올렸을 때 확대되어 나타남

<h1>Scalcble thumbnails</h1>

    <style>
        .container {
            width: 200px;
            height: 200px;
            overflow: hidden;     // 확대된 이미지가 원래의 크기를 넘으면 잘라냄
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.2s;     // 속성이 변하는 element에 transition을 적용해주어야 한다.
        }
        .container:hover img{
            transform: scale(1.1, 1.1);     // 크기가 가로축, 세로축 10%증가
        }
    </style>

    <div class="container">
        <img src="#" alt="">
    </div>

---

# hoverable Overlay Thumbnails

    <style>
        .container {
            width: 200px;
            height: 200px;
            cursor: pointer;
            position: relative;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .item {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0 0 0 / 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            opacity: 0;
            transition: 0.2s;     // display: none을 사용하면 부드러운 효과를 낼 수 없다.(중간값이 있어야 함)
        }
        .container:hover .item {
            opacity: 1;
        }
    </style>

    <div class="container">
        <div class="item">&#129414;&#129414;&#129414;</div>
        <img src="#" alt="">
    </div> -->

---

# Main image

<style>
        .container {
            height: 20rem;
            background-color: #ddd;
            background-image: linear-gradient(to right, #f60, #f00);
            position: relative;
        }
        .item {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;     // item의 크기를 width나 height의 정의 없이 container에 맞춤
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

 

    <div class="container">
        <div class="item">
            <h1>Heading</h1>
        </div>
    </div>

---

# reponsive image

- 이미지는 가로, 세로 둘 중 하나만 설정해도 사진 비율에 맞추어 자동으로 출력된다.

+ 비율이 다른 사진을 동시에 출력할 때

<h1>Q. Responsive</h1>

    <style>
        .container {
            display: flex;
            align-items: flex-start;     // stretch가 기본형이므로
        }
        img {
            width: 50%;
            height: auto;
        }
    </style>

    <div class="container">
        <img src="#" alt="">
        <img src="#" alt="">
    </div>

---

# 플랙스를 활용한 그리드

    <style>
        .container {
            display: flex;      // item 3개를 줄바꿈없이 일렬로 배열
            /* gap: 1rem; */
        }
        .item {
            width: 33.33333%;
        }
        img {
            width: 100%;
            padding: 0.5rem;
            box-sizing: border-box;
        }
    </style>

    <div class="container">
        <div class="item">
            <img src="이미지 주소" alt="">
            <img src="#" alt="">
            <img src="#" alt="">
        </div>
        <div class="item">
            <img src="#" alt="">
            <img src="#" alt="">
            <img src="#" alt="">
        </div>
        <div class="item">
            <img src="#" alt="">
            <img src="#" alt="">
            <img src="#" alt="">
        </div>
    </div>