smarti,스마트아이

CSS 텍스트

CSS 텍스트 속성

텍스트 관련 속성은 Text Module Level 3에서 정의하고 있으며, 기존에 제공되던 속성 이외에 하이픈( - ) 및 구두점(.)과 탭 크기 지정 등의 속성이 추가되었다. 이번에는 기존 Text 속성과 함께 CSS3에서 추가된 다양한 텍스트 관련 속성에 대해 살펴보자.

text-align

text-align은 단락 내 텍스트의 가로 방향 정렬 방법을 지정하는 속성이다. 속성 값 중 left, right, center, justify, [string]은 CSS2.1에서도 정의된 속성 값이며, 나머지 속성 값은 CSS3에서 추가된 것이다. CSS2.1 속성 값 중에서도 justify와 [string]은 지원 브라우저가 없거나 기능이 명확히 구현되지 못하였으며, CSS3에서 추가된 속성도 일부 웹 브라우저에서만 지원하고 있다.
 - start : 박스의 시작점으로 텍스트를 정렬. 박스의 시작점은 문자열의 진행 방향에 따라 달라진다. 

   한글의 경우에는 왼쪽에서 오른쪽으로 문자열이 진행되기 때문에 왼쪽으로 정렬된다.
 - end : 박스의 종료점을 기준으로 텍스트를 정렬. 박스의 종료점 역시 문자열의 진행 방향에 따라 달라진다.
 - left : 박스의 왼쪽을 기준으로 텍스트를 정렬
 - right : 박스의 오른쪽을 기준으로 텍스트를 정렬
 - center : 박스의 중앙을 기준으로 텍스트를 정렬
 - [string] : 특정 문자를 기준으로 텍스트를 정렬
 - justify : 워드프로세서의 양쪽 정렬과 같은 정렬 방법
 - match–parent : 부모 요소의 정렬 방법과 일치시킴
 - start end : 워드프로세서의 양끝 정렬과 같은 정렬 방법

/* 예시 */
div { text-align : "." ; }
div p { text-align : start "." ; }

 

text-align-last

text-align-last는 단락의 마지막 줄 텍스트 정렬 방식을 지정하는 속성. 속성 값은 text-align 속성과 동일하다.

/* 예시 */
div { text-align-last : justify ; }

letter-spacing

letter-spacing은 글자와 글자 사이의 간격을 지정하는 속성. 속성 값의 spacing-limit는 단어 간의 간격을 지정하는 값으로, CSS의 길이 단위 값과 동일한 방법으로 사용한다. CSS2.1에서는 속성 값 형식이 "length"로 정의되었지만, CSS3에서는 "spacing-limit"로 변경되었다. 이는 사용하는 방법의 차이라기보다 text-align 속성이나 CSS3에서 추가되는 text-justify 속성과의 관계를 고려하여 속성 값의 형식적 특성을 명확하게 설명하고자 하는 것으로 보인다.

/* 예시 */
div { letter-spacing : 0.2em ; }
div p { letter-spacing : -1px ; }

word-spacing

word-spacing은 단어와 단어 사이의 간격을 지정하는 속성으로, letter-spacing 속성의 spacing-limit 속성 값과 사용 방식이 동일하다.

/* 예시 */
div { word-spacing : 0.2em ; }
div p { word-spacing : -1px ; }

text-indent

text-indent는 단락의 첫줄 들여쓰기를 지정하기 위한 속성. 이때 length 값에 음수 값을 지정하였을 경우에는 내어 쓰기 효과로 보여진다. 그리고 백분율 값으로 속성 값을 지정하였을 경우에는 부모 요소의 너비 값을 참조하여 들여쓰기 길이를 계산한다. 음수 값을 지정하였을 경우에는 내어 쓰기가 된다.

/* 예시 */
div { text-indent : 2em ; }
div p { text-indent : -50px ; }

text-decoration

text-decoration은 텍스트를 장식하는 속성으로, CSS3에서 세분화된 하위 속성이 추가되었다. CSS3에서 추가된 하위 속성을 이용하면 검은색 문장에 빨간색 점선으로 취소선을 작성할 수 있다.

 - text–decoration–line : "under-line", "over-line", "line-trough", "blink" 등의 속성 값을 지정하여 장식선의 표현 

   방법을 지정할 수 있다.
 - text–decoration–style : 장식선의 모양을 나타내는 속성으로, "solid", "double", "dotted", "dashed", "wavy"의 속성 

   값을 지정할 수 있다.
 - text–decoration–color : 장식선의 색상을 CSS 색상 값으로 지정한다.

/* 예시 */
div {
 text-decoration-line : underline ;
 text-decoration-style : wavy ;
 text-decoration-color : #f00 ;
}
div p{
 text-decoration : line-trough dotted #00f;
}

text-transform 

text-transform은 텍스트의 대소 문자를 변환하기 위한 속성으로, 모두 대문자로 변환하는 uppercase, 모두 소문자로 변환하는 lowercase, 그리고 단어의 첫글자를 대문자로 변환하는 capitalize 값과 함께 CSS3에서 full-width 값이 추가되었다.

/* 예시 */
div { text-transform : capitalize ; }
div p { text-transform : full-width ; }

white-space

white-space는 텍스트의 공백과 줄바꿈의 처리 방법을 지정하는 속성이다.

 - normal : 텍스트의 공백은 병합되고 줄바꿈은 무시되며, 요소의 너비에 따라 자동으로 줄바꿈된다.
 - pre : 텍스트의 공백과 줄바꿈을 그대로 표시하며, 요소의 너비에 따른 자동 줄바꿈은 적용되지 않는다.
 - nowarp : 텍스트의 공백은 병합되고 줄바꿈은 무시되며, 요소의 너비에 따른 자동 줄바꿈도 적용되지 않는다. 

   이 속성 값이 지정된 텍스트는 한 줄로 표시된다.
 - pre–wrap : 텍스트의 공백과 줄바꿈이 그대로 표시되고, 요소의 너비에 따른 자동 줄바꿈도 적용된다.
 - pre–line : 텍스트의 공백은 병합되지만 줄바꿈은 그대로 표시되며, 요소의 너비에 따른 자동 줄바꿈도 적용된다.

/* 예시 */
div { white-space : nowrap ; }
}

line-break

line-break는 요소 내 줄바꿈 규칙을 지정하는 속성으로, 일반적인 줄바꿈 규칙은 normal 값이면 엄격한 줄바꿈 규칙을 적용할 경우 strict 값을, 줄바꿈 규칙을 최소화할 경우 loose를 사용할 수 있다. 모든 요소의 line-break 속성의 기본 값은 auto이다.

/* 예시 */
div { line-break : loose ; }

word-break

word-break는 줄바꿈을 위한 단어 규칙을 지정하는 속성. 기본적으로 단어는 공백을 기준으로 줄바꿈이 되지만 공백이 없이 텍스트를 입력한 경우 요소 박스의 크기를 넘치는 경우 하나의 단어로 인식하기 때문에 줄바꿈이 적용되지 않는다. 이때 word-break 속성을 사용하여 줄바꿈 규칙을 지정할 수 있다.

/* 예시 */
div { word-break : keep-all ; }
div p { word-break : break-all ; }

hyphens

hyphens 속성은 줄바꿈으로 인해 단어가 나누어질 때 하이픈을 자동으로 삽입하는 방식을 지정한다. 이때 기본 값인 manual은 하이픈이 지정된 경우에만 하이픈을 적용하고, none은 하이픈을 삽입하지 않는다.

/* 예시 */
.none{ hyphens : none ; }
.manual { hyphens : manual ; }

overflow-wrap / word-wrap

overflow-wrap 속성과 word-wrap 속성은 동일한 속성. 이 두 속성은 단어가 요소 박스의 너비보다 길어질 경우 자동 줄바꿈이 발생하는데 이때 단어를 나눌지의 여부를 지정하는 속성이다. overflow-wrap 속성과 word-wrap 속성을 적용하여 단어를 나눌지의 여부를 지정할 때는 white-space 속성 값이 자동 줄바꿈이 허용되도록 지정해야 한다.

 - normal : 단어가 요소 박스의 크기를 넘쳐도 줄바꿈을 허용하지 않는다.
 - break–word : 단어가 요소 박스의 크기를 넘칠 경우 줄바꿈을 적용한다.

/* 예시 */
div { overflow-wrap : break-word ; }
div { word-wrap : break-word ; }

text-shadow

text-shadow는 텍스트에 그림자를 지정하는 속성. text-shadow 속성은 3개의 length 값과 하나의 색상 값으로 속성 값을 지정한다. 이때 offset-x는 그림자의 가로 방향 거리를 지정하는 값으로, 양수일 경우에는 텍스트의 오른쪽으로, 음수일 경우에는 왼쪽으로 그림자의 위치가 지정된다. offset-y는 그림자의 세로 방향 거리를 의미한다. 세 번째 길이 값은 그림자의 흐려짐 정도를 지정하기 위한 blur 값이다. 마지막으로 그림자의 색상을 지정할 수 있다.

text-shadow 속성 값은 위 4가지 값을 하나의 그룹으로 하되, 콤마(,)로 구분하여 여러 번 지정할 수 있다. 다시 말해 하나의 텍스트에 위치와 색상이 다른 여러 개의 그림자를 생성할 수 있다.

/* 예시 */
div {
 text-shadow : 5px 5px 10px rgba(0,0,0,0.8) ;
}
div p {
 text-shadow : 1px 5px 7px rgb(231,231,231), 
               0 0 0 rgba(5,77,74,0.8), 
               1px 5px 7px rgb(231,231,231) ;
}

 

 

[코딩공부] - CSS fixedNavigation1 예제 다운로드

CSS fixedNavigation1 예제 다운로드

[세상살이] - 산야초 채취 시기 및 효능

산야초 채취 시기 및 효능

[세상살이] - 다음, 네이버 빠른 길 찾기

다음, 네이버 빠른 길 찾기

[세상살이] - 네이버 스마트렌즈로 사진 찍어서 번역하기

네이버 스마트렌즈로 사진 찍어서 번역하기

[코딩공부] - HTML 기본요소3, list(리스트), table(테이블)

HTML 기본요소3, list(리스트), table(테이블)