실전코딩 1. 공지사항- 글자줄임 기능

by 데브수달 2023. 11. 30. 10:09

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자줄임테스트</title>
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
   <div class="notice">
    <h3>공지사항</h3>
    <ul>
        <li><a href="#"> .안녕하세요 이곳은 공지사항입니다.  </a>
            <span class="date">2023.11.01</span>
        </li>
        <li><a href="#">.안녕하세요 이곳은 공지사항입니다.  </a>
            <span class="date">2023.11.01</span>
        </li>
        <li><a href="#">.안녕하세요 이곳은 공지사항입니다.  </a>
            <span class="date">2023.11.01</span>
        </li>
        <li><a href="#">.안녕하세요 이곳은 공지사항입니다.  </a>
            <span class="date">2023.11.01</span>
        </li>
        <li><a href="#">.안녕하세요 이곳은 공지사항입니다. </a>
            <span class="date">2023.11.01</span>
        </li>
    </ul>
   </div>
</body>
</html>

@charset "utf-8";

*{padding: 0; margin: 0;}
li{
    list-style: none;
}

a{text-decoration: none;}


.notice{
    margin: 50px;
    width: 400px; height: 200px;
    background-color: rgb(161, 161, 161);
}

.notice h3{
    border-bottom: 3px solid #333;
    width: 100%; height: 40px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.notice ul{
    width: 100%; height: 150px;
    background-color: rgb(231, 238, 238);
}

.notice li{
    width: 100%; height: 30px;
   display: flex;
   justify-content: space-between;
    
}

.notice a{
    width: 250px; height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: black;

    
}

.notice .date{
    font-size: 14px; color: #999;
    line-height: 30px;
}

<공식>

{
width: 200px; height:30px;
line-height:30px; white-space:nowrap;
over-flow:hidden; text-overflow:ellipis;
}

<오늘의 필기 정리>

글자 줄임을 위해서는

텍스트 감싼 요소에 [width,height] 설정 필요

text는 부모영역 넘어가지 못하게 설정 필요

글자 줄바꿈처리가 기본설정.

>>부모영역이 넘어가도 한 줄 처리해주는 css 속성

white-space:nowrap;

>>부모영역이 넘어간 텍스트 안 보이게 처리해주는 css속성

overflow:hidden;

>>잘린 텍스트의 끝부분에 생략기호(...) 표시해주는 css속성

text-overflow:ellipsis;

728x90

'[자격증 준비] > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 슬라이드 효과(좌우,상하,페이드인아웃) (2)	2024.03.05
[웹디자인기능사 실기 준비] A-1유형 레이아웃 (1)	2023.10.09
웹디자인기능사 A-3유형 레이아웃 (0)	2023.08.30
2023년 웹디자인기능사A유형 레이아웃 (0)	2023.04.01