본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

SITE 제작

이미지 유형_01 만들어보기~~

by C0Di 2022. 8. 17.
728x90

이미지 유형_01

간단한 예제를 통해 자세히 보기 버튼을 만들고 설명과 함께 양옆으로 정렬해 메뉴를 구성해봅니다.


HTML 코드

간단한 이미지 유형 예제를 만들기 위해 기본적인 틀을 만들어 줍니다!

<body class="nexon">
    <div class="container section">
        <h2>강아지의 모든 모습!</h2>
        <p>세상에서 가장 귀여운 강아지의 모든 모습을 상상하고 세세하게 지켜만 보세요!!</p>
        <div class="card_container">
            <div class="card">
                <div class="container"></div>
                <div class="text_cont">
                    <h2>강아지의 모든 모습</h2>
                    <p>강아지는 왜이렇게 귀여울까요 대체왜 그런건지 궁금하지만 제 생각에는 나야 모르곘지만 아무튼 그런것들이 막 있습니다 그렇게 생각하세요 ^_^</p>
                    <div class="more">자세히 보기</div>
                </div>
            </div>
            <div class="card">
                <div class="container"></div>
                <div class="text_cont">
                    <h2>강아지의 눈썹!</h2>
                    <p>강아지는 눈썹이 있을까요? 없을까요? 어찌보면 있는거 같기도 하고 본적이 없었던거 같기도하고 생각 해본적이 없던거 같기도 하고 흠...</p>
                    <div style="background-color:#BD4517" class="more">자세히 보기</div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS 코드

설명과 함께 자세히 보기라는 버튼이 아래로 가도록 css를 설정해줍니다.

이미지를 양옆으로 정렬하기 위해 justify-content에 space-between을 주어 양옆으로 .card_container를 정렬합니다.

@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

    .nexon {
        font-family: 'NexonLv1Gothic';
        font-weight: 400;
    }

    /* Reset */
    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    img {
        width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: normal;
    }

    /* common(공통) */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;
    }

    .section {
        padding: 120px 0;
        /*위 아래 */
    }

    .section>h2 {
        /* ">" 이걸로 section 안에 있는 h2선택 */
        font-size: 50px;
        line-height: 1;
        /* 1이라고 적으면 auto랑 똑같음 */
        text-align: center;
        margin-bottom: 20px;
    }

    .section>p {
        font-size: 22px;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
    body{
        font-family: 'NexonLv1Gothic';
    }
    
    /* card */

    .card{
        background-color: #ededed;
        width: 570px;
        height: 370px;
        /* padding: 20px; */
        position: relative;
        color: #fff;
    }

    .card h2{
        font-size: 32px;
    }

    .card:nth-child(1){
        background-image: url(img/bg01_01.jpg);
    }
    .card:nth-child(2){
        background-image: url(img/bg01_02.jpg);
    }
    
    .card_container{
        display: flex;
        justify-content: space-between;
    }

    .text_cont{
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0px 20px 20px 20px;
    }
    
    .text_cont p{
        margin-top: 10px;
        line-height: 1.5;
        font-size: 16px;
        font-weight: 300;
    }

    .text_cont .more{
        width: 120px;
        height: 38px;
        background-color: #CA9A03;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

결과


728x90
반응형

'SITE 제작' 카테고리의 다른 글

이미지 유형 03 사이트 만들기!  (13) 2022.08.21
이미지 유형 02 만들어보기~~~~  (2) 2022.08.17
사이트 만들기03  (11) 2022.08.10
카드 유형 02 만들어보기!  (11) 2022.08.09
카드 유형01 만들어보기!  (5) 2022.08.08

댓글

#HASH_TAGS

-

1

화사한가요? 선택해주세요 메서드 숙제가 다양해서 너무 좋아요 멈추지 않는 ' j ' 시리-즈 오징어 1Kg 당 3000원 필터선택자 scroll-snap-align 오늘은 내가바로 오징어! HTML Method 오징어 두마리 포획 완료 JQuery 오늘 조업 마감했습니다. 코드 scroll-snap-type 공부 코딩 제이쿼리 슬라이드 결과 : 월요일 오늘도 웹표준은.. 내일은 즐거운 월요일 울적하니 꽃을 달아봤습니다 오징어 한마리 수확 완료! 이건 또 뭐람 ImageSlideEffect 다크모드