step12. 01~02. text
<style>
.wrapper1{
/* [ 글자 스타일 ]
normal | italic
상속된다.
*/
font-style: italic;
/* [ 글꼴 ]
좌측에서 부터 순서대로 적용된다.
상속된다.
*/
font-family: "Times New Roman", Consolas, NanumGothic, Gothic, serif, sans-sefif;
/*
[글자의 굵기]
normal | bold
상속된다.
*/
font-weight: bold;
/*
[글자의 크기]
상속된다.
*/
font-size: 20px;
/*
[글자 꾸미기]
none | underline | overline | line-through
상속된다.
*/
text-decoration: underline;
/*
[글자 색상]
상속된다.
*/
color: red;
}
.wrapper2{
/*
[ 글자 변환 ]
none | uppercase | lowercase | capitalize
상속된다.
*/
text-transform: capitalize;
/*
[ 자간 ]
상속된다.
*/
letter-spacing: 5px;
/*
[ 행간 ]
상속된다.
*/
line-height: 30px;
/*
[첫단어 들여쓰기]
상속된다.
*/
text-indent: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita in excepturi corrupti odit molestiae quas illum error, eaque! Sapiente, eius. Suscipit natus eveniet, saepe maiores culpa ea dicta deserunt.</p>
</div>
<div class="wrapper2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum libero magnam itaque, sequi corporis maxime ipsum natus aliquam ad expedita hic perferendis doloremque commodi, ea! Commodi voluptatibus alias ex accusamus.</p>
</div>
<div class="wrapper3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum libero magnam itaque, sequi corporis maxime ipsum natus aliquam ad expedita hic perferendis doloremque commodi, ea! Commodi voluptatibus alias ex accusamus.</p>
</div>
</body>
- font-style: italic : 글자를 기울여준다.
- font-family : 여러 개의 font를 나열할 수 있다. 첫 번째부터 적용되며, 없는 경우 다음 글꼴로 적용된다. "Times New Roman" font처럼 font 이름에 공백이 있다면 큰 따옴표 " " 로 감싸야 한다.
- font-weight: bole : 글자를 굵게 만든다.
- font-size: 글자의 크기를 설정한다.
- text-decoration: 글자를 꾸며준다. underline(아랫줄), overline(윗줄), line-through(가운데 관통)
- color: 글자 색을 설정한다.
- text-transform: 글자를 변환한다. uppercase(대문자), lowercase(소문자), capitalize(첫 자만 대문자)
- letter-spacing : 자간을 설정한다.
- line-height : 행간을 설정한다.
- text-index : 문단 첫 단어를 들여쓰기 한다.
- 이 모든 내용들은 inherit(상속)된다. 상속된다는 것은 해당 객체의 자손 요소에도 같은 css가 적용된다는 것을 의미한다.
<style>
div{
border: 1px solid red;
}
#one{
/* 글자 정렬 : 왼쪽 ; */
text-align: left;
}
#two{
/* 글자 정렬 : 가운데 ; */
text-align: center;
}
#three{
/* 글자 정렬 : 오른쪽 ; */
text-align: right;
}
.wrapper{
/* inline 혹은 inline-block 요소의 가운데 정렬에도 활용할수 있다.*/
text-align: center;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block;
}
#four{
/* 늘리기 */
text-align: justify;
}
</style>
</head>
<body>
<div id="one">김구라</div>
<div id="two">해골</div>
<div id="three">원숭이</div>
<div class="wrapper">
<div class="box"></div>
</div>
<p id="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus ut excepturi maxime at enim, quod mollitia neque quae rem inventore quam numquam molestiae possimus accusamus consequatur sint eveniet aspernatur eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique in quos quis laboriosam quasi impedit totam animi voluptates recusandae dolore et nesciunt alias quaerat nulla debitis rem, minus labore explicabo!</p>
</body>
- text-align : text를 정렬한다. left(왼쪽), center(가운데), right(오른쪽), justyfy(14번 항목)
- text-align은 inline 요소나 inline-block 요소의 가운데 정렬에도 사용할 수 있다. inline-block 요소에 대한 내용은 step10. display를 참고하자.
- text-align: justify는 문장을 화면에 출력할 때 빈 공간을 만들지 않기 위해 단어 사이의 공간을 넓혀서 채울 떄 사용한다. 예를 들어 한글을 이용해서 글을 쓸 때 영어가 길어서 다음 줄로 넘어가면 글자 사이의 간격이 넓어지는 것과 유사하다고 할 수 있다.
댓글