이미지 유형 (1)

728x90

⭐️ 이미지 유형 01 ⭐️

01. 레이아웃 구상하기

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

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

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

     <section id="imageType" class="image__wrap nexon section">
    <h2>나의 쉴 곳은 어디에</h2>
    <p>우리 모두의 마음이 편안해지는 힐링 장소를 소개합니다.</p>
    <div class="image__inner container">
        <article class="image img1">
            <h3 class="tit">들꽃이 가득한 유원지에서</h3>
            <p class="desc">나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가
                품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요.</p>
            <a class="btn" href="#">자세히보기</a>
        </article>
        <article class="image img2">
            <h3 class="tit white">푸른 바람의 길목에서</h3>
            <p class="desc white">잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다. 잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다. 잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다.</p>
            <a class="btn" href="#">자세히보기</a>
        </article>
    </div>
</section>

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

     /* fonts */
    @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
 
    .nexon {
        font-family: 'NexonLv1Gothic';
        font-weight: 300;
    }
    /* reset */
    * {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: #000;
    }
    img {
        width: 570px;
    }
 
    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;
    }
 
    /* imageType01 */
    .image__wrap {}
    .image__inner {
        display: flex;
        justify-content: space-between;
    }
    .image {
        width: 49%;
        height: 370px;
        padding: 197px 30px 30px 30px;
        box-sizing: border-box;  /* padding 의 영향으로 전체 부피가 커지는 것 방지*/
    }
    .image.img1 {
        background: url(img/image_bg01_01.jpg) no-repeat center / cover ;
    }
    .image.img2 {
        background: url(img/image_bg01_02.jpg) no-repeat center / cover ;
    }
    .image .tit {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .image .tit.white {
        color: #fff
    }
    .image .desc {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;   /* clamp 줄바꿈 2줄 이상 되면 ... 으로 바뀜 - '3줄 효과' 검색해서 사용 */
        -webkit-box-orient: vertical;
    }
    .image .desc.white {
        color: #fff;
    }
    .image .btn {
        font-size: 16px;
        color: #fff;
        background: #755C2B;
        padding: 10px 20px;
        display: inline-block;
    }

03. 결과보기

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

☛ 원본 소스 보기

728x90

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

이미지 유형 (3) (2)	2022.08.22
이미지 유형 (2) (2)	2022.08.18
카드 유형 (3) (8)	2022.08.11
카드 유형 (2) (7)	2022.08.10
카드 유형 (1) (8)	2022.08.09

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

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

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

깜냥깜냥🐾코딩 혜윰

이미지 유형 (1)

⭐️ 이미지 유형 01 ⭐️

01. 레이아웃 구상하기

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

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

03. 결과보기

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

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<section id="imageType" class="image__wrap nexon section">
	<h2>나의 쉴 곳은 어디에</h2>
	<p>우리 모두의 마음이 편안해지는 힐링 장소를 소개합니다.</p>
	<div class="image__inner container">
	<article class="image img1">
	<h3 class="tit">들꽃이 가득한 유원지에서</h3>
	<p class="desc">나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가
	품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요.</p>
	<a class="btn" href="#">자세히보기</a>
	</article>
	<article class="image img2">
	<h3 class="tit white">푸른 바람의 길목에서</h3>
	<p class="desc white">잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다. 잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다. 잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다.</p>
	<a class="btn" href="#">자세히보기</a>
	</article>
	</div>
	</section>

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

	.nexon {
	font-family: 'NexonLv1Gothic';
	font-weight: 300;
	}
	/* reset */
	* {
	margin: 0;
	padding: 0;
	}
	a {
	text-decoration: none;
	color: #000;
	}
	img {
	width: 570px;
	}

	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;
	}

	/* imageType01 */
	.image__wrap {}
	.image__inner {
	display: flex;
	justify-content: space-between;
	}
	.image {
	width: 49%;
	height: 370px;
	padding: 197px 30px 30px 30px;
	box-sizing: border-box; /* padding 의 영향으로 전체 부피가 커지는 것 방지*/
	}
	.image.img1 {
	background: url(img/image_bg01_01.jpg) no-repeat center / cover ;
	}
	.image.img2 {
	background: url(img/image_bg01_02.jpg) no-repeat center / cover ;
	}
	.image .tit {
	font-size: 32px;
	margin-bottom: 10px;
	}
	.image .tit.white {
	color: #fff
	}
	.image .desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* clamp 줄바꿈 2줄 이상 되면 ... 으로 바뀜 - '3줄 효과' 검색해서 사용 */
	-webkit-box-orient: vertical;
	}
	.image .desc.white {
	color: #fff;
	}
	.image .btn {
	font-size: 16px;
	color: #fff;
	background: #755C2B;
	padding: 10px 20px;
	display: inline-block;
	}

이미지 유형 (1)

⭐️ 이미지 유형 01 ⭐️

01. 레이아웃 구상하기

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

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

03. 결과보기

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

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역