카드 유형 (3)

728x90

⭐️ 카드 유형 03 ⭐️

01. 레이아웃 구상하기

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

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

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

 <section id="cardType03">    // <section>과 같이 시멘틱 마크업을 하면 제목을 반드시 적어줘야 하므로 <h2>를 작성합니다. (이후 눈에 보이지 않도록 숨겨놓기)
    <h2>펠트 공예 후기</h2>
    <article calss="card">
        <h3>카드 제목</h3>
        <p>카드 내용</p>
    </article>
    <article calss="card">
        <h3>카드 제목</h3>
        <p>카드 내용</p>
    </article>
    <article calss="card">
        <h3>카드 제목</h3>
        <p>카드 내용</p>
    </article>
</section>

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

     /* font */
    @import url('https://webfontworld.github.io/score/SCoreDream.css');
 
    .score {        /* 전체 글자 설정 */
        font-family: 'SCoreDream';
        font-weight: 300;    /* 기본 글자 두께*/
    }
 
    /* reset */
    * {             /* 브라우저 기본 여백 없애기 */
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;     /* 파랑색 밑줄로 보이는 a 링크의 기본 설정 바꾸기 */
        color: #000;
    }
    img {
        width: 100%;     /* 이미지 파일도 들어가므로 너비 100%로 설정해두자 */
    }
    h1, h2, h3, h4, h5, h6 {     /* 굵게 설정되어 있는 기본 글자 두께를 보통 굵기로 바꾸기 */
        font-weight: normal;
    }

03. 레이아웃의 큰 틀에 선택자 설정 : <body>

     <section id="cardType03" class="card__wrap score section">    // 전체 글자 설정 및 경로 파악을 위한 선택자 이름 입력
    <div class="card__inner container">       // 카드 상자 3개 묶음. 전체 container 선택자 이름로 그룹화
        <h2>펠트 공예 후기</h2>
        <article calss="card">
            <h3>카드 제목</h3>
            <p>카드 내용</p>
        </article>
        <article calss="card">
            <h3>카드 제목</h3>
            <p>카드 내용</p>
        </article>
        <article calss="card">
            <h3>카드 제목</h3>
            <p>카드 내용</p>
        </article>
    </div>
</section>

04. 레이아웃의 큰 틀 css 설정 : <style>

     /* common : 다른 페이지에서도 공통적으로 사용하는 css 함부로 수정 불가*/
    .container {          /* 카드 상자 3개를 모두 묶는 큰 상자 */
        width: 1160px;       /* 큰 상자 너비 설정 : 레이아웃 스케치의 수치 확인 */
        padding: 0 20px;     /* 상하 여백 설정 */
        margin: 0 auto;      /* 중앙 정렬 */
        min-width: 1160;
    }
    .section {
        padding: 120px 0;    /* 좌우 여백 설정 */
    }
    .section > h2 {         /* section 의 바로 밑의 자식인 h2 에만 적용 */
        font-size: 50px;
        line-height: 1;        /* 줄간격 */
        text-align: center;    /* 글자 중앙 정렬 */
        margin-bottom: 20px;   /* 밑 여백 설정 */
    }
    .section > p {
        font-size: 22px;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
 
    /* cardType03 */
    body {
        background-color: #2254c3;   /* 브라우저 배경색 */
    }
    .card__inner {
        display: flex;    /* 카드 가로 정렬 */
    }
    .card__inner .card {
        width: 33.3333%;  /* 너비 비율 */
        padding: 26px;    /* container와 카드 사이의 여백 */
        background-color: #fff;
    }
    .card__inner .card:nth-child(1) {
        border-right: 1px solid #eee;    /* 카드 사이의 점선 만들기 */
    }
    .card__inner .card:nth-child(2) {
        border-right: 1px solid #eee;
    }

05. 세부 상자 / 그룹화 및 class 로 이름 설정 : <body>

레이아웃을 구성하는 이미지, 사용자 이름 등에 대한 내용을 담는 모든 상자를 생각하고 그룹화 합니다.
그룹화 과정에서는 style (css) 적용을 위해, class 로 겹치지 않는 이름을 설정하는 것이 중요합니다. ☛ 선택자

     <section id="cardType03" class="card__wrpa score section">
    <h2 class="blind">펠트 공예 후기</h2>      // css 에서 눈에 보이지 않게 숨겨놓기 위해 이름 설정
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">    // 카드 상자의 상단을 구성하는 큰 이미지와 상단 오른쪽에 위치한 상자(span) 그룹화.
                <img src="img/card_bg03_01.jpg" alt="버튼홀 스티치와 끼워박기 하는 방법">   // 이미지 넣고, W3C 준수를 위해 alt 내용 입력
                <figcaption>펠트 공예</figcaption>     // 밑의 이미지 span 과 겹치므로 figcaption 로 시멘틴 마크업
            </figure>
            <div class="card__contents">     // 카드 상자의 중간에 들어가는 제목과 내용을 그룹화
                <h3>펠트 공예 : 버튼홀 스티치와 끼워박기 하는 방법에 대해 알아보아요! 알아보아요! 알아보아요!</h3>   // 줄 넘김 효과를 보기 위해 길게 입력 
                <p>버튼홀 스티치는 펠트지 두 장을 맞대어 바느질하거나 펠트지 둘레를 정리할 때 사용되는 바느질 방법입니다. 1. 매듭이 보이지 않게 펠트지 않쪽에서 시작하여 바늘을 통과시킵니다.</p>
            </div>
            <div class="card__footer">       // 카드 상자의 하단을 구성하는 사용자 이름과 내용 및 이미지 그룹화
                <h4>바느질하기 좋은날 <em>1일 전</em></h4>
                <span><img src="img/card_bg03_icon01.png" alt="사용자 : 바느질하기 좋은날"></span>
            </div>
        </article>
        <article class="card">     // * 복사 : 위의 카드 하나를 두 번 복사하고 나서 세부 내용 바꾸기
            <figure class="card__header">
                <img src="img/card_bg03_01.jpg" alt="버튼홀 스티치와 끼워박기 하는 방법">
                <figcaption>펠트 공예</figcaption>
            </figure>
            <div class="card__contents">
                <h3>펠트 공예 : 버튼홀 스티치와 끼워박기 하는 방법에 대해 알아보아요! 알아보아요! 알아보아요!</h3>
                <p>버튼홀 스티치는 펠트지 두 장을 맞대어 바느질하거나 펠트지 둘레를 정리할 때 사용되는 바느질 방법입니다. 1. 매듭이 보이지 않게 펠트지 않쪽에서 시작하여 바늘을 통과시킵니다.</p>
            </div>
            <div class="card__footer">
                <h4>바느질하기 좋은날 <em>1일 전</em></h4>
                <span><img src="img/card_bg03_icon01.png" alt="사용자 : 바느질하기 좋은날"></span>
            </div>
        </article>
        <article class="card">     // * 복사
            <figure class="card__header">
                <img src="img/card_bg03_01.jpg" alt="버튼홀 스티치와 끼워박기 하는 방법">
                <figcaption>펠트 공예</figcaption>
            </figure>
            <div class="card__contents">
                <h3>펠트 공예 : 버튼홀 스티치와 끼워박기 하는 방법에 대해 알아보아요! 알아보아요! 알아보아요!</h3>
                <p>버튼홀 스티치는 펠트지 두 장을 맞대어 바느질하거나 펠트지 둘레를 정리할 때 사용되는 바느질 방법입니다. 1. 매듭이 보이지 않게 펠트지 않쪽에서 시작하여 바늘을 통과시킵니다.</p>
            </div>
            <div class="card__footer">
                <h4>바느질하기 좋은날 <em>1일 전</em></h4>
                <span><img src="img/card_bg03_icon01.png" alt="사용자 : 바느질하기 좋은날"></span>
            </div>
        </article>                        
    </div>

06. 세부 css 설정 : <style>

카드 상단 css

     .card {}
    .card__header {
        position: relative;     /* 두번째, 카드의 오른쪽 모서리쪽으로 위치 고정할 기준점 설정 */
    }
    .card__header img {
        border-radius: 10px;
        box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }
    .card__header figcaption {
        position: absolute;     /* 첫번쨰, 카드의 오른쪽 모서리쪽으로 위치 고정 */
        right: 10px;
        top: 10px;
        padding: 6px 16px;
        border-radius: 50px;    /* 곡률 설정 */
        background-color: #fff;
        text-align: center;
        font-size: 14px;
        color: #7b7b7b;
    }

카드 중간 내용 css

     .card__contents {}
    .card__contents h3 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 10px;
        overflow: hidden;               /* 줄 넘김 효과 */
        text-overflow: ellipsis;        /* 줄 넘김 효과 */
        display: -webkit-box;           /* 줄 넘김 효과 */
        -webkit-line-clamp: 2;          /* 줄 넘김 효과 */
        -webkit-box-orient: vertical;   /* 줄 넘김 효과 */
    }
    .card__contents p {
        color: #666;
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
 
    }

카드 하단 css

     .card__footer {
        display: flex;
        justify-content: flex-end;  /* display: flex;의 수평 방향 정렬 방식*/
    }
    .card__footer h4 {
        text-align: right;
        color: #DD2A2A;
    }
    .card__footer em {
        display: block;
        color: #666;
        font-style: normal;   /* 글자 기울기 없애기 */
    }
    .card__footer span {
        width: 40px;
        height: 40px;
        background: #000;
        border-radius: 50%;
        overflow: hidden;
        display: block;
        margin-left: 10px;
        margin-top: -3px;    /* margin 만 - 로 설정 가능 */
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);  /* 그림자 넣기 */
    }

03. 결과보기

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

☛ 원본 소스 보기

728x90

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

이미지 유형 (3) (2)	2022.08.22
이미지 유형 (2) (2)	2022.08.18
이미지 유형 (1) (4)	2022.08.17
카드 유형 (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` + `/` `⇧` + `/`

깜냥깜냥🐾코딩 혜윰

카드 유형 (3)

⭐️ 카드 유형 03 ⭐️

01. 레이아웃 구상하기

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

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

03. 레이아웃의 큰 틀에 선택자 설정 : <body>

04. 레이아웃의 큰 틀 css 설정 : <style>

05. 세부 상자 / 그룹화 및 class 로 이름 설정 : <body>

06. 세부 css 설정 : <style>

03. 결과보기

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

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<section id="cardType03"> // <section>과 같이 시멘틱 마크업을 하면 제목을 반드시 적어줘야 하므로 <h2>를 작성합니다. (이후 눈에 보이지 않도록 숨겨놓기)
	<h2>펠트 공예 후기</h2>
	<article calss="card">
	<h3>카드 제목</h3>
	<p>카드 내용</p>
	</article>
	<article calss="card">
	<h3>카드 제목</h3>
	<p>카드 내용</p>
	</article>
	<article calss="card">
	<h3>카드 제목</h3>
	<p>카드 내용</p>
	</article>
	</section>

	/* font */
	@import url('https://webfontworld.github.io/score/SCoreDream.css');

	.score { /* 전체 글자 설정 */
	font-family: 'SCoreDream';
	font-weight: 300; /* 기본 글자 두께*/
	}

	/* reset */
	* { /* 브라우저 기본 여백 없애기 */
	margin: 0;
	padding: 0;
	}
	a {
	text-decoration: none; /* 파랑색 밑줄로 보이는 a 링크의 기본 설정 바꾸기 */
	color: #000;
	}
	img {
	width: 100%; /* 이미지 파일도 들어가므로 너비 100%로 설정해두자 */
	}
	h1, h2, h3, h4, h5, h6 { /* 굵게 설정되어 있는 기본 글자 두께를 보통 굵기로 바꾸기 */
	font-weight: normal;
	}

	<section id="cardType03" class="card__wrap score section"> // 전체 글자 설정 및 경로 파악을 위한 선택자 이름 입력
	<div class="card__inner container"> // 카드 상자 3개 묶음. 전체 container 선택자 이름로 그룹화
	<h2>펠트 공예 후기</h2>
	<article calss="card">
	<h3>카드 제목</h3>
	<p>카드 내용</p>
	</article>
	<article calss="card">
	<h3>카드 제목</h3>
	<p>카드 내용</p>
	</article>
	<article calss="card">
	<h3>카드 제목</h3>
	<p>카드 내용</p>
	</article>
	</div>
	</section>

	/* common : 다른 페이지에서도 공통적으로 사용하는 css 함부로 수정 불가*/
	.container { /* 카드 상자 3개를 모두 묶는 큰 상자 */
	width: 1160px; /* 큰 상자 너비 설정 : 레이아웃 스케치의 수치 확인 */
	padding: 0 20px; /* 상하 여백 설정 */
	margin: 0 auto; /* 중앙 정렬 */
	min-width: 1160;
	}
	.section {
	padding: 120px 0; /* 좌우 여백 설정 */
	}
	.section > h2 { /* section 의 바로 밑의 자식인 h2 에만 적용 */
	font-size: 50px;
	line-height: 1; /* 줄간격 */
	text-align: center; /* 글자 중앙 정렬 */
	margin-bottom: 20px; /* 밑 여백 설정 */
	}
	.section > p {
	font-size: 22px;
	font-weight: 300;
	color: #666;
	text-align: center;
	margin-bottom: 70px;
	}

	/* cardType03 */
	body {
	background-color: #2254c3; /* 브라우저 배경색 */
	}
	.card__inner {
	display: flex; /* 카드 가로 정렬 */
	}
	.card__inner .card {
	width: 33.3333%; /* 너비 비율 */
	padding: 26px; /* container와 카드 사이의 여백 */
	background-color: #fff;
	}
	.card__inner .card:nth-child(1) {
	border-right: 1px solid #eee; /* 카드 사이의 점선 만들기 */
	}
	.card__inner .card:nth-child(2) {
	border-right: 1px solid #eee;
	}

	<section id="cardType03" class="card__wrpa score section">
	<h2 class="blind">펠트 공예 후기</h2> // css 에서 눈에 보이지 않게 숨겨놓기 위해 이름 설정
	<div class="card__inner container">
	<article class="card">
	<figure class="card__header"> // 카드 상자의 상단을 구성하는 큰 이미지와 상단 오른쪽에 위치한 상자(span) 그룹화.
	<img src="img/card_bg03_01.jpg" alt="버튼홀 스티치와 끼워박기 하는 방법"> // 이미지 넣고, W3C 준수를 위해 alt 내용 입력
	<figcaption>펠트 공예</figcaption> // 밑의 이미지 span 과 겹치므로 figcaption 로 시멘틴 마크업
	</figure>
	<div class="card__contents"> // 카드 상자의 중간에 들어가는 제목과 내용을 그룹화
	<h3>펠트 공예 : 버튼홀 스티치와 끼워박기 하는 방법에 대해 알아보아요! 알아보아요! 알아보아요!</h3> // 줄 넘김 효과를 보기 위해 길게 입력
	<p>버튼홀 스티치는 펠트지 두 장을 맞대어 바느질하거나 펠트지 둘레를 정리할 때 사용되는 바느질 방법입니다. 1. 매듭이 보이지 않게 펠트지 않쪽에서 시작하여 바늘을 통과시킵니다.</p>
	</div>
	<div class="card__footer"> // 카드 상자의 하단을 구성하는 사용자 이름과 내용 및 이미지 그룹화
	<h4>바느질하기 좋은날 <em>1일 전</em></h4>
	<span><img src="img/card_bg03_icon01.png" alt="사용자 : 바느질하기 좋은날"></span>
	</div>
	</article>
	<article class="card"> // * 복사 : 위의 카드 하나를 두 번 복사하고 나서 세부 내용 바꾸기
	<figure class="card__header">
	<img src="img/card_bg03_01.jpg" alt="버튼홀 스티치와 끼워박기 하는 방법">
	<figcaption>펠트 공예</figcaption>
	</figure>
	<div class="card__contents">
	<h3>펠트 공예 : 버튼홀 스티치와 끼워박기 하는 방법에 대해 알아보아요! 알아보아요! 알아보아요!</h3>
	<p>버튼홀 스티치는 펠트지 두 장을 맞대어 바느질하거나 펠트지 둘레를 정리할 때 사용되는 바느질 방법입니다. 1. 매듭이 보이지 않게 펠트지 않쪽에서 시작하여 바늘을 통과시킵니다.</p>
	</div>
	<div class="card__footer">
	<h4>바느질하기 좋은날 <em>1일 전</em></h4>
	<span><img src="img/card_bg03_icon01.png" alt="사용자 : 바느질하기 좋은날"></span>
	</div>
	</article>
	<article class="card"> // * 복사
	<figure class="card__header">
	<img src="img/card_bg03_01.jpg" alt="버튼홀 스티치와 끼워박기 하는 방법">
	<figcaption>펠트 공예</figcaption>
	</figure>
	<div class="card__contents">
	<h3>펠트 공예 : 버튼홀 스티치와 끼워박기 하는 방법에 대해 알아보아요! 알아보아요! 알아보아요!</h3>
	<p>버튼홀 스티치는 펠트지 두 장을 맞대어 바느질하거나 펠트지 둘레를 정리할 때 사용되는 바느질 방법입니다. 1. 매듭이 보이지 않게 펠트지 않쪽에서 시작하여 바늘을 통과시킵니다.</p>
	</div>
	<div class="card__footer">
	<h4>바느질하기 좋은날 <em>1일 전</em></h4>
	<span><img src="img/card_bg03_icon01.png" alt="사용자 : 바느질하기 좋은날"></span>
	</div>
	</article>
	</div>

	.card {}
	.card__header {
	position: relative; /* 두번째, 카드의 오른쪽 모서리쪽으로 위치 고정할 기준점 설정 */
	}
	.card__header img {
	border-radius: 10px;
	box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
	}
	.card__header figcaption {
	position: absolute; /* 첫번쨰, 카드의 오른쪽 모서리쪽으로 위치 고정 */
	right: 10px;
	top: 10px;
	padding: 6px 16px;
	border-radius: 50px; /* 곡률 설정 */
	background-color: #fff;
	text-align: center;
	font-size: 14px;
	color: #7b7b7b;
	}

	.card__contents {}
	.card__contents h3 {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 10px;
	overflow: hidden; /* 줄 넘김 효과 */
	text-overflow: ellipsis; /* 줄 넘김 효과 */
	display: -webkit-box; /* 줄 넘김 효과 */
	-webkit-line-clamp: 2; /* 줄 넘김 효과 */
	-webkit-box-orient: vertical; /* 줄 넘김 효과 */
	}
	.card__contents p {
	color: #666;
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;

	}

	.card__footer {
	display: flex;
	justify-content: flex-end; /* display: flex;의 수평 방향 정렬 방식*/
	}
	.card__footer h4 {
	text-align: right;
	color: #DD2A2A;
	}
	.card__footer em {
	display: block;
	color: #666;
	font-style: normal; /* 글자 기울기 없애기 */
	}
	.card__footer span {
	width: 40px;
	height: 40px;
	background: #000;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	margin-left: 10px;
	margin-top: -3px; /* margin 만 - 로 설정 가능 */
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05); /* 그림자 넣기 */
	}

카드 유형 (3)

⭐️ 카드 유형 03 ⭐️

01. 레이아웃 구상하기

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

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

03. 레이아웃의 큰 틀에 선택자 설정 : <body>

04. 레이아웃의 큰 틀 css 설정 : <style>

05. 세부 상자 / 그룹화 및 class 로 이름 설정 : <body>

06. 세부 css 설정 : <style>

03. 결과보기

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

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역