Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci eaque ab nesciunt ducimus iste, laudantium maxime quam, blanditiis fuga facilis quaerat. Voluptas architecto suscipit voluptatibus reiciendis amet nulla voluptates et?
</p>
<pclass="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae facere hic libero sapiente reiciendis numquam velit nemo ad impedit, nihil, dicta est ea excepturi deserunt, nam optio non amet minus.
</p>
</div>
font-size (크기)
font-size는 대부분 숫자 + 단위(px)
브라우저는 대부분 16px을 기본값으로 가지고있음.
.text {
font-size: 12px;
}
.text {
font-size: 80% px;
}
font-style (글씨체)
기본값: font-style:normal;
--> 부모로부터 상속받은 걸 원상태로 되돌리고 싶을때 사용
.text {
font-style:italic;
}
.text {
font-style:oblique;
}
<em>, <i> 도 기울여진 글씨체를 사용할순 있지만 스타일을 위해서 하는게 아닌 강조하기 위해 쓰임
italic / oblique 기울임
font-weight (굵기)
기본값(normal): font-weight: 400;
.text {
font-weight:700;
}
.text {
font-weight:bold;
}
<strong>, <b> 태그도 굵게 할 순 있지만 단순 굵기만 변하게 하기 위해서 사용하면 안됨.
<head>
<style>
.title-color {
color: red;
}
.title-size {
font-size: 24px;
}
.title-weight {
font-weight: 800;
}
<pclass="title-color title-size title-weigh">
안녕하세요!
</p>
font-family
글꼴 자체를 변경하기 위해 사용
브라우저마다 지원하는 글꼴이 있을수도 있고 없을수도 있기 때문에 여러가지를 나열해놓음
,를 이용해서 분리
.text {
font-family:'Times New Roman', Times, serif
}
loman이 있으면 하고 없으면 times, times가 없으면 serif
line-height
줄의 높이를 말함 (글씨크기 + 위아래 여백)
line-height : 1.0~ 1.2 (글씨체에 따라서 조금씩 다름)
글꼴에 따라서 높이가 달라서 어수선해보일수 있으니 지정해주는것이 좋음
font
font에 대한 단축속성
<font-size>, <font-family>는 꼭 사용해야하는 값
<font-style>, <font-variant> (en-US), <font-weight>, <line-height>(en-US) 는 꼭 포함하지 않아도 됨 (기본값으로 사용)
.text {
font-size: 20px;
font-family: 'Times New Roman', Times, serif;
}
.text{
font: 20px'Times New Roman', Times, serif;
}
둘다 동일하게 사용 가능 (font-size와 font-family를 꼭 필수로 들어가야함)
.text{
font: italic10020px/1.7'Times New Roman', Times, serif;
}
<font-style>, <font-weight> <font-size> / <line-height> <font-family> 순으로 입력해야함
normal: 0이 아님, 폰트를 제작한 사람이 기본값을 정의함.
letter-spacing (글자들간의 여백)
<pclass="default">
Lorem ipsum dolor sit amet
</p>
<pclass="text">
Lorem ipsum dolor sit amet
</p>
.text {
letter-spacing :5px;
}
기본값에 5px 더한 값 (-도 가능)
word-spacing (단어들간의 여백)
.text {
word-spacing :10px;
}
text-aline
텍스트 정렬
.text {
text-align: center;
left, center, right
블럭요소이어야 함.(span같은 인라인요소는 적용하지 x )
text-indent (들여쓰기)
<divclass="container">
<pclass="paragraph1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, reiciendis recusandae deserunt aut fuga commodi expedita sed. Ducimus, iure labore consectetur neque quas itaque nulla deserunt, eaque assumenda perspiciatis ullam.
</p>
<pclass="paragraph2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, reiciendis recusandae deserunt aut fuga commodi expedita sed. Ducimus, iure labore consectetur neque quas itaque nulla deserunt, eaque assumenda perspiciatis ullam.
</p>
<pclass="paragraph3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, reiciendis recusandae deserunt aut fuga commodi expedita sed. Ducimus, iure labore consectetur neque quas itaque nulla deserunt, eaque assumenda perspiciatis ullam.
</p>
.paragraph 1 {
text-indent: 20px;
}
.container{
text-indent: 50px;
}
px 말고도 %도 가능
text-decoration
단축속성 (short hand -여려줄의 입력값을 한줄로 입력)
text-decoration-line (필수) -어떤 데코레이션을 할지 결정
-under line : 밑줄
-over line : 위에 줄
-through : 가운데줄
--->중복도 가능
text-decoration-color
text-decoration-style
-solid 일자로 쭉
-double 2줄
-dotted 점선
-dash 좀더 긴 점선
wavy 물결표시 text-decoration-thickness -선의 두께
<divclass="container">
<span>
안녕하세요!
</span>
</div>
span {
color:blue;
text-decoration: redline-through2pxwavy;
}
순서는 상관없지만 under,over,through를 중복으로 할경우 함께 써야함
word-break
break-all
오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)
keep-all
한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는normal과 동일합니다.
<divclass="container">
<plang="en">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<plang="ko">
가나다라마바사아자차카타파하
</p>
p {
width: 120px;
background-color: cadetblue;
}
한글은 120px에 맞춰 줄바꿈이 되었는데 영어는 삐져나옴
p[lang="en"] {
word-break: break-all;
}
word-break:breal-all
p[lang="ko"] {
word-break: keep-all
}
text-transform
-한글에 적용하지 x
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eos aliquid dicta atque doloremque cum quasi iure reprehenderit praesentium saepe alias repudiandae est esse ipsum officiis culpa, laudantium voluptatibus. Iure.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eos aliquid dicta atque doloremque cum quasi iure reprehenderit praesentium saepe alias repudiandae est esse ipsum officiis culpa, laudantium voluptatibus. Iure.
