03. 카드 유형

728x90

카드유형 3

카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다.

원본 사이트 보기

원본 소스 보기

레이아웃 설정

figma로 그리드와 사이트의 레이아웃을 잡습니다.

HTML

html 소스입니다.

<body>
    <section id="cardType03" class="card__wrap SCore section">
        <h2 class="blind">다이어리의 세계</h2>
        <div class="card__inner container">
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg03_01.jpg" alt="다이어리">
                    <figcaption>Write</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요!
                    손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요!</h3>
                    <p>
                        이미지가 없어도 멋지게 다이어리를 꾸밀 수 있답니다. 그림을 그리지 못한다고 해도,
                        보여줄 이미지가 없다고 해도 겁먹지 말고 다이어리 꾸미기를 시도하세요 
                        예쁘고 멋진 다이어리로
                        다른사람들의 마음을 사로잡아요
                    </p>
                </div>
                <div class="card__footer">
                    <h4>Writelove <em>9 Resources</em></h4>
                    <span><img src="img/card_bg03_icon01.png" alt="Writelove"></span>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg03_02.jpg" alt="다이어리">
                    <figcaption>Write</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요!
                    손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요!</h3>
                    <p>
                        이미지가 없어도 멋지게 다이어리를 꾸밀 수 있답니다. 그림을 그리지 못한다고 해도,
                        보여줄 이미지가 없다고 해도 겁먹지 말고 다이어리 꾸미기를 시도하세요 
                        예쁘고 멋진 다이어리로
                        다른사람들의 마음을 사로잡아요
                    </p>
                </div>
                <div class="card__footer">
                    <h4>Writelove <em>9 Resources</em></h4>
                    <span><img src="img/card_bg03_icon02.png" alt="Writelove"></span>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg03_03.jpg" alt="다이어리">
                    <figcaption>Write</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요!손글씨를 이용하여 
                    당신의 다이어리를 예쁘게 꾸며보세요!</h3>
                    <p>
                        이미지가 없어도 멋지게 다이어리를 꾸밀 수 있답니다. 그림을 그리지 못한다고 해도,
                        보여줄 이미지가 없다고 해도 겁먹지 말고 다이어리 꾸미기를 시도하세요 
                        예쁘고 멋진 다이어리로
                        다른사람들의 마음을 사로잡아요
                    </p>
                </div>
                <div class="card__footer">
                    <h4>Writelove <em>9 Resources</em></h4>
                    <span><img src="img/card_bg03_icon03.png" alt="Writelove"></span>
                </div>
            </article>
        </div>
    </section>
</body>

CSS

css 소스입니다. figma로 설정해놓은 레이아웃이나 zaplin을 보며 적절하게 css를 설정해줍니다.

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

.SCore {
    font-family: SCoreDream;
    font-weight: 300;
}

body {}

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

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

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

img {
    width: 100%;
}

/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}

.section {
    padding: 120px 0;
}

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

/* blind : 접근성을 이유로 필요로 한다. */
.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* cardType03 */
body {
    background-color: #2254c3;
}

.card__inner {
    display: flex;
}

.card__inner .card {
    padding: 26px;
    width: 33.3333%;
    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;
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    margin-bottom: 30px;
}

.card__footer {
    display: flex;
    justify-content: end;
}

.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-color: #000;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 4px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

※iR 효과※

iR 효과(이미지 대체 효과 == alt)
이미지 대체 텍스트 제공을 위한 css 기법. 웹 접근성을 위해 사용하는 방법입니다.

※Blind※

웹 접근성을 고려한 요소 숨김처리 방법입니다.
스크린 리더는 width, height가 0인 속성들은 읽을 수 없기 대문에 사이즈는 최소 1px 이상으로 해야합니다.

※말줄임 효과※

- 말줄임 효과는 한 줄의 영역 안에 모든 글자를 넣고 싶을 때 사용합니다.
- 영역을 넘어가게 되면 ... 으로 표시됩니다.
- 말줄임 효과를 적용하고 싶은 영역에 아래 태그를 넣습니다.

한 줄 효과

{
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

두 줄 효과

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

세 줄 효과

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

728x90

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

02. 이미지 유형 - 3 (4)	2022.08.21
02. 이미지 유형 - 2 (3)	2022.08.18
02. 이미지 유형 - 1 (3)	2022.08.18
02. 카드 유형-2 (7)	2022.08.10
01. 카드 유형-1 (3)	2022.08.09

🎆Youcodein🎇

03. 카드 유형 - 3

카드유형 3

레이아웃 설정

HTML

CSS

※iR 효과※

※Blind※