일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- #홈페이지
- #웹솔루션
- php
- CSS
- 해피씨지아이
- happycgi
- javascript
- #동영상
- 사이트제작
- 홈페이지제작
- #이미지
- #홈페이지제작
- #솔루션
- #image
- CGIMALL
- 게시판
- #뉴스
- #업종별
- 솔루션
- #쇼핑몰
- #happycgi
- 웹솔루션
- #CSS
- #해피CGI
- 쇼핑몰
- #jQuery
- 해피CGI
- #cgimall
- 홈페이지
- jquery
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 코딩시 텍스트 한줄로 표현하기 본문
white-space :
공백문자 다루는 방법을 지정하는 코드. (HTML 상에서 띄어쓰기 또는 줄바꿈, 탭으로 인한 공백 등등)
white-space : normal; - 기본값, 연속 공백과 줄바꿈 등은 통합해서 표현
white-space : pre; - 원문 그대로 출력. normal과 반대.
white-space : nowrap; - 스페이스 바를 막 눌러서 들어가는 연속 공백은 통합되지만 (normal의 효과) 줄바꿈은 인정함.
white-space : inherit; - 부모 요소의 값을 상속
-------------------------------------------------------------------------------------------
word-break :
텍스트가 들어가는 블록 요소의 가로에 맞춰 줄바꿈 여부를 설정하는 코드. 강제줄바꿈 방지. 텍스트길이제한.
word-break : normal; -> 기본값, 단어단위로 끊어서 줄바꿈.
word-break : break-all; -> 특수문자를 제외하고 강제로 줄바꿈.
word-break : break-word; -> 특수문자를 포함하고 강제 줄바꿈.
word-break : nowrap; -> 줄바꿈하기 싫을 때
word-break : keep-all; -> 한글일 경우 띄어쓰기 기준으로 짤림.
-------------------------------------------------------------------------------------------
word-wrap:
텍스트가 들어가는 블록요소 사이즈에 따라 줄바꿈
word-wrap : break-word; - 가로 사이즈나 엘러먼트에 맞춰서 강제 줄 바꿈 해준다. word-break : break-all; 같은결과물
-------------------------------------------------------------------------------------------
text-overflow:
긴문자열을 잘라주는 형태지정
text-overflow : clip; 엘리먼트의 테두리에 맞춰서 글자를 자른다.
text-overflow : ellipsis;
잘라지는 끝 부분에 자동으로 '...'을 넣어준다. (ie6이상에서만 지원가능. 파폭은 안됨.)
* width 값이 지정되어야함. / 높이를 정해주거나 white-space : nowrap; 속성을 사용해야함.
* span이나 a태그에 사용할 때는 display : inline-block을 줘서 블록 속성을 지정.
공백문자 다루는 방법을 지정하는 코드. (HTML 상에서 띄어쓰기 또는 줄바꿈, 탭으로 인한 공백 등등)
white-space : normal; - 기본값, 연속 공백과 줄바꿈 등은 통합해서 표현
white-space : pre; - 원문 그대로 출력. normal과 반대.
white-space : nowrap; - 스페이스 바를 막 눌러서 들어가는 연속 공백은 통합되지만 (normal의 효과) 줄바꿈은 인정함.
white-space : inherit; - 부모 요소의 값을 상속
-------------------------------------------------------------------------------------------
word-break :
텍스트가 들어가는 블록 요소의 가로에 맞춰 줄바꿈 여부를 설정하는 코드. 강제줄바꿈 방지. 텍스트길이제한.
word-break : normal; -> 기본값, 단어단위로 끊어서 줄바꿈.
word-break : break-all; -> 특수문자를 제외하고 강제로 줄바꿈.
word-break : break-word; -> 특수문자를 포함하고 강제 줄바꿈.
word-break : nowrap; -> 줄바꿈하기 싫을 때
word-break : keep-all; -> 한글일 경우 띄어쓰기 기준으로 짤림.
-------------------------------------------------------------------------------------------
word-wrap:
텍스트가 들어가는 블록요소 사이즈에 따라 줄바꿈
word-wrap : break-word; - 가로 사이즈나 엘러먼트에 맞춰서 강제 줄 바꿈 해준다. word-break : break-all; 같은결과물
-------------------------------------------------------------------------------------------
text-overflow:
긴문자열을 잘라주는 형태지정
text-overflow : clip; 엘리먼트의 테두리에 맞춰서 글자를 자른다.
text-overflow : ellipsis;
잘라지는 끝 부분에 자동으로 '...'을 넣어준다. (ie6이상에서만 지원가능. 파폭은 안됨.)
* width 값이 지정되어야함. / 높이를 정해주거나 white-space : nowrap; 속성을 사용해야함.
* span이나 a태그에 사용할 때는 display : inline-block을 줘서 블록 속성을 지정.
'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글
[해피CGI][cgimall] 초보자들도 쉽게 배울수있는 사이트! html.net (0) | 2017.05.23 |
---|---|
[해피CGI][cgimall] css로만 제작된 FONT EFFECT (0) | 2017.05.22 |
[해피CGI][cgimall] Css를 이용하여 다양한 이미지 효과를 적용해보자! (0) | 2017.05.17 |
[해피CGI][cgimall] 바둑판 형태의 움직이는 레이아웃 형태의 템플릿 (0) | 2017.05.15 |
[해피CGI][cgimall] CSS버튼 자동생성기 - 한글판 (0) | 2017.05.12 |
Comments