📒 처음 시도
📙 HTML 코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카드 UI만들기</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="box">
<img class="card-img" src="card/img/thumbnail.png" alt="카드 사진" >
<h1 class="card-title">그것을 피가 청춘을 것이다</h1>
<p class="card-content">청춘의 하였으며, 이것은 몸이 때문이다. 사는가 고동을 용기가 충분히 청춘 것이다. 얼마나 반짝이는 소담스...</p>
<span class="card-more">Read</span>
</div>
</body>
</html>📘 CSS 코드
.box {
margin: 60px;
width: 288px;
height: 348px;
box-shadow: 2px 2px 8px 0px #0000001A;
border-radius: 8px;
}
.card-img {
width: 288px;
height: 196px;
border-radius: 8px 8px 0 0;
}
.card-title {
width: 200px;
height: 19px;
font-size: 14px;
font-weight: 700;
margin-left: 16px;
}
.card-content {
width: 256px;
height: 40px;
font-size: 10px;
font-weight: 400;
margin: 0 16px 19px 16px;
}
.card-more {
font-size: 14px;
font-weight: 700;
text-decoration: underline;
margin-left: 16px;
}확실히 수업을 들을 때 머릿속으로 이해는 해도 직접 실습하며 코드를 쳐보면 생각대로 잘 되지 않는다.
분명 내 머릿속으로는 잘 될 거 같았는데 실제로는 잘 돌아가지 않는 경우가 종종 있다.
이번 실습은 피그마를 참고해서 처음 해보았는데 확실피 피그마를 이용하니까 대략적인 수치들을 알 수 있어서 편리했다.
그동안 배운 내용들로 따라해보았는데 내가 위의 코드에서 해결하지 못한 2가지가 있다.
첫 번째, box 클래스에 border-radius을 주었는데 박스의 아랫부분은 잘 적용되었지만 윗부분은 이미지에 가려져서 적용되지 않았다.
두 번째, 긴 문장을 말줄임표를 통해 줄여야 하는데 줄여지지않았다.
시간이 부족한 관계로 우선 적용된 것처럼 보이게 구현을 해보았는데 그 결과가 맨 위의 사진이다.
📒 완성 작품
📙 HTML 코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card UI 만들기</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/card.css">
</head>
<body>
<h1 class="a11y-hidden">Card UI</h1>
<article class="card-item">
<img src="img/thumbnail.png" alt="">
<div class="card-text">
<h2 class="title">그것을 피가 청춘을 것이다</h2>
<p>청춘의 하였으며, 이것은 몸이 때문이다. 사는가 고동을 용기가 충분히 청춘 것이다. 얼마나 반짝이는 소담스...운 열락의 아름다우냐? 가지에 같지 청춘의 옷을 목숨을 피어나기 오직 군영과 칼이다. 거친 끓는 예가 뿐이다. 방지하는 꽃이 청춘을 생명을 이것이다. 인간의 거선의 피고, 모래뿐일 작고 우리 평화스러운 있는가?</p>
<a href="#" class="underline">Read</a>
</div>
</article>
</body>
</html>📘 CSS 코드
body {
margin: 30px;
}
.card-item {
width: 288px;
background: #fff;
box-shadow: 2px 2px 8px 0px #0000001A;
border-radius: 8px;
overflow: hidden;
}
.card-item img {
width: 100%;
aspect-ratio: 288/196;
}
.card-item a {
text-decoration: none;
color: #29363D;
}
.card-text {
padding: 24px 16px 16px;
}
.card-text .title {
font-size: 14px;
}
.card-text .title + p {
font-size: 10px;
color: #5a6a72;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
}
.card-item .underline {
font-size: 14px;
font-weight: 700;
text-decoration: underline;
margin-left: 6px;
}
h2 {
margin: 0;
}
p {
margin-top: 12px
}
.a11y-hidden {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}처음 작성한 코드에서는 카드 전체를 하나의 div로 묶어주었지만
다시 작성한 코드에서는 카드 전체를 article로 묶어주고 사진부터 read까지 card-text라는 div로 다시 한번 묶어주었다.
내가 위에서 해결하지 못했던 첫 번째는 overflow를 이용하여 해결해주었다.
overflow는 넘칠 경우 컨텐츠가 상자 밖으로 보여지는 visible이 기본값으로 정해져있다.
이미지가 상자를 넘쳤기 때문에 상자 밖으로 보여져 border-radius 속성이 적용되었어도 가려져서 보이지 않았던 것이다.
그래서 넘치는 부분은 잘려서 보이지 않게 해주는 hidden을 이용하여 상자의 border-radius 속성이 잘 보이도록 구현하였다.
📍 overflow
: 요소 내의 컨텐츠가 너무 커서 요소 내에 모두 보여주기 힘들 때 그것을 어떻게 보여줄지 지정
- visible (기본값) : 넘칠 경우 컨텐츠가 상자 밖으로 보여짐
- hidden : 넘치는 부분은 잘려서 보여주지 않음
- scroll : 스크롤바가 추가되어 스크롤 가능(가로, 세로)
- auto : 컨텐츠 양에 따라 스크롤바를 추가할지 말지 자동으로 결정
.card-text .title + p {
font-size: 10px;
color: #5a6a72;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
}위에서 두 번째로 해결하지 못한 말 줄임표를 구현하기 위해 인접 형제 선택자를 이용하여 말줄일 영역인 p 태그를 선택하였다.
overflow 속성 값을 hidden으로하여 HTML 요소의 크기를 넘어갈 경우 보이지 않게 해주었다.
그리고 text-overflow 속성 값을 ellipsis로 하여 말줄임표를 이용해 문자열을 생략해줍니다.
display 속성 값을 -webkit-box로 하고 -webkit-box-orient 속성 값을 vertical로 해주어 블록 컨테이너의 문자열을 지정 줄 수만큼 제한 할 수 있는 -webkit-line-clamp 속성이 동작할 수 있도록 해줍니다.
-webkit-line-clamp을 이용해 제한할 줄 수를 2줄로 설정해주고
word-break 속성 값을 break-all로 하여 문자를 강제로 줄바꿈 할 수 있도록 해준다.
- word-wrap : 비아시아 언어의 줄바꿈 제어
- word-break : 아시아, 비아시아 언어의 줄바꿈 제어
위에서는 Read를 span 태그로 감싸주었지만 Read를 누르면 읽을 수 있는 페이지로 이동해야하기 때문에 a 태그로 감싸주었다.
