CSS Property - Text 글자관련 속성

 

CSS Text Properties

 

---

 

• 오늘부터는 이전에 배운 셀렉터를 이용하여 원하는 태그에 스타일링 하는 법을 공부해 봐요.
• 스타일링은 포토샵이나 일러스트, 피그마의 툴박스의 기능과 거의 동일한 부분이 많다고 보면 됩니다.
• 하여 디자인을 하셨던 분이 개발을 할경우 CSS는 기가막히게 빨리 익히는 이유도 바로 그것이죠~!
• 하지만 요즘은 누구나 그래픽툴 한번쯤은 써보는 세상아닙니까? 모두 빨리 익히실 수 있어요~ ^^
• 오늘은 글자에 관련된 스타일링을 한번 알아보겠습니다.

 

상세한 스펙을 보시려면 w3schools.com 에 잘 정리되어있는 CSS Property page를 걸어둘게요~
https://www.w3schools.com/css/css_text.asp

 

할수있어.. 포기하지마...

 

 

A. Text 관련 CSS

글자에 관련된 속성입니다.  자주사용하는것 말고는 간혹가다 꺼내쓰게 되는데요, 각 속성마다 지정할 수 있는 속성의 방식과 값들이 있습니다. 추가 속성들과 값들은  참조링크에서 확인하실 수 있습니다.

구분	Property name	사용 예	Description
글자 컬러	color	- p { color : gold } - div > p { color : rgb(255,215,0) } - div p { color : rgba(255,215,0,0.5) } - div + p { color : #ffd700 }	CSS 에서 사용할 수 있는 다양한 컬러값으로 글자의 색을 지정 할 수 있다. CSS 컬러주는 방법
글자 정렬	text-align	p { text-align:justify }	문단을 양끝 정렬한다. 마지막줄은 자동으로 좌측정렬된다.
	text-align-last	p { text-align:right }	문단의 마지막줄만 우측정렬한다.
	direction	p { direction : rtl }	블럭요소내의 컨텐츠 흐름의 방향을 우측으로 정한다.
	unicode-bidi	p {   unicode-bidi: bidi-override; }	direction과 함께 사용되며 글자의 처리방법을 유니코드의 알고리즘을 통해 텍스트를 재정의 해야하는지의 여부를 설정하거나 반환한다.
	vertical-align	img { vertical-align:bottom }	인라인 블럭요소 뒤에오는 글자의 정렬 또는 표에서 셀의 세로정렬에 사용된다. 좌측의 예시는 img뒤에오는 글자는 이미지의 하단에 정렬되게 된다.
글자 밑줄 Reference	text-decoration	a:link { text-decoration:none }	a태그의 기본 스타일인 밑줄을 없앤다. 밑줄에 대한 컬러 및 스타일을 다양하게 바꿀 수 있다.
영문 대,소문자	text-transform	h1 { text-transform : uppercase }	h1의 모든 영문자를 대문자로 바꾼다.
text-spacing ( 글자 여백 ) Reference	text-indent	p { text-indent: 30px }	문단을 시작할때에 첫줄만 들여쓰기 30px 한다.
	letter-spacing	h1 { letter-spacing : 2px }	글자의 자간을 2px로 띄운다.
	line-height	div { font-size: 20px; } div > p { line-height:1.5 } div > p { line-height: 40px }	부모에게 상속받거나, 자신의 폰트사이즈를 기준으로 총 글자의 높이를 지정한다. 1.5 는 20px * 1.5 이므로, 30px이 된다. 40px은 상속여부와 상관없이 고정값으로 지정된다.
	word-spacing	p { word-spacing:20px }	스페이싱이 있는 것을 단어로 인식하여 단어사이의 간격을지정한다.
	white-space	p { white-space :nowrap }	p태그의 줄바꿈을 허용하지 않는다. 한줄 말줄임을 할때에 사용하거나, 글자가 줄바뀜 되었을때 단어가 이상하게 보이는 것을 방지하기 위해 넣기도 한다.
글자 그림자 Reference	text-shadow	h1 { text-shadow : 1px 2px 3px rgba(0,0,0,0.5) }	h1의 우측 1px, 하단 2px위치에 3px만큼 블러가들어간 검정색(투명도 0.5) 그림자를 넣겠다. 글자에 그림자를 지정할 수 있으며, 멀티로 지정하는 것도 가능하다.

 

 

 

 

---

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.