** 영상으로 보실 분은 아래 주소를 클릭하세요!
https://www.youtube.com/watch?v=nFC2X30Pm6k&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=7
** 아래 작성될 보드프리뷰는 HTML중급편으로 글자줄이는 CSS를 모른다면 아래 기초편 중 글자줄임을 보고 오는 것이 좋습니다.
https://ossam5.tistory.com/80?category=898948
[CSS3강좌] 19강 CSS 텍스트줄임
** 동영상으로 보실분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=YCwDcJygDkw 1. 글자줄임이란? - 영역보다 글자가 많아서 넘칠때 [...]기호를 처리하는 것을 의미 2. 한줄 텍스트인 경우..
ossam5.tistory.com
** 강의 전 제공 파일
1. 한줄 글자줄임 효과
- 위와 같은 병원 소식을 만들어보도록 하겠습니다.
- 병원소식의 제목이 길면 [...]표시가 나도록 하겠습니다.
## HTML코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Board Preview01</title>
<link rel="stylesheet" href="board01.css">
</head>
<body>
<div class="news">
<h3>병원소식</h3>
<a href="#" class="more" title="병원소식 더보기">
<img src="images/more.gif" alt="더보기 아이콘">
</a>
<ul>
<li>
<a href="#">서울대학교 어린이병원 "척수이형성증 관리 가이드북" 출판</a>
<span class="date">2020-05-11</span>
</li>
<li>
<a href="#">디지털 치료제로 비만 치료의 새 길 연다</a>
<span class="date">2020-05-06</span>
</li>
<li>
<a href="#">서울대병원, 화훼농가 돕기 릴레이 캠페인 동참</a>
<span class="date">2020-05-04</span>
</li>
<li>
<a href="#">잠잘 때 나도 모르게 움직이는 다리, 왜?</a>
<span class="date">2020-05-04</span>
</li>
</ul>
</div>
</body>
</html>- [병원소식]은 타이틀이라 <h3> 태그로 작성하였습니다.
- 더보기 아이콘은 클릭시 병원소식 페이지로 이동되야 하므로 <a> 태그로 작성하였는데, 추후 리스트 내부에도 <a> 태그가 있기 때문에 클래스명을 [more]로 처리하였습니다.
- 리스트들을 2개이상 나열되어 있기 때문에 [ul > li]로 작성하였습니다.
- 글자줄임을 줄 뉴스의 제목은 클릭 시 해당 서브페이지로 가야 하기 때문에 <a> 태그로 작성했습니다.
- 날짜 파트는 해당 구역의 오른쪽에 붙어야 하므로 <span> 태그로 작성해서 클래스를 [date]로 처리했습니다.
## CSS코드
@charset "UTF-8";
/* base - 브라우저 초기화작업 */
*{ padding: 0; margin: 0; } /* 태그별로 다른 여백을 제거 */
li{ list-style: none; } /* 번호나 기호를 제거 */
a{ text-decoration: none; } /* 밑줄 제거 */
.news{
width: 540px; height: 270px;
border: 2px solid #333;
margin: 50px; /* 테두리 바깥쪽 여백 */
padding: 30px; /* 테두리 안쪽 여백 */
box-sizing: border-box; /* 테두리와 패딩 수치를 영역안으로 인사이드 처리 */
position: relative; /* 자손의 앱솔루트 기준을 현재 요소로 변경 */
}
.news h3{
width: 100%; /* 부모영역 전체 상속 */
height: 50px; font-size: 18px; color: #333;
}
.news .more{
position: absolute; /* 기본 기준 : body */
right: 30px; top: 30px;
}
.news ul{
width: 100%; /* 부모상속 - 패딩와 테두리영역 제외 */
height: calc(100% - 50px); /* 부모영역을 상속 - 형높이 */
}
.news li{
width: 100%; height: 25%; /* 1/4 */
line-height: 39px;
}
.news li a{ /* more가 포함되면 안되서 선택 */
float: left; /* 부모영역의 왼쪽으로 붙임 */
font-size: 14px; color: #333;
/* 1. 영역설정 */
width: 330px; height: 100%;
/* 2. 글자줄임공식 */
white-space: nowrap; /* 텍스트 한줄 처리 */
overflow: hidden; /* 넘어간 자손 안보이게 처리 */
text-overflow: ellipsis; /* ...처리 */
}
.news li a::before{
content: url(images/dot.gif);
position: relative; top: -3px;
margin-right: 10px;
}
.news .date{
float: right; /* 부모영역의 오른쪽으로 붙임 */
font-size: 14px; color: #999;
}- 해당 코드를 잘 이해할 수 있도록 옆에 주석들을 정리해보았습니다.
- 상세 설명은 유튜브로 보시면 더 자세한 설명을 들을 수 있으니 영상으로 보는 것을 추천합니다.
- 특히, 한줄 글자 줄임 하는 파트는 반드시 영역(width/height)로 지정되어야 합니다.
- 그리고 white-space: nowrap; 속성으로 부모영역과 관계없이 텍스트가 줄바꿈 처리되지 않게 설정해야 합니다.
- 그리고 부모영역을 넘어간 글자는 안보이도록 overflow: hidden; 을 주어야 합니다.
- 마지막을 잘린 글자 부분에 [...]표시가 들어가도록 text-overflow: ellipsis; 를 줘야 합니다.
- 이파트들을 잘 알고 있으면 글자줄임은 쉽게 제작할 수 있습니다.
2. 여러줄 글자줄임 효과
- 이번에는 여러줄 글자줄임효과와 마우스 오버시 4개의 선이 각각 움직이는 그런 컨텐츠를 제작해보도록 하겠습니다.
## HTML코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Board Preview02</title>
<link rel="stylesheet" href="board02.css">
</head>
<body>
<div class="management">
<h3>
<span class="eng">Management Disclosure</span>
<span class="kor">경영공시</span>
</h3>
<ul>
<li>
<a href="#">
<h4>[공시] 2020년도 1분기말 대주주에 대한 신용공여 현황</h4>
<p>여신전문금융업법 제49조의2 제3항, 제50조 제4항 및 동법 시행령 제19조의 4에 의거, 2020년도 1분기말 기준 대주주에 대한 신용공여 현황을 첨부와 같이 공시합니다.</p>
<span class="date">2020.04.17</span>
<span class="gobtn">이동</span>
<span class="tline"></span>
<span class="bline"></span>
<span class="lline"></span>
<span class="rline"></span>
</a>
</li>
<li>
<a href="#">
<h4>[공시] 정기주주총회 개최 내역</h4>
<p>금융회사의 지배구조에 관한 법률 제41조 제1항 및 동법 시행령 제32조에 따라 당사 정기주주총회 개최 내역을 첨부와 같이 공시합니다.</p>
<span class="date">2020.03.27</span>
<span class="gobtn">이동</span>
<span class="tline"></span>
<span class="bline"></span>
<span class="lline"></span>
<span class="rline"></span>
</a>
</li>
<li>
<a href="#">
<h4>[공시] 임원선임 내역</h4>
<p>‘금융회사의 지배구조에 관한 법률’ 제7조 제2항, 제3항 및 ‘금융회사 지배구조 감독규정’ 제3조 제1항 등에 의거, 임원 선임 내역을 첨부와 같이 공시합니다.</p>
<span class="date">2020.03.27</span>
<span class="gobtn">이동</span>
<span class="tline"></span>
<span class="bline"></span>
<span class="lline"></span>
<span class="rline"></span>
</a>
</li>
<li>
<a href="#">
<h4>[공시] 2019년도 하반기 나이스에프앤아이(주) 경영공시</h4>
<p>여신전문금융업법 제54조의2 제1항 및 여신전문금융업감독규정 제23조, 여신전문금융업 통일경영공시기준 제6조 제1항 제1호에 의거, 2019년도 하반기 경영현황 자료를 공시합니다.</p>
<span class="date">2020.03.24</span>
<span class="gobtn">이동</span>
<span class="tline"></span>
<span class="bline"></span>
<span class="lline"></span>
<span class="rline"></span>
</a>
</li>
<li>
<a href="#">
<h4>[공시] 직전 사업연도 대비 배당액 20%이상 변경사실</h4>
<p>여신전문금융업법 제54조의2 및 감독규정 제23조에 의거 여신전문금융업 통일경영공시기준에 따라 첨부와 같이 공시합니다.</p>
<span class="date">2020.03.24</span>
<span class="gobtn">이동</span>
<span class="tline"></span>
<span class="bline"></span>
<span class="lline"></span>
<span class="rline"></span>
</a>
</li>
<li>
<a href="#">
<h4>[공시] 직전 사업연도 대비 당기순이익의 30%이상 변경사실</h4>
<p>여신전문금융업법 제54조의2 및 감독규정 제23조에 의거 여신전문금융업 통일경영공시기준에 따라 첨부와 같이 공시합니다.</p>
<span class="date">2020.03.24</span>
<span class="gobtn">이동</span>
<span class="tline"></span>
<span class="bline"></span>
<span class="lline"></span>
<span class="rline"></span>
</a>
</li>
</ul>
</div>
</body>
</html>- 타이틀 부분은 <h3> 태그로 작성하였습니다. 근데 영문과 국문의 스타일이 달라 <span> 태그를 주었습니다.
- 그래서 영문에는 클래스를 [eng]로, 국문은 클래스를 [kor]로 줘서 CSS에 다른 스타일을 줄 예정입니다.
- 역시 경영공시들을 2개 이상 나열되어 있기 때문에 [ul > li]형태로 리스트태그로 처리했습니다.
- 타이틀 부분은 <h4> 태그로 작성, 문단 부분은 <p> 태그로 작성했습니다.
- 리스트에 생기는 hover 라인은 2개정도라면 ::after 선택자나 ::before 선택자를 이용하지만 4방면이 전부 달라 <span> 태그에 각각의 클래스를 줘서 처리했습니다.
- 마우스 hover시 생기는 이동버튼 역시 <span> 태그에 클래스를 [gobtn]줘서 처리했습니다.
## CSS 코드
@charset "utf-8";
/* base */
*{
padding: 0; margin: 0;
font-size: 14px; color: #000;
}
li{ list-style: none; }
a{ text-decoration: none; }
.management{
width: 1200px; height: 880px;
margin: 0 auto; /* 블록요소가 부모영역의 가로 가운데 처리 */
padding: 40px 0; box-sizing: border-box;
}
.management h3{
width: 100%; height: 140px;
text-align: center;
}
.management h3 span{
display: block; /* 수직나열 처리 */
}
.management .eng{
height: 70px; font-size: 40px; font-weight: bold;
}
.management .kor{
height: 70px; font-size: 28px; font-weight: normal;
}
.management ul{
width: 100%; height: 660px;
}
.management li{
float: left; /* 수평나열 처리 */
width: 386px; height: 310px;
margin-right: 21px;
}
.management li:nth-child(3n){ /* 3의 배수번째 여백없앰 */
margin-right: 0;
}
.management li:nth-child(-n+3){ /* 1~3번째 선택 */
margin-bottom: 20px;
}
.management a{
display: block; /* 영역이 들어가게 처리 */
width: 100%; height: 100%; /* 부모영역전부상속 */
border: 1px solid #ccc;
padding: 35px;
box-sizing: border-box; /* 패딩과 테두리 수치를 영역안으로 인사이드 처리 */
position: relative; /* 앱솔루트받은 요소의 기준을 현재 요소로 변경 */
}
.management h4{
width: 100%; height: 30px;
line-height: 30px; /* 세로가운데 처리 */
margin-bottom: 20px;
font-size: 18px; font-weight: bold;
white-space: nowrap; /* 한줄로 처리 */
overflow: hidden; /* 보이지않게 처리 */
text-overflow: ellipsis; /* ... 줄임표시 */
}
.management p{
width: 100%; height: 75px; /* 3줄 * 25 */
line-height: 25px; text-align: justify;
font-size: 16px; color: #666;
overflow: hidden; /* 넘어간 영역 보이지 않게 처리*/
display: -webkit-box;
-webkit-line-clamp: 3; /* 보여줄 줄수 표시 */
-webkit-box-orient: vertical;
}
.management .date{
position: absolute; /* 기본기준 : body */
bottom: 35px; color: #666;
}
.management .date:before{
content: '';
display: block; /* 선영역처리 */
width: 63px; height: 1px;
background-color: #ccc;
position: relative; /* 현재 위치에서 상대적 이동 */
top: -50px;
}
.management span{
transition: 0.3s; /* CSS변화에 시간차 처리 */
}
/* 버튼과 라인처리 */
.management .gobtn{
display: block; width: 150px; height: 45px;
background-color: #062d53;
color: #fff; font-weight: bold;
line-height: 45px;
padding-left: 30px; box-sizing: border-box;
background-image: url(images/nice_arrow.gif);
background-repeat: no-repeat; /* 반복안함 */
background-position: calc(100% - 20px) center;
position: absolute;
right: -10px; bottom: -10px;
z-index: 100; /* 선들보다 화면 앞쪽으로 처리 */
display: none; /* 처음엔 안보이게 처리 */
}
.management .tline{
width: calc(100% + 2px); height: 3px;
background-color: #062d53;
position: absolute;
top: -1px; left: -1px;
/* 처음엔 안보이게 처리 */
transform: scaleX(0);
transform-origin: right center;
}
.management .bline{
width: calc(100% + 2px); height: 3px;
background-color: #062d53;
position: absolute;
bottom: -1px; left: -1px;
transform: scaleX(0);
transform-origin: left center;
}
.management .lline{
width: 3px; height: calc(100% + 2px);
background-color: #062d53;
position: absolute;
top: -1px; left: -1px;
transform: scaleY(0);
transform-origin: center top;
}
.management .rline{
width: 3px; height: calc(100% + 2px);
background-color: #062d53;
position: absolute;
top: -1px; right: -1px;
transform: scaleY(0);
transform-origin: center bottom;
}
/* hover effect */
.management a:hover .gobtn{ display: block; }
.management a:hover .tline, .management a:hover .bline{ transform: scaleX(1); }
.management a:hover .lline, .management a:hover .rline{ transform: scaleY(1); }- 역시 코드옆에 설명을 각각 붙여놨습니다. 코드를 보고 공부를 하면 더 좋을 듯 합니다.
- 자세한 설명은 유튜브 강좌에 있으니 보시면 더 자세한 설명으로 수업을 들을 수 있습니다.
- 일단 <h4> 태그는 한줄 글자 줄임입니다. 영역을 설정하고 [white-space : nowrap;], [overflow: hidden;], [text-overflow: ellipsis;]를 주면 한줄 글자 줄임 처리를 할 수 있습니다.
- <p> 태그는 3줄까지 표시하면 3번째 줄에서 [...]으로 글자 줄임을 표시하게 되어 있습니다. [-webkit-line-clamp: 3;]를 통해서 숫자 3을 써서 3번째 줄에 나오게 처리하면 됩니다.
- 라인들은 수평선들을 [transform: scaleX(0);]를 통해 처음에는 안보이게 처리하고, 수직선들을 [transform: scaleY(0);]를 통해 안보이게 처리합니다.
- 그리고 마우스 오버시 둘다 1로 처리해서 다시 보이게 처리합니다.
- CSS 변화를 자연스럽게 처리하기 위해 [transition]을 통해 시간차를 주면 좋습니다.
'웹언어 > 웹컨텐츠제작꿀팁-HTMLCSS중급편' 카테고리의 다른 글
| [웹컨텐츠제작꿀팁] 7강 TabBar와 SwitchButton제작 (0) | 2022.09.08 |
|---|---|
| [웹컨텐츠제작꿀팁] 번외편 - 새해맞이 윷놀이 만들기 (0) | 2022.02.02 |
| [웹컨텐츠제작꿀팁] 5강 Hover Effect(마우스오버효과) 이렇게 써라! (0) | 2021.10.30 |
| [웹컨텐츠제작꿀팁] 4강 로그인창 이렇게 써라! (2) | 2021.10.19 |
| [웹컨텐츠제작꿀팁] 3강 체크박스 모양변경, 이렇게 써라! (0) | 2021.10.11 |
