CSS
구글 블로그 글꼴 바꾸는 방법 (Google Fonts)
구글 폰트 (Google Fonts) 구글 폰트는 지금까지 전 세계적으로 가장 잘 알려진 무료 글꼴 서비스입니다. 다양한 언어로 1064개 이상의 무료 글꼴을 제공하며 .woff2, .svg, .eot 등으로 다양한 형식으로 사용할 수 있습…
글꼴 바꾸는 방법 - font-family
웹 문서에서 사용할 글꼴은 font-family 속성으로 지정합니다. 이 속성은 <body> 태그를 비롯해 <p> 태그나 <h1> , <h2> , <h3> 태그처럼 텍스트를 사용하는 요소들에서…
글자 크기 바꾸는 방법 - font-size
font-size 글자 크기는 font-size 속성으로 조절합니다. 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있습니다. 기본형 font-size : 절대크기 | 상대크기 | 크기 | 백분…
글자 모양 바꾸는 방법 - font-style
font-style font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본형 font-style : normal | italic | oblique normal : 보통 모양입니다. italic : …
글자에 그림자 효과를 주는 방법 - text-shadow
텍스트에 그림자 효과를 줄 수 있습니다. 그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눈에 띄게 할 수 있습니다.
글자 위로 밑줄 긋기 - text-decoration
text-decoration text-decoration은 글자 위로 밑줄을 긋거나 취소선을 표시할 수 있습니다. 기본형 text-decoration : none | line-through | overline | underline n…
소문자를 작은 대문자로 바꾸는 방법 - font-variant
font-variant font-variant는 소문자를 작은 대문자로 바꾸는 속성입니다. 즉, 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다.
모든 글자를 대문자, 소문자로 변환 - text-transform
text-transform 영문자를 표기 할 때 text-transform 속성은 모든 글자를 대문자로 또는 소문자로 바꾸거나 첫번째 글자를 대문자로 변환할 수 있습니다. 이 속성은 한글에서는 의미가 없는 속성입니다.
들여쓰기, 내어쓰기 하는 방법 - text-indent
text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 기본형 text-indent : value value : 크…
문단 정렬하는 방법 - text-align
text-align text-align 속성은 문단의 텍스으 정렬 방식을 정합니다. 속성 값으로 워드나 한글 문서에서 흔히 사용하던 '왼쪽 정렬', '오른쪽 정렬', '양쪽 정렬', '가운데 정렬'…
문단을 다단으로 만드는 방법 - columns
일반적으로 신문을 보면 텍스트 단(column)이 여러 개로 나누어져 있습니다. 웹 문서에서도 이렇게 다단으로 편집할 수 있습니다. column과 관련된 여러 속성으로 쉽게 다단을 편집할 수 있습니다.
줄 높이 바꾸는 방법 - line-height
line-height 문단의 첫 줄을 넘어 두 줄 이상되면 '줄 간격'이 생깁니다. 그런데 줄 간격은 너무 좁으면 글의 내용이 눈에 들어오지 않습니다. 이때 line-height 속성을 이용하면 원하는 만큼 줄 높이를 조절할 수 있습니다…
줄바꿈, 공백 처리 방법 - white-space
공백이 제대로 처리되지 않는다면 문서가 지저분해 보일 수도 있습니다. 이럴 때 whith-space 속성을 사용하면 텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있습니다.
글자 사이 간격, 단어 사이 간격 - letter-spacing, word-spacing
텍스트 자간을 조절해보십시오. 강조하고 싶은 글자나 큰 글자들은 글자 사이 간격을 조절해 여유있게 표시하면 읽기 편합니다.
내용이 박스 밖으로 벗어났을 때 처리 방법 - overflow
overflow overflow 속성은 white-space: norwap; 으로 지정해 줄바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있습니다 이렇게 박스의 크기 밖으로 넘치는 내용을 어떻게 처리할지 정하는 속성이 입니다.
하이픈(hyphen) 문단 줄바꿈 처리 방법
하이픈 뒤에서 자동으로 문단이 바뀌어 줄바꿈이 되는 경우가 발생하는 문제를 해결하기 위한 몇 가지 방법을 살펴봅니다. 방법 1 줄바꿈을 무시하고 하이픈 뒤의 내용도 유지하려면 다음 속성을 추가합니다. 속성값이 적용이 되지 않는다면 …
줄바꿈을 단어 기준으로 할지, 글자 기준으로 할지 정하기 - word-break
word-break word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다.