이미지 유형 (2)

728x90

⭐️ 이미지 유형 02 ⭐️

01. 레이아웃 구상하기

레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다.

02. 상자(div) 만들기 : <body>

section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다.
카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다.
중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다.

     <section id="imageType02" class="image__wrap gmarket section">
    <h2>이 달의 컨셉 모델 선정</h2>
    <p>이 달의 컨셉 모델로 선정되신 분들을 소개합니다.</p>
    <div class="image__inner container">
        <article class="image img1">
            <figure class="image__box ">
                <img src="img/image_bg02_01.jpg" alt="베아킴">
            </figure>
            <div class="image__desc">
                <h3>컨셉 29기 베아킴</h3>
                <a href="/" class="more" title="자세히보기">자세히보기</a>
            </div>
        </article>
        <article class="image img2">
            <figure class="image__box">
                <img src="img/image_bg02_02.jpg" alt="로즈문">
            </figure>
            <div class="image__desc">
                <h3>컨셉 29기 로즈문</h3>
                <a href="/" class="more" title="자세히보기">자세히보기</a>
            </div>
        </article>
        <article class="image img3">
            <figure class="image__box">
                <img src="img/image_bg02_03.jpg" alt="에일리">
            </figure>
            <div class="image__desc">
                <h3>컨셉 29기 에일리</h3>
                <a href="/" class="more" title="자세히보기">자세히보기</a>
            </div>
        </article>
    </div>
</section>

02. style(css) 설정하기 : <style>

     /* fonts */
    @import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
 
    .gmarket {
        font-family: 'GmarketSans';
        font-weight: 300;
    }
    /* 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;
        min-width: 1160;
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {
        font-size: 50px;
        line-height: 1;
        text-align: center;
        margin-bottom: 20px;
    }
    .section > p {
        font-size: 22px;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
 
    /* imageType02 */
    .image__wrap {}
    .image__inner {
        display: flex;
        justify-content: space-between;
    }
    .image {
        width: 32%;
        height: 520px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }
    /* .image.img1 {
        background: url(img/image_bg02_01.jpg) no-repeat center / cover ;
    }
    .image.img2 {
        background: url(img/image_bg02_02.jpg) no-repeat center / cover ;
    }
    .image.img3 {
        background: url(img/image_bg02_03.jpg) no-repeat center / cover ;
    } */
    .image__box {}
    .image__box img {
        /* vertical-align: top;  이미지 여백 없애기 */
    }
    .image__desc {
        position: absolute;
        left: 0;
        bottom: -100px;
        width: 100%;
        text-align: center;
        backdrop-filter: blur(10px);   /* 투명도 설정 */
        padding: 23px 20px;
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.3);
        transition: all 0.3s ease-in-out;
    }
    .image:hover .image__desc {
        bottom: 0;
    }
    .image:hover .image__box img {
        transform: scale(1.05);    /* 마우스를 가까이하면 크게 */
        transition: all 0.6s ease-in-out;   /* 크기 변화의 속도 */
    }
 
    .img1 .image__desc {background: rgba(167, 171, 235, 0.5);}
    .img2 .image__desc {background: rgba(244, 206, 131 ,0.5);}
    .img3 .image__desc {background: rgba(24, 35, 56 ,0.5);}
    .img1 .image__desc h3 {color: #000;}
    .img2 .image__desc h3 {color: #000;}
    .img3 .image__desc h3 {color: #fff;}
    .img1 .image__desc .more {color: #000;}
    .img2 .image__desc .more {color: #000;}
    .img3 .image__desc .more {color: #fff;}
 
    .image__desc h3 {
        font-size: 24px;
        margin: 5px;
    }
    .image__desc .more {
        font-size: 16px;
    }
    .image__desc .more:hover {
        text-decoration: underline;
    }

03. 결과보기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기

728x90

'CSS > Layout_Site' 카테고리의 다른 글

텍스트 유형 (1) (2)	2022.09.01
이미지 유형 (3) (2)	2022.08.22
이미지 유형 (1) (4)	2022.08.17
카드 유형 (3) (8)	2022.08.11
카드 유형 (2) (7)	2022.08.10

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

깜냥깜냥🐾코딩 혜윰

이미지 유형 (2)

⭐️ 이미지 유형 02 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<section id="imageType02" class="image__wrap gmarket section">
	<h2>이 달의 컨셉 모델 선정</h2>
	<p>이 달의 컨셉 모델로 선정되신 분들을 소개합니다.</p>
	<div class="image__inner container">
	<article class="image img1">
	<figure class="image__box ">
	<img src="img/image_bg02_01.jpg" alt="베아킴">
	</figure>
	<div class="image__desc">
	<h3>컨셉 29기 베아킴</h3>
	<a href="/" class="more" title="자세히보기">자세히보기</a>
	</div>
	</article>
	<article class="image img2">
	<figure class="image__box">
	<img src="img/image_bg02_02.jpg" alt="로즈문">
	</figure>
	<div class="image__desc">
	<h3>컨셉 29기 로즈문</h3>
	<a href="/" class="more" title="자세히보기">자세히보기</a>
	</div>
	</article>
	<article class="image img3">
	<figure class="image__box">
	<img src="img/image_bg02_03.jpg" alt="에일리">
	</figure>
	<div class="image__desc">
	<h3>컨셉 29기 에일리</h3>
	<a href="/" class="more" title="자세히보기">자세히보기</a>
	</div>
	</article>
	</div>
	</section>

	/* fonts */
	@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

	.gmarket {
	font-family: 'GmarketSans';
	font-weight: 300;
	}
	/* 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;
	min-width: 1160;
	}
	.section {
	padding: 120px 0;
	}
	.section > h2 {
	font-size: 50px;
	line-height: 1;
	text-align: center;
	margin-bottom: 20px;
	}
	.section > p {
	font-size: 22px;
	color: #666;
	text-align: center;
	margin-bottom: 70px;
	}

	/* imageType02 */
	.image__wrap {}
	.image__inner {
	display: flex;
	justify-content: space-between;
	}
	.image {
	width: 32%;
	height: 520px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	}
	/* .image.img1 {
	background: url(img/image_bg02_01.jpg) no-repeat center / cover ;
	}
	.image.img2 {
	background: url(img/image_bg02_02.jpg) no-repeat center / cover ;
	}
	.image.img3 {
	background: url(img/image_bg02_03.jpg) no-repeat center / cover ;
	} */
	.image__box {}
	.image__box img {
	/* vertical-align: top; 이미지 여백 없애기 */
	}
	.image__desc {
	position: absolute;
	left: 0;
	bottom: -100px;
	width: 100%;
	text-align: center;
	backdrop-filter: blur(10px); /* 투명도 설정 */
	padding: 23px 20px;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.3);
	transition: all 0.3s ease-in-out;
	}
	.image:hover .image__desc {
	bottom: 0;
	}
	.image:hover .image__box img {
	transform: scale(1.05); /* 마우스를 가까이하면 크게 */
	transition: all 0.6s ease-in-out; /* 크기 변화의 속도 */
	}

	.img1 .image__desc {background: rgba(167, 171, 235, 0.5);}
	.img2 .image__desc {background: rgba(244, 206, 131 ,0.5);}
	.img3 .image__desc {background: rgba(24, 35, 56 ,0.5);}
	.img1 .image__desc h3 {color: #000;}
	.img2 .image__desc h3 {color: #000;}
	.img3 .image__desc h3 {color: #fff;}
	.img1 .image__desc .more {color: #000;}
	.img2 .image__desc .more {color: #000;}
	.img3 .image__desc .more {color: #fff;}

	.image__desc h3 {
	font-size: 24px;
	margin: 5px;
	}
	.image__desc .more {
	font-size: 16px;
	}
	.image__desc .more:hover {
	text-decoration: underline;
	}

이미지 유형 (2)

⭐️ 이미지 유형 02 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역