6-2. 텍스트 관련 스타일
font-size: 절대 크기, 상대 크기(안 중요), 크기(일반적인 사용 방법)
->단위
em: 사용되는 폰트의 M의 너비 값을 1
ex: 사용된 폰트의 x의 높이 값을 1
px: 픽셀
pt: 포인트, 일반 문서에서 많이 사용.
1em = 16px = 12pt
백분율: 100% = 1em
font-weight: 100~900, bold bolder lighter narmal
normal: 기본값 400
bold: 700
font-variant
font-style: normal, italic(폰트자체에서 지원), oblique(css 계산에 의해 기울임)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
span.dadada {font-size: 1.5em;}
span.bold {font-weight: bold;}
.vari {font-variant: small-caps;}
.style {font-style: italic;}
.font {font: italic small-caps bold 2.5em 궁서;} /* 축약형 표기*/
</style>
</head>
<body>
<p>문단테스트</p>
<h1>제목 테스트</h1>
<h1>가가가나나나<span class="dadada">다다다</span></h1>
<p>글자 크기를 <span class="bold">굵게 적용</span></p>
<p>ABCDE abcde </p>
<p class="vari">ABCDE ABCDE</p>
<p class="style">ABCDE abcde</p>
<p class="font">가나다라 마바사 ABCDEFG abcdefg</p>
</body>
</html>
-
color: 글자 색 (문자, 16진수 표기, rgb, rgba, hsl, hsla)
실무에서는 절대 문자로 쓰지 말 것! (blue 이런거 X)
text-decoration : 밑줄 관련 스타일
text-transform: 대소문자변경(영문)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
h1 {color: rgb(0, 200, 0);}
h2 {color: blue;}
.accent {color: #ff0000;}
/* none, underline, line-through, overline */
a {text-decoration: none;}
.edited {text-decoration: line-through;}
/* none, uppercase, lowercase, capitalize */
.trans1 {text-transform: uppercase;}
.trans2 {text-transform: capitalize;}
/* .trans3 {text-transform: full-width;} 반각 > 전각 (안 됨) */
.shadow1 {font-size: 3em; color: #000; text-shadow: 5px 5px 3px #f00;} /* 마지막숫자 블러 */
.shadow-wrap {background-color: black; padding: 15px;}
.shadow-wrap h1 {
color: black;
font-size: 4em;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;
}
</style>
</head>
<body>
<h1>세계 10대 슈퍼푸드</h1>
<img src="images/galic.jpg" alt="마늘">
<h2>마늘(Galic)</h2>
<p>일해백리는 ... ... </p>
<p>마늘 특유의 아린맛은 <span class="accent">알리신</span>이라는 성분 때문으로 ... ... </p>
<h2>토마토(tomato)</h2>
<p>[<a href="#">외부링크</a>]</p>
<p>토마토는 비타민 A, C가 풍부한 <span class="edited">과일이다.</span>채소다... ... </p>
<ul>
<li class="trans1">html</li>
<li class="trans1">css</li>
<li class="trans2">javascript</li>
<li class="trans3">world wide web!</li>
</ul>
<h1 class="shadow1">HTML5</h1>
<div class="shadow-wrap">
<h1>HTML5</h1>
</div>
</body>
</html>
white space: 공백
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
.board {font-size: 12px; width: 970px; margin: 0 auto; table-layout: fixed; border-spacing: 0;}
.board, .board th {border: black 1px solid; border-width: 1px 0;}
.board th {letter-spacing: .2em;}
.board td, .board th {padding: 8px;}
.col-no {width: 50px;}
.col-writer {width: 100px;}
td:nth-child(2) {
width: 820px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table class="board">
<colgroup>
<col class="col-no">
<col class="col-title">
<col class="col-writer">
</colgroup>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
</tr>
<tr>
<td>1</td>
<td>정기회의 회기는 100일을, 임시회의 회기는 30일을 초과할 수 없다. 대법관의 임기는 6년으로 하며, 법률이 정하는 바에 의하여 연임할 수 있다. 대통령은 내란 또는 외환의 죄를 범한 경우를 제외하고는 재직중 형사상의 소추를 받지 아니한다.</td>
<td>신사임당</td>
</tr>
<tr>
<td>2</td>
<td>국회의원과 정부는 법률안을 제출할 수 있다. 한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는 정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다.</td>
<td>문무왕</td>
</tr>
<tr>
<td>3</td>
<td>국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다.</td>
<td>성담수</td>
</tr>
<tr>
<td>4</td>
<td>국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 의원을 제명하려면 국회재적의원 3분의 2 이상의 찬성이 있어야 한다.</td>
<td>강감찬</td>
</tr>
<tr>
<td>5</td>
<td>국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다. 대통령은 국무회의의 의장이 되고, 국무총리는 부의장이 된다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다.</td>
<td>정중부</td>
</tr>
<tr>
<td>6</td>
<td>대통령이 임시회의 집회를 요구할 때에는 기간과 집회요구의 이유를 명시하여야 한다. 국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다.</td>
<td>김시민</td>
</tr>
<tr>
<td>7</td>
<td>대통령은 취임에 즈음하여 다음의 선서를 한다. 여자의 근로는 특별한 보호를 받으며, 고용·임금 및 근로조건에 있어서 부당한 차별을 받지 아니한다. 탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다.</td>
<td>단군</td>
</tr>
<tr>
<td>8</td>
<td>국가는 농업 및 어업을 보호·육성하기 위하여 농·어촌종합개발과 그 지원등 필요한 계획을 수립·시행하여야 한다. 모든 국민은 자기의 행위가 아닌 친족의 행위로 인하여 불이익한 처우를 받지 아니한다.</td>
<td>곽재우</td>
</tr>
<tr>
<td>9</td>
<td>외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다.</td>
<td>홍익한</td>
</tr>
<tr>
<td>10</td>
<td>국가는 법률이 정하는 바에 의하여 재외국민을 보호할 의무를 진다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다. 모든 국민은 종교의 자유를 가진다.</td>
<td>최충</td>
</tr>
</table>
</body>
</html>
letter-spacing: 자간
word-spacing: 단어간격
6-3. 문단 스타일
direction: 진행방향 ltr(기본) rtl
text-align: 정렬 start, end(진행방향 고려), left, right, center, justify(양쪽정렬)
text-justify: 양쪽 정렬시 공백 조절
text-indend: 들여쓰기
line-height: 줄간격 조정 px, em ~~%, 숫자
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
p {border: 1px solid orange; padding: 8px; width: 500px; margin: 10px auto;}
p.left {text-align: left;}
p.right {text-align: right;}
p.center {text-align: center;}
p.justify {text-align: justify;}
/* text-justify 기본값auto(브라우저가 지정) */
.inter {text-justify: inter-word;} /* 단어간격 */
.distri {text-justify: distribute;} /* 인접 글자 공백 조절(자간조절) 잘 안 씀 */
.indent {text-indent: 20px;}
.line2 {line-height: 2;}
.line-7 {line-height: -7;}
</style>
</head>
<body>
<p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="left indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="left line2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="left line-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="justify inter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
<p class="justify distri">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. </p>
</body>
</html>
6-4. 목록 스타일
list-style-type: 불릿의 형태, 숫자 > 그나마 얘만 씀
list-style-image: 불릿을 이미지로 대체
list-style-position: 바깥쪽, 안쪽 배치 선택
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
/* * {margin: 0; padding: 0;} */
.sqrbullet {list-style-type: square;}
.nobullet {list-style: none;}
.imgbullet {list-style-image: url("images/dot.png");}
.inside {list-style-position: inside;}
.outside {list-style-position: outside;}
</style>
</head>
<body>
<ul class="sqrbullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<ul class="nobullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<ul class="imgbullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<ul class="inside">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<ul class="outside">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>
'HTML5' 카테고리의 다른 글
| 21. 02. 02. 08장- 레이아웃을 위한 스타일 (0) | 2021.02.02 |
|---|---|
| 21. 02. 01. 07장- 색상과 배경을 위한 스타일 (0) | 2021.02.02 |
| 21. 01. 29. 05장- CSS의 기초, 6장. 글꼴 관련 스타일 (0) | 2021.02.01 |
| 21. 01. 28. 4장. 폼 (0) | 2021.01.29 |
| 21. 01. 27. 3장. 이미지 아이프레임, 링크 (0) | 2021.01.27 |
