[TIL] html & css 공부, 'text'

 

 

 

텍스트 입력한대로  출력하기

필요한 부분에 <pre> 태그를 사용한다 

 

<pre> </pre>

 

 

 

pre 태그 사용시 문장이 길면 줄바꿈이 되지 않고 영역 바깥으로 나가는데,

 

 

 

pre 태그의 style에 추가하면 줄바꿈이 된다

 

word-wrap: break-word;

 

 

 

만약 위의 스타일이 적용되지 않는다면 white-space를 사용하여 글자를 개행해준다!

 

white-space: pre-wrap;

 

 

+++

white-space 

 

• normal : 기본 값. 공백은 하나로 표시, \n은 무시, 긴 행은 필요 시 wrap
• nowrap : 긴 행이 wrap 되지 않는다. 나머지는 = normal
• pre : 여러 개의 공백과 개행문자가 모두 표현된다.
           <pre> 태그처럼 동작! 개행문자에서만 개행이 되고, wrap되지 않는다.
• pre-line : 공백은 하나로 표시, 긴 행은 필요 시 wrap. \n시 개행
• pre-wrap : 여러 개의 공백과 개행문자가 모두 보존! 개행문자외 에서도 필요시 wrap
                     = 사용자가 입력한대로 출력함

 

 

---

 

 

 

박스 내 텍스트가 overflow하면 ... 으로 표기 및 넘친 글자 감춰주기

-> white-space: nowrap; 은 한줄로 표기. width 를 정해주면 된다

 

width: 240px;
heigth: 100px
# white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

 

 

 

---

 

 

 

 

li 태그에 적용된 기본 스타일 - 문단기호 - 을 삭제

 

list-style-type: none;

 

 

 

---

 

 

 

a 태그 / 링크 밑줄 없애기

둘 중 하나를 사용하여 지울 수 있고, 속성 값으로 line을 부여할 수도 있다

• none: 선 없음
• underline: 밑줄(default)
• overline: 윗줄
• line-through: 취소선

 

text-decoration: none;
  or
text-decoration-line: none;

 

 

 

 

+++

a 태그 / 링크 밑줄  모양 변경하기

속성 값을 부여해준다

• solid: 진한 선
• double: 밑 두 줄
• dotted: 점선
• dashed: _ _ _ _ 대쉬 점선
• wavy: 구불구불한 선

 

text-decoration-style: 적절한 속성값 ;

 

 

a 태그 / 링크 밑줄  색 변경하기

 

text-decoration-color: 색상값 ;

 

 

 

 

 

 

 

 

 

 

http://www.tcpschool.com/css/css_basic_text

코딩교육 티씨피스쿨

https://www.daleseo.com/css-white-space/

CSS의 white-space 속성 사용법