Keep going
텍스트를 표현하는 다양한 스타일 본문
7-1 글꼴 관련 스타일
글꼴을 지정하는 font-family 속성
웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다.
이 속성은 <body> 태그를 비롯해 <p> 태그나 <hr> 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다.
<기본형>
font-family : <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시된다.
웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다.
따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각한다.
글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다.
|
body { font - family : "맑은 고딕", 돋움, 굴림}
|
cs |
font - family 속성은 <body> 태그 스타일에서 일단 한번 정의하면 문서 전체에 적용되고, 문서 안의 모든 자식 요소에 계속 같은 글꼴을 사용한다.
#기본형 기호 이해하기
1. | 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미다.
font size : 값1 | 값2 | 값3
2. 속성값을 나열할 때 키워드는 그대로 나열한다.
font-variant : normal | small-caps
3. 속성값을 나열할 때 값이 아니라 유형이라면 <> 로 묶는다. 이때 다른 속성을 유형처럼 사용할 수 있다.
font size : <절대 크기> | <상대 크기> | <크기> | <백분율>
font : <font-style><font-variant><font-weight>
글자 크기를 지정하는 font-size 속성
글자 크기는 font-size 속성을 사용하여 조절할 수 있다.
글자 크기의 단위는 px(픽셀)이나 pt(포인트) 등으로 지정할 수 있고 백분율을 사용하기도 한다.
<기본형>
font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>
- 브라우저에서 지정한 글자 크기
- 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
- 브라우저와 상관없이 글자 크기를 직접 지정
- 부모 요소의 글자 크기를 기준으로 백분율(%) 표시
◆ 키워드를 사용하여 글자 크기 지정하기
xx-small < x-small < small < medium < large < x-large < xx-large
◆ 단위를 사용하여 글자 크기 지정하기
| 종류 | 설명 |
| em | 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정한다. |
| rem | 문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정 |
| ex | 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정 |
| px | 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정 |
| pt | 포인트라고 하며 , 일반 문서에서 많이 사용 |
◆ 백분율을 사용하여 글자 크기 지정하기
백분율은 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법이다.
단, 백분율로 계산하려면 부모 요소의 글꼴 크기가 font-size : 16px 처럼 단위로 표현되어 있어야 한다.
이탤릭체로 글자를 표시하는 font-style 속성
글자를 이탤릭체로 표시할 때는 font-style 속성을 사용한다.
이탤릭체로 바꾸는 속성값은 italic과 oblique가 있는데 웹에서는 주로 italic을 사용한다.
<기본형>
font-style : normal | italic | oblique
글자 굵기를 지정하는 font-weight 속성
글자 굵기를 지정하는 속성은 font-weight으로 웹 문서를 작성할 때 자주 사용한다.
미리 만들어진 예약어나 숫자값을 사용해 굵기를 지정할 수 있다.
100 ~ 900 사이에서 400은 normal, 700은 bold에 해당한다.
<기본형>
font-weight : normal | bold | border | lighter | 100 | 200 | .... | 800 | 900
7-2 웹 폰트 사용하기
웹 폰트란
CSS 3가 웹 폰트를 표준으로 채택했다.
웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 한다.
즉 웹문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야한다.
웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 문서 폰트도 사용자 시스템으로 다운로드 된다.
결국 사용자 시스템에 없는 글꼴이더라도 웹 문서를 만들 때 사용한 글꼴을 내려받은 후 표시하므로 웹 제작자가 의도한 대로 텍스트를 보여줄 수 있다.
웹 폰트 업로드하고 사용하기
요즘에는 앞에서 살펴본 구글 웹 폰트처럼 인터넷 사이트에서 제공해 주는 경우에는 주로 링크해서 사용하지만, 그렇지 않은 글꼴이거나 자신이 가지고 있는 TTF 폰트를 변환해서 사용한다면 아래 방법으로 직접 업로드해서 사용해야한다.
컴퓨터에서 사용하는 글꼴은 트루타입이고 파일 확장자는 *.ttf 이다.
하지만 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기에 적절하지 않다.
그래서 웹에 적합한 여러 글꼴이 등장했는데 그중에서 EOT와 WOFF 그리고 최근에는 WOFF2파일도 많이 사용한다.
<기본형>
@font-face {
font- family : <글꼴 이름>;
src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ... ];
}
가장 먼저 font-family 속성을 사용해 글꼴 이름을 만든다.
되도록이면 글꼴 파일 이름과 같은 이름을 사용하는 것이 좋다.
src 속성에서는 사용할 글꼴 파일의 경로를 지정한다.
글꼴 파일의 경로를 지정하기 전에 local( ) 문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 한다.
사용자 시스템에 글꼴이 있다면 그 글꼴을 사용하면 되지만, 만약 없다면 WOFF 포맷으로 된 글꼴을 내려받아야 한다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>웹 폰트 사용하기</title>
<style>
@font-face {
font-family: 'Ostrich'; /* 폰트 이름 */
src: local('Ostrich Sans'),
url('fonts/ostrich-sans-bold.woff') format('woff'),
url('fonts/ostrich-sans-bold.ttf') format('truetype'),
url('fonts/ostrich-sans-bold.svg') format('svg');
}
.wfont {
font-family: 'Ostrich', sans-serif; /* 웹 폰트 지정 */
}
p {
font-size: 30px; /* 글자 크기 */
}
</style>
</head>
<body>
<p>Using Default Fonts</p>
<p class="wfont">Using Web Fonts</p>
</body>
</html>
|
cs |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>구글 폰트 사용하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
h1 {
font-size:60px;
font-weight:bold;
font-family: 'Nanum Pen Script', cursive;
}
</style>
</head>
<body>
<h1>HTML+CSS+JavaScript</h1>
</body>
</html>
|
cs |
7-3 텍스트 관련 스타일
글자색을 지정하는 color 속성
웹 문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용한다.
color를 사용할 수 있는 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla) 또는 색상 이름이다.
<기본형>
color : <색상>
16진수로 표현하는 방법
웹 문서의 CSS에서 색상을 표현하는 첫 번째 방법은 #ffff00 처럼 # 기호 다음에 6자리의 16진수로 표시하는 것이다.
6자리의 16진수는 앞에서부터 두 자리씩 묶어 #RRGGBB로 표시한다.
각 색상마다 하나도 섞이지 않았음을 표시하는 00부터 해당 색이 가득 섞였음을 표시하는 ff 까지 사용할 수 있다.
즉, 16진수의 색상값은 #000000(검은색) 부터 #ffffff(흰색) 까지 표현할 수 있다.
만약 색상값이 #0000ff 처럼 두 자리씩 중복 될 경우 #00f로 줄여서 표기할 수도 있다.
hsl과 hsla 로 표현하는 방법
CSS3에서는 hsl을 사용해서 색상을 표기할 수 있다.
hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말이다.
그리고 hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미한다.
hue는 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시한다.
채도는 퍼센트(%)로 표시하는데 아무것도 섞이지 않으면 채도가 가장 높은 상태다.
채도에서 0%는 회색 톤이고, 100%는 원래 색으로 표시된다.
명도 또한 0%는 가장 어둡고, 50%는 원래 색으로, 100%는 흰색으로 나타난다.
색상을 영문명으로 표현하는 방법
색상을 표기하는 또 다른 방법으로 red, yellow, black처럼 잘 알려진 색상 이름을 사용하는 것이다.
|
<!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>
|
cs |
rgb와 rgba로 표현하는 방법
CSS에서는 색상을 지정할 때 주로 rgb나 rgba로 표현한다.
rgb는 red, green, blue의 줄임말로 앞에서부터 차례대로 빨간색, 초록색, 파란색이 들어 있는 값을 나타낸다.
하나도 섞이지 않았을 때는 0으로 표시하고 가득 섞였을 때는 255로 표시하며 그 사이의 값으로 각 색상의 양을 나타낸다.
rgba를 사용하면 rgb로 표현한 색상에 불투명도를 지정할 수도 있다.
rgba에서 맨 끝의 a , 즉 alpha는 불투명도의 값을 나타내며 0~1의 값 중에서 사용할 수 있다.
1은 완전히 불투명한 것이고 0.9나 0.8처럼 숫자가 작아질수록 조금씩 투명해지다가 0이 되면 완전히 투명해진다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
body {
background:url('images/bg.jpg') no-repeat fixed;
background-size:cover;
text-align:center;
}
h1 {
font-size:160px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.color1 {
color: rgb(255,255,255); /* 흰색 */
}
.color2 {
color: rgba(255, 255, 255, 0.5); /* 반투명한 흰색 */
}
</style>
</head>
<body>
<h1 class="color1">HTML</h1>
<h1 class="color2">CSS</h1>
</body>
</html>
|
cs |
텍스트를 정렬하는 text-align 속성
text-align 속성은 문단의 텍스트 정렬 방법을 지정한다.
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>껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="center">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="justify">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
|
cs |
줄 간격을 조정하는 line-height 속성
한 문단이 두 줄을 넘으면 줄 간격이 생긴다.
줄 간격이 너무 좁거나 넓으면 가독성이 떨어진다.
이 때 line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다.
줄 간격은 정확한 단위로 크깃값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정할 수도 있다.
예를 들어 글자 크기가 12px인 문단의 줄 간격을 2.0으로 했다면 실제 줄 간격의 글자 크기의 2.0 배인 24px이 되며 백분율도 같은 식으로 계산한다.
|
<!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>
|
cs |
줄 간격은 텍스트를 세로 정렬할 때도 유용하다.
세로로 가운데 정렬하려면 line-height의 속성값을 추가하여 영역의 높이를 나타내는 height의 속성값과 똑같이 지정하면 된다.
|
<!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; /* 가로 정렬 - 가운데 */
line-height: 100px; /* 세로 정렬 - 가운데. line-height 값과 height 값을 같게 */
}
</style>
</head>
<body>
<h1 class="heading">HTML</h1>
</body>
</html>
|
cs |
테스트의 줄을 표시하거나 없애 주는 text-decoration 속성
text-decoration 속성은 텍스트에 밑줄을 긋거나 최소선을 표시한다.
그리고 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 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>
|
cs |
텍스트에 그림자 효과를 추가하는 text-shoadow 속성
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>
|
cs |
텍스트의 대소 문자를 변환하는 text-transform 속성
영문자를 표기할 때 텍스트의 대소 문자를 원하는 대로 바꿀 수도 있다.
text-transform 속성은 텍스트를 대소 문자 또는 전각 문자로 변환한다.
이 속성은 한글에는 영향을 미치지 않고 영문자에만 적용된다.
| 종류 | 설명 |
| none | 줄을 표시하지 않는다. |
| 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>
|
cs |
글자 간격을 조절하는 letter-spacing, word-spacing 속성
letter-spacing 속성은 글자와 글자 사이의 간격을 조절하고,
word-spacing 속성은 단어와 단어 사이 간격을 조절하는데
CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절한다.
이 2가지 속성은 px, em과 같은 단위나 퍼센트로 크깃값을 조절한다.
|
<!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>
|
cs |
7-4 목록 스타일
불릿 모양과 번호 스타일을 지정하는 list-style-type 속성
순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 지정할 수 있다.
이때 life-style-type 속성을 사용하여 불릿의 모양이나 번호 스타일을 지정할 수 있다.
| 종류 | 설명 | 예시 |
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1,2,3,... |
| decimal-leading-zero | 앞에 0이 붙는 10진수 | 01,02 |
| lower-roman | 로마 숫자 소문자 | ⅰ, ⅱ |
| upper-roman | 로마 숫자 대문자 | Ⅰ, Ⅱ |
| 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>
<li>데이터과학 시리즈</li>
</ul>
<ol class="book2">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
</body>
</html>
|
cs |
불릿 대신 이미지를 사용하는 list-style-image 속성
list-style-type 속성에서 바꿀 수 있는 불릿의 유형은 3가지 뿐이어서 단조로운 편이다.
list-style-image 속성을 이용하면 불릿을 원하는 이미지로 바꿀 수 있다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>불릿 이미지 사용하기</title>
<style>
ul {
list-style-image: url('images/dot.png') /* 불릿으로 사용할 이미지 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ul>
</body>
</html>
|
cs |
목록을 들여 쓰는 list-style-position 속성
list-style-position 속성을 사용하면 불릿이나 번호의 위치를 들여 쓸 수 있다.
속성값으로 inside를 지정하면 불릿이나 번호가 실제 내용이 시작되는 위치보다 좀 더 안으로 들여써진 듯한 효과가 난다.
| 종류 | 설명 |
| inside | 불릿이나 번호를 기본 위치보다 안으로 들여 쓴다. |
| outside | 기본값이다. |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>불릿 목록 들여쓰기</title>
<style>
.inside { list-style-position: inside; } /* 목록 들여쓰기 */
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ul>
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ul>
<ul class="inside">
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ul>
</body>
</html>
|
cs |
목록 속성을 한꺼번에 표시하는 list-style 속성
list-style 속성을 사용하면 지금까지 설명한 list-style-type, list-style-image, list-style-position 속성을 한 꺼번에 표시할 수 있다.
|
ol {
list-style : lower-alpha inside;
}
|
cs |
7-5 표 스타일
표 제목의 위치를 정해 주는 caption-side 속성
표 제목은 <caption>태그를 이용해 캡션으로 표시한다.
캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 이용하면 표 아래쪽으로 옮길 수 있다.
| 종류 | 설명 |
| top | 캡션을 표 윗부분에 표시한다. 기본값이다. |
| bottom | 캡션을 표 아랫부분에 표시한다. |
표에 테두리를 그려 주는 border 속성
표 테두리는 border 속성을 사용하는데 표 바깥 테두리와 셀 테두리를 각각 지정한다.
표 전체의 바깥 테두리와 각 셀의 테두리가 모두 표시되어 화면에서는 테두리가 두 줄 그려진 것처럼 보인다.
|
<style>
table {
caption-side: bottom; /* 표 캡션 위치 */
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
}
td, th {
border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
</style>
|
cs |
셀 사이의 여백을 지정하는 border-spacing 속성
표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생긴다.
border-spacing 속성을 사용하면 셀과 셀 사이의 여백을 조절할 수 있다.
border-spacing 속성값은 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정하면 된다.
표와 셀 테두리를 합쳐 주는 border-collapse 속성
<table>과 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시된다.
이때 두 줄로 그냥 둘 것인지 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성이다.
| 종류 | 설명 |
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시한다. |
| separate | 표와 셀 테두리를 따로 표시한다. 기본값이다. |
|
<style>
table {
caption-side: bottom; /* 표 캡션 위치 */
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
border-collapse: collapse; /* 테두리 한줄로 표시 */
}
td, th {
border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
</style>
|
cs |
출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]
'Web Project > CSS' 카테고리의 다른 글
| 트랜지션과 애니메이션 (0) | 2021.03.03 |
|---|---|
| CSS 고급 선택자 (0) | 2021.03.01 |
| 이미지와 그러데이션 효과로 배경 꾸미기 (0) | 2021.02.26 |
| 레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.02.24 |
| CSS의 기본 (0) | 2021.02.19 |
