[ 1. 글꼴 ]
① font-family : 글꼴 지정
font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
□ 사용자의 시스템에 지정한 글꼴이 설치되어 있지 않을 때를 대비하여 ,(콤마)를 통해 여러 개의 글꼴을 지정함
body { font-family : "맑은 고딕", 돋움, 굴림 }＊ 맑은 고딕에만 쌍따옴표("")가 있는 이유는 두 단어 이상으로 된 이름을 갖고 있기 때문에.
□ 3개의 글꼴 지정. 만약 맑은 고딕이 없다면 돋움, 돋움도 없다면 굴림을 지정한다.
② font-size : 글자 크기 지정
font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>□ 보통 px, pt, em, rem, ex 등의 단위를 사용하여 크기를 지정한다.
p { font-size : 16px; }③ font-style : 이탤릭체 사용
□ italic, oblique가 있으나, 웹에서는 주로 italic 사용
font-style: normal | italic | oblique④ font-weight : 글자 굵기 지정
□ 예약어나 숫자값으로 지정 가능
font-weight : normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900※ 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
body{
font-size: 20px; /* 전체 글자 크기 */
}
h1 {
font-family: 바탕; /* 글꼴 */
font-size: 3em; /* 글자 크기 */
}
.accent {
font-size:150%; /* 글자 크기 */
font-weight: 800; /* 글자 굵기 */
}
.italic{
font-style: italic; /* 글자 스타일 */
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
[ 2. 텍스트 스타일 ]
① color : 글자색 지정
□ 16진수, rgb, hsl, 색상 이름 사용
color : <색상>＊ 16진수를 사용할 시 16진수 값을 모두 기억하고 있을 수 없으니 색상 값을 추출해주는 '컬러 피커' 서치하여 사용하기
※ 16진수, hsl, 색상 이름 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
h1 {
color:#0000ff; /* 16진수 표기법 */
}
p {
color:green; /* 색상 이름 */
}
.accent {
color:hsl(0, 100%, 50%); /* hsl 표기법 */
font-weight:bold;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
② text-align : 텍스트 정렬
■ 문단 텍스트 정렬 방법 지정
□ 왼쪽/오른쪽/양쪽/가운데 정렬 등..
□ 지정하지 않을 경우 왼쪽 정렬이 기본값
text-align : start | end | left | right | center | justify | match-parent| start | 현재 텍스트 줄의 시작 위치에 맞춰 문단 정렬 |
| end | 현재 텍스트 줄의 끝 위치에 맞춰 문단 정렬 |
| left | 왼쪽에 맞추어 문단 정렬 |
| right | 오른쪽에 맞춰 문단 정렬 |
| center | 가운데에 맞춰 문단 정렬 |
| justify | 양쪽에 맞춰 문단 정렬 |
| match-parent | 부모 요소를 따라 문단 정렬 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-align</title>
<style>
p {
width:600px;
border:1px solid #222;
padding:10px;
margin:10px;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="center">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="justify">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
③ line-height : 줄 간격 조절
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>line-height</title>
<style>
p {
width:600px;
border:1px solid #222;
padding:10px;
margin:10px;
}
.small-line {
line-height:0.7;
}
.big-line {
line-height:2.5;
}
</style>
</head>
<body>
<p>껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="small-line">껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="big-line">껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
■ 줄 간격은 텍스트를 세로 정렬할 때도 유용하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
h1 {
font-size:60px; /* 글자 크기 */
font-family:Verdana, Geneva, Tahoma, sans-serif; /* 글꼴 */
}
.heading {
width:100%; /* 영역 너비 */
height:100px; /* 높이 */
background:#222; /* 배경 색 */
color:rgb(255,255,255); /* 글자 색 */
text-align: center; /* 가로 정렬 - 가운데 */
}
</style>
</head>
<body>
<h1 class="heading">HTML</h1>
</body>
</html>
위 코드의 경우, 가로로는 가운데 정렬이 되어있으나, 세로로는 가운데 정렬이 되어있지 않다. (위아래간격이 다름)
이 경우, line-height 속성값을 추가하여 영역 높이인 height의 속성값과 똑같이 지정하면 세로로 가운데 정렬이 가능하다.
.heading {
width:100%; /* 영역 너비 */
height:100px; /* 높이 */
background:#222; /* 배경 색 */
color:rgb(255,255,255); /* 글자 색 */
text-align: center; /* 가로 정렬 - 가운데 */
line-height: 100px; /* 세로 정렬 - 가운데. line-height 값과 height 값을 같게 */
}
④ text-decoration : 텍스트의 줄을 표시하거나 없애는 역할
□ 텍스트에 밑줄을 긋거나 취소선을 표시
■ 텍스트에 a href를 통해 하이퍼링크를 적용했을 경우, text-decoration 속성을 사용하면 기본적으로 생기는 밑줄을 없앨 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
</head>
<body>
<h1>text-decoration 속성</h1>
<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>
<p style="text-decoration:line-through">line through</p>
</body>
</html>
⑤ text-shadow : 텍스트에 그림자 효과 추가
text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상>□ 세로 거리, 가로 거리만 지정(둘은 필수 속성)하면 나머지 값은 기본값을 통해 사용 가능
| <가로 거리> | 텍스트부터 그림자까지의 가로 거리로, 필수 속성. 양수값은 오른쪽, 음수값은 글자의 왼쪽에 그림자를 생성 |
| <세로 거리> | 텍스트부터 그림자까지의 세로 거리로, 필수 속성. 양수값은 글자의 아래쪽, 음수값은 글자 위쪽에 그림자 생성 |
| <번짐 정도> | 그림자가 번지는 정도. 양수값 사용 시 그림자가 모든 방향으로 퍼져 크게 표시. 반대로 음수값은 모든 방향으로 축소되어 보이며 기본값은 0이다. |
| <색상> | 그림자 색상 지정. 공백으로 구분해 여러 색상도 지정 가능. 기본값은 현재 글자 색. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
h1 {
font-size:60px;
}
.shadow1 {
color:red;
text-shadow:1px 1px black;
}
.shadow2 {
text-shadow:5px 5px 3px #ffa500;
}
.shadow3 {
color:#fff;
text-shadow:7px -7px 20px #000;
}
</style>
</head>
<body>
<h1 class="shadow1">HTML</h1>
<h1 class="shadow2">CSS</h1>
<h1 class="shadow3">자바스크립트</h1>
</body>
</html>
⑥ text-transform : 텍스트의 대소 문자 변환
□ 영문자 표기 시, 텍스트의 대소 문자를 원하는대로 바꿈. 한글에는 영향 없고 영문자에만 적용된다.
| capitalize | 첫 번째 글자를 대문자로 변환 |
| uppercase | 모든 글자를 대문자로 변환 |
| lowercase | 모든 글자를 소문자로 변환 |
| full-width | 가능한 한 모든 문자를 전각 문자로 변환 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-transform</title>
<style>
.trans1 {
text-transform: capitalize;
}
.trans2 {
text-transform: uppercase;
}
.trans3 {
text-transform: lowercase;
}
</style>
</head>
<body>
<p class="trans1">html</p>
<p class="trans2">css</p>
<p class="trans3">javascript</p>
</body>
</html>
⑦ letter-spacing, word-spacing : 글자 간격(자간) 조절
□ letter-spacing : 글자와 글자 사이 간격 조절 -> 보통 CSS에서 사용하는 방
□ word-spacing : 단어와 단어 사이 간격 조절
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 스타일</title>
<style>
p {
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size:80px;
text-shadow:3px 3px 1px #ccc; /* 오른쪽 아래로 파란색 그림자 */
}
.spacing1 {
letter-spacing:0.2em; /* 글자 간격 0.2em */
}
.spacing2 {
letter-spacing:0.5em; /* 글자 간격 0.5em */
}
</style>
</head>
<body>
<p>CSS</p>
<p class="spacing1">CSS</p>
<p class="spacing2">CSS</p>
</body>
</html>
[ 3. 목록 스타일 ]
① list-style-type : 불릿 모양과 번호 스타일 지정
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1, 2, 3, ... |
| decimal-leading-zero | 앞에 0이 붙는 10진수 | 01, 02, .. |
| lower-roman | 로마 숫자 소문자 | i, ii, iii, ... |
| upper-roman | 로마 숫자 대문자 | I, II, III, ... |
| lower-alpha 또는 lower-latin | 알파벳 소문자 | a, b, c, ... |
| upper-alpha 또는 upper-latin | 알파벳 대문자 | A, B, C, .. |
| none | 불릿이나 숫자 제거 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>불릿과 번호 바꾸기</title>
<style>
.book1 {
list-style-type:none; /* 불릿 없앰 */
}
.book2 {
list-style-type: upper-alpha; /* 알파벳 대문자 */
}
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ul class="book1">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
</ul>
<ol class="book2">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
</ol>
</body>
</html>
② list-style-image : 불릿 대신 이미지 사용
□ 불릿 대신 원하는 이미지 사용. 들어갈 이미지는 불릿 크기만큼 작아야 좋음
list-style-image : <url(이미지 파일 경로)> | none③ list-style-position : 목록 들여쓰기
list-style-position : inside | outside;| inside | 불릿, 번호를 기본 위치보다 안으로 들여 쓴다. |
| outside | 기본값 |
④ list-style : 목록 속성 한꺼번에 표시
ol {
list-style : lower-alpha inside;
}list-style-type과 list-style-position을 동시에 적용
[ 4. 표 스타일 ]
① caption-side : 표 제목의 위치를 정해줌
□ <caption>을 통해 표 제목을 정해줬었는데 표 위에 위치하는 표 제목을 표 아래쪽으로 옮길 수 있다.
| top | 표 윗 부분에 표시. 기본값 |
| bottom | 표 아랫 부분에 표시 |
② border : 표 테두리 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 스타일</title>
<style>
table {
caption-side: bottom; /* 표 캡션 위치 */
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
}
td, th {
border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
③ border-spacing : 셀 사이의 여백 지정
border-spacing : 수평거리 수직거리공백으로 구별하여 나타내며, 두 값이 같다면 1개만 지정해도 ok
④ border-collapse : 표와 셀 테두리를 합쳐줌
| collapse | 표와 셀 테두리를 하나로 합쳐 표시 |
| separate | 표와 셀 테두리를 따로 표시. 기본값. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 스타일</title>
<style>
table {
caption-side: bottom; /* 표 캡션 위치 */
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
border-collapse: collapse; /* 테두리 한줄로 표시 */
}
td, th {
border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
'IT > Frontend' 카테고리의 다른 글
| [쉽게 배우는 H.C.J] Chapter 2 - Section 01 자바, 톰캣, 이클립스 기반의 웹 개발 환경 (0) | 2025.02.24 |
|---|---|
| [쉽게 배우는 H.C.J] Chapter 1 (1) | 2025.02.19 |
| CSS 1 (0) | 2025.02.02 |
| HTML 4 (0) | 2025.02.01 |
| HTML 3 (0) | 2025.01.30 |