가상클래스 선택자
<style>
a:VISITED{color: green;} //<a>에 해당하는 방문한 곳은 색이 변한다.
a:ACTIVE {color: green;}//커서를 누르고 있으면 색이 변한다
a:HOVER {color: yellow;}//커서를 올리고 있으면 색이 변한다
a:FOCUS {color: yellow;}//포커스는 항상 뒤에 넣는게 좋다. 탭키를 누르면 색이 변한다.
</style>CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
font-siz
1.px
2.rem
3.em
<!DOCTYPE html>
<html>
<head>
<style>
#px{font-size:16px;}
#rem{font-size:1rem;}
</style>
</head>
<body>
<div id="px">PX</div>
<div id="rem">REM</div>
</body>
</html>
text-align
text-align: left;
text-align: right;
text-align: center;
text-align: justify; //왼쪽과 오른쪽의 공백이 공평하게 나뉨
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: justify;
border:1px solid gray;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan iaculis tristique. Pellentesque eu erat mattis est semper condimentum. Nunc sed facilisis turpis. Mauris vulputate, purus in suscipit accumsan, dolor lorem elementum mi, non congue metus urna vitae tortor. Duis dictum ipsum non neque elementum iaculis. Sed sodales purus nisl, gravida pellentesque metus vehicula vitae. Suspendisse sed justo ut lorem molestie consectetur. Nullam efficitur quis velit ut scelerisque. Integer at velit pharetra neque efficitur varius.
Vestibulum interdum tellus sed tellus pretium vulputate. Vestibulum a mattis ante. Ut at metus eget eros dictum tristique. Proin sodales nulla eget enim pulvinar imperdiet. Aliquam et congue quam. Duis blandit dui faucibus lorem auctor, ut laoreet dolor aliquet. Vestibulum nec placerat ligula, vitae vehicula neque. Nulla dictum dui et vehicula mattis. Aenean non erat non diam sollicitudin posuere.
Donec placerat felis in elementum ullamcorper. Duis tellus nunc, eleifend non molestie eget, ornare ut risus. Morbi sit amet nunc ante. Donec vestibulum tortor nec massa vestibulum suscipit. Quisque faucibus pulvinar erat, vitae gravida tortor commodo vitae. Suspendisse malesuada urna eu imperdiet tincidunt. Curabitur non scelerisque nulla. Nullam pellentesque ante ex, eget varius odio lacinia nec. Cras sed ligula vitae odio dictum semper ut sed eros. Vivamus sollicitudin elementum felis a accumsan. In vitae mi at sem molestie bibendum nec quis libero. Fusce sed tortor ultrices, maximus risus nec, tincidunt orci.
In hac habitasse platea dictumst. Maecenas congue arcu nulla, vel pharetra mauris condimentum vel. Quisque sit amet sapien arcu. Vestibulum eu consectetur ante, vel iaculis justo. Proin in ipsum vel eros auctor rhoncus sed vel lacus. Vestibulum suscipit dolor eget nunc accumsan semper. In ac porta libero. Pellentesque risus ipsum, egestas sit amet rhoncus eu, finibus sit amet felis. Nunc gravida nulla non elit porttitor, sed maximus arcu semper. Ut nulla ante, ornare nec quam sed, venenatis viverra odio. Ut vitae odio nisi. Nam vitae ullamcorper nulla. Sed eu fermentum velit. Pellentesque id dolor metus. Nullam pharetra pharetra enim, pretium convallis metus ultrices eget. Sed cursus vestibulum orci in cursus.
Integer commodo varius ornare. Vivamus lacus urna, scelerisque nec lectus porta, interdum commodo dolor. Curabitur sagittis diam quis tellus semper commodo. Ut non orci consectetur, cursus urna et, tincidunt est. Donec mollis vulputate tempus. Aliquam sapien leo, venenatis at ligula vitae, vestibulum finibus ipsum. Donec pulvinar pretium mattis. Mauris risus augue, eleifend et suscipit ac, convallis vel nisl. Fusce tincidunt fringilla vulputate. Ut porttitor lorem vitae sodales finibus.
</p>
</body>
</html>
font
<!DOCTYPE html>
<html>
<head>
<style>
#type1{
font-size:5rem;
font-family는 글꼴 정해주기
serif는 알파벳에 장식이 있는 폰트
font-family: arial, verdana, "Helvetica Neue", serif;
font-weight는 진하게 보이는 것
font-weight: bold;
line-height는 줄 간격
line-height: 2;
}
#type2{
font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
}
</style>
</head>
<body>
<p id="type1">
Hello world<br>
Hello world
</p>
<p id="type2">
Hello world<br>
Hello world
</p>
</body>
</html>
':: IT > CSS' 카테고리의 다른 글
| [CSS] 유지보수(link와 import, minify) (0) | 2020.03.26 |
|---|---|
| [CSS] 배경, transform, transition (0) | 2020.03.26 |
| [CSS] Multi column, Media query, float (0) | 2020.03.26 |
| [CSS] 간격, box-sizing, 포지션, flex, 레이아웃 (0) | 2020.03.25 |
| [CSS] 선택자의 종류(아이디 선택자, 클래스 선택자, 부모자식 선택자) (0) | 2020.03.25 |