[CSS] text attribute(속성) / 텍스트 CSS 효과 종류로 홈페이지 만들기 예시 & 연습

1. 텍스트 쉐도우 [text-shadow] 그림자 효과 만들기

 

예시)

HTML

<p class="txt_shadow1">The western spiral arm</p>

<p class="txt_shadow2">The western spiral arm</p>

<p class="txt_shadow3">The western spiral arm</p>

<p class="txt_shadow4">The western spiral arm</p>

CSS

p{ font-size: 30px; color: #333;} 

.txt_shadow1{text-shadow: 3px 3px;}
/* 같은색상, 레이어드 효과 */

.txt_shadow2{text-shadow: 13px 8px #aaa;}
/* 가로, 세로 , 색상 */

.txt_shadow3{text-shadow: 3px 3px 2px pink;}
/* 가로, 세로, 블러 */

.txt_shadow4{text-shadow: 2px 3px 0px #ff8a00, 5px 5px 2px #7208ff, -2px -3px 2px #30e0a7;}
/* 오른쪽아래, 오른쪽아래, 왼쪽위 */

 

 

 

직접 타이핑한 종류에 따라 다양한 효과와 재미를 넣을 수 있는 text-shadow CSS 효과

 

 

 

 

보기)

See the Pen ExKOrMx by minjeong kim (@chloe1103) on CodePen.

 

 

 

---

 

 

2. text 한줄 표시 / 여러줄 표시 / 말줄임표 만들기

 

예시)

HTML

<p class="txt_1row">
	The unfashionable end of the western spiral arm of the Galaxy.
</p>

<p class="txt_2row">
      Far out in the uncharted backwaters of the unfashionable end of 
      the western spiral arm of the Galaxy.
</p>

CSS

p{ font-size: 24px; color: #333;} 

.txt_1row{ 
    width: 250px; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis; background: #dfdfdf;
}

.txt_2row{
    width: 250px; overflow: hidden; display:
    -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    text-overflow: ellipsis;word-wrap: break-word; background: #dfdfdf;
}

 

 

 

보기)

 

See the Pen ExKOrMx by minjeong kim (@chloe1103) on CodePen.

 

 

Explore 익스에서는 말 줄임표 적용이 안되기때문에 플러그인을 추가해야한다.

dotdotdot.js 플러그인 추가를하면 익스에서도 적용 완료. (옵션 wrap:'letter' 글단위)