3편 Omnifood section-meals

1.HTML

 

    <section class="section-meals">
        <ul class="meals-showcase clearfix">
            <li>
                <li>
                    <figure class="meal-photo">
                        <img src="public/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
                    </figure>
                </li>
            </li>

            <li>
                <figure class="meal-photo">
                    <img src="public/img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
                </figure>
            </li>

            <li>
                <figure class="meal-photo">
                    <img src="public/img/3.jpg" alt="Chicken breast steak with vegetables ">
                </figure>
            </li>

            <li>
                <figure class="meal-photo">
                    <img src="public/img/4.jpg" alt="Autumn pumpkin soup">
                </figure>
            </li>
        </ul>
        
        <ul class="meals-showcase clearfix">
            <li>
                <figure class="meal-photo">
                    <img src="public/img/5.jpg" alt="Paleo beef steak with vegetables">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="public/img/6.jpg" alt="Healthy baguette with egg and vegetables">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="public/img/7.jpg" alt="Burger with cheddar and bacon">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="public/img/8.jpg" alt="Granola with cherries and strawberries">
                </figure>
            </li>
        </ul>
    </section>

figure 태그

 

<figure> 태그는 삽화나 다이어그램, 사진 등과 같이 문서의

 

주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용합니다.

 

2.CSS

.section-meals {
    padding: 0;
}

.meals-showcase {
    list-style: none;
    width: 100%;
}

.meals-showcase li {
    display: block;
    float: left;
    width: 25%;
}

.meal-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.meal-photo img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform 0.5s opacity 0.5s;
}

.meal-photo img:hover {
    opacity: 1.0;
    transform: scale(1.03);
}

overflow: hidden

 

CSS의  overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서

 

요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정한다.

 

기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면

 

컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커진다.

 

크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여지게 된다.

 

overflow 에 사용할 수 있는 값은 네가지가 있다.

 

- visible : 기본 값, 넘칠 경우 컨텐츠가 상자 밖으로 보여진다.

 

- hidden : 넘치는 부분은 잘려서 보여지지 않는다.

 

- scroll : 스크롤바가 추가되어 스크롤할 수 있다.(가로, 세로 모두 추가 된다.)

 

- auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정된다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있다.)

참고: https://offbyone.tistory.com/296

CSS - overflow 속성 사용하기

transform: scale(1.15)

 

변형(transform)이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미한다.

 

traslate : 이동효과

 

scale : 확대/축소 효과

 

rotate : 회전 효과

 

skew : 비틀기(기울임) 효과

참고: https://webclub.tistory.com/432

CSS3 transform(화면 변형)

 

transition: transform 0.5s opacity 0.5s

 

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.