[CSS] 텍스트를 표현하는 다양한 스타일

html, css, js 2023. 2. 14. 00:18

기본형 기호 이해하기!

1. |는 나열한 옵션 중 하나가 값이 되어야 한다는 말이다.

font-size: 값1 |값2 |값3

2. <>는 나열할 때 특정값이 아닌 ~한 유형인 경우 사용한다.

font-size: <절대 크기>|<상대 크기>|<크기>

#글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

<body>태그를 비롯해 <p>, <hn>처럼 텍스트를 사용하는 요소에서 주로 사용한다.

웹 문서에서 글꼴을 지정할때는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을경우를 대비해 두번째 새번째 글꼴까지 생각해야한다.

글꼴을 2개이상 지정할때는 두글꼴 사이에 쉼표를 넣어 구분한다.

두 단어 이상으로 된 글꼴 이름은 한 덩어리라는 것을 알 수 있도록 큰따옴표로 묶는다.

body { font-fmaily : "맑은 고딕", 돋움, 굴림}

웹 문서 전체에 맑은 고딕 글꼴을 적용한다. 만약 맑은 고딩 글꼴이 없다면 돋움을, 돋움마저 없다면 굴림을 적용한다.

<body>태그 스타일에서 한번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식요소에 계속 같은 글꼴을 사용한다.

글자 크기를 지정하는 font-size 속성

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

절대크기 - 브라우저에서 지정한 글자 크기
상대크기 - 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
크기 - 브라우저와 상관없이 글자 크기를 직접 지정
백분율 - 부모 요소의 글자 크기를 기준으로 백분율로 표시

글자 크기로 사용하도록 미리 약속해 놓은 키워드 중에서 하나를 사용할 수 있다.
xx-small < x-small < small < medium < large <x-large < xx-large

2. 단위를 사용하여 글자 크기 지정하기

CSS에선 키워드보다는 단위를 사용하여 글자 크기를 직접 지정한다.
사용하는 단위는 px이나 pt, em 등이며 음숫값은 사용할 수 없다.
예전에는 절대 크기 단위는 px이나 pt를 많이 사용했지만 모바일 기기까지 고려해야 하는 요즘은 상대크기인 em이나 rem을 많이 사용한다.

3. 백분율을 사용하여 글자 크기 지정하기

백분율은 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법으로, 백분율로 계산하기 위해서는 부모 요소의 글꼴 크기가 font-size: 16px처럼 단위로 표현되어 있어야 한다.

이탤릭체로 표시하는 font-style 속성

font-style: normal | italic | oblique

normal : 기본값으로 일반적인 형태로 표시

italic, oblique : 이탤릭체로 표시

글자 굵기를 지정하는 font-weigth 속성

font-weight : normal | bold | bolder | lighter | 100 |200 |300| ...

미리 만들어진 예약어(normal ,bold, border,lighter)나 숫자값을 사용해 굵기를 지정할 수 있다.

normal : 기본값, 보통 굵기 400
bold : 굵게, 700
bolder : 원래보다 더 굵게
lighter : 원래보다 더 가늘게
숫자값 지정 : 100~900 사이의 굵기를 표현한다. 100일수록 가장 가늘다.

<style>
    body{
      font-size:20px;
    }
    h1{
      font-family : 바탕;
      font-size: 3em;
    }
    .accent{
      font-size : 150%; /* 부모 요소 body의 글꼴 크기인 20에 150% 큰 사이즈로 */
      font-weight : 800;
    }
    .italic{
      font-style: italic;
    }
  </style>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <span class ="accent">레드향</span>이라 불린다.</p>
  <p>레드향은 할라봉과 귤을 교배한 것으로</p>
  <p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>

#웹 폰트사용하기

웹 폰트란 ?

앞에서 family-font 속성을 통해, 웹 문서의 텍스트는 사용자 시스템에 설치된 글꼴을 사용해 화면에 표시된다고 설명했다. 그런데 사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여주려면 어떻게 해야할까? 웹 폰트를 사용하면 된다!

웹 폰트를 사용하려면 웹 문서를작성할때 글꼴 정보를 함께 저장해야한다. 웹 문서를 서버에 올릴때 웹 폰트 파일도 함께 업로드한다. 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운로드 된다. 결국 사용자 시스템에 없는 글꼴이라도 웹 제작자가 의도한 대로 텍스트를 보여줄 수 있다.
웹 폰트 업로드하고 사용하기
EOT, WOFF, WOFF2 파일을 많이 사용하는 추세

1. 웹 폰트 파일이 이미 준비되어있는 경우

웹 폰트 파일이 준비되었다면 @font-face속성을 사용하여 웹 폰트를 정의한다.

@font-face{
  font-family: <글꼴 이름>;
  src : <글꼴 파일>[<글꼴 파일, <글꼴 파일>, ..];
  }

<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>

2. 구글 폰트 사용하기

웹 문서에 링크해서 쉽게 사용할 수 있다. 따라해보자

1. 구글 폰트 사이트에서 원하는 웹 폰트 찾기 https://fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

2. 웹 폰트 스타일 복사

3. 웹 문서에 스타일 소스 넣고 결과 확인

<!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-family: 'Nanum Pen Script', cursive;
    }
    </style>
<body>
  <h1>레드향</h1>
  
</body>
</html>

#텍스트 관련 스타일

글자색을 지정하는 color

color를 사용할 수 있는 속성값은 16진수나 rgb, hsl 또는 색상 이름이다.

color: <색상>

1. 16진수로 표현하는 방법

#기호 다음에 6자리의 16진수로 표시한다. 색상을 지정할때 사용하는 가장 기본적인 방법이다.

6자리의 16진수는 앞에서부터 두자리씩 묶어 #RRGGBB로 표시한다. 여기서 RR자리에는 빨간색, GG는 초록색, BB는 파란색의 양을 표시한다. 각색상마다 하나도 섞이지 않음을 나타내는 00 부터 해당 색이 가득 섞였음을 나타내는 ff까지 표현할수있다. 즉 #000000(검은색) ~ #ffffff(흰색)
만약 #0000ff처럼 두 자리씩 중복될경우 #00f로 줄여서 표기가능

2. hsl과 hsla로 표현하는 방법

hsl은 hue 색상, saturation채도, lightness명도의 줄임말이다. hsla는 hsl + alpha(불투명도)를 추가한 것이다.

hue는 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시한다.
채도는 %로 표시하는데 아무것도 섞이지 않으면 채도가 가장 높은 상태이다. 채도에서 0%는 회색톤, 100%는 원래색이다.
명도 또한 %로 표시하는데 0%는 가장 어둡고, 50%는 원래색으로 ,100%는 흰색으로 나타난다.
예를 들어 빨간색은 hsl(0,100%,50%)로 표현할 수 있다.

3. 색상을 영문명으로 표현하는 방법

red, yellow, green처럼 잘 알려진 색상 이름을 사용한다.

4. rgb와 rgba로 표현하는 방법

rgb는 reg, green, blue의 줄임말로 앞에서부터 빨간색,초록색,파란색이 들어 있는 값을 나타낸다.

하나도 섞여있지 않을때는 0으로 표시하고 가득 섞였을때는 255로 표시하며 그 사이의 값으로 각 색상의 양을 나타낸다.
color: rgb(0,0,255); // 파란색
rgba는 rgb+ alpha(불투명도)이다. a(불투명도)는 0~1 값 중에 사용할 수 있으며 1이 가장 불투명한 것이고 0이 가장 투명한것이다.

<!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 표기법 빨강색*/
    }
    </style>
<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 : 부모 요소에 따라 문단 정렬
*/

줄 간격을 조절하는 line-height 속성

한 문단이 두줄을 넘으면 줄간격이 생긴다. 줄간격이 너무 좁거나 넓으면 가독성이 떨어진다.
줄 간격은 정확한 단위로 크기값을 지정하거나 문단의 글자 크기를 기준으로 몇배수인지 백분율로 지정할 수도 있다.
보통 줄간격은 글자크기의 1.5 ~ 2배면 적당하다.
텍스트를 가로가아닌 세로로 정렬할때 line-height속성을 사용한다.

p { font-size: 12px; line-height:24px} /*직접 지정*/
p { font-size: 12px; line-height:2.0;} /*2.0배*/
p { font-size: 12px; line-height:200%} /*200% -> 2배*/

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

텍스트에 밑줄을 긋거나 취소선을 표시한다.

하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 text-decoration속성을 사용하여 없앨 수 있다.

text-decoration: none  /*줄표시안함*/
text-decoration: underline /*밑줄 표시*/
text-decoration: overline /*윗줄 표시*/
text-decoration:line-through /* 취소선 표시*/

텍스트에 그림자 효과를 추가하는 text-shadow 속성

사이트 제목처럼 강조해야 할 글자에 사용하면 눈에 띄게 만들 수 있다.

text-shadow: none | <가로거리> <세로 거리> <번짐 정도> <색상>

/*
<가로 거리> : 텍스트부터 그림자까지의 가로 거리로 필수 속성임, 양숫값은 글자의 오른쪽 음수값은 글자의 왼쪽에 그림자만든다.
<세로 거리> : 텍스트부터 그림자까지의 세로 거리로 필수 속성임, 양숫값은 글자의 아래쪽 음수값은 글자의 위쪽에 그림자만든다.
<번짐 정도> : 그림자가 번지는 정도로, 양숫값을 사용하면 그림자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표시됨
            반대로 음수값은 그림자가 모든 방향으로 축소되어 보인다. 기본값은 0이다.
<색상> : 그림자 색상을 지정함. 한가지만 지정할 수 있고 공백으로 구분해 여러 색상을 지정할 수도 있다. 기본값은 현재글자색
*/

영문자 텍스트의 대소 문자를 변환하는 text-transform 속성

영문자를 표기할때 텍스트의 대소 문자를 원하는 대로 바꿀 수 있음, 영문자에만 적용

text-transform: capitalize  : 첫번째 글자를 대문자로
text-transform: uppercase : 모든 글자를 대문자로
text-transform:  lowercase :모든 글자를 소문자로
text-transform: full-width :가능한 모든 문자를 전각문자로, 전각문자란 가로세로 길이 비율이 같은 문자

글자 간격(자간)을 조절하는 letter-spacing, word-spacing

CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절한다. px,em같은 단위나 퍼센트로 크깃값을 조절한다.

letter-spacing : 0.2em;

#목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type

ul 목록의 경우 다양한 불릿 모양을 넣을 수 있고, ol의 경우 번호 스타일을 지정할수있다.

disc : ●
circle :○
square :■

decimal :10진수 1 ,2 ,3
decimal-leading-zero : 10진수에 0 추가 01,02,03
lower-roman : 로마소문자 i ii iii
upper-roman : 로마대문자 I II III
lower-alpha , lower-latin : 영어 소문자
upper-alpha, upper-latin : 영어 대문자
none : 없음

블릿 대신 이미지를 사용하는 list-style-image속성

list-style-type엔 블릿 모양이 3개뿐이므로 list-style-image를 통해 원하는 블릿 이미지를 넣을 수 있음.

list-style-image: <url> | none

목록을 들여 쓰는 list-style-position

블릿이나 번호 위치를 들여쓴다. inside - > 들여쓰기, outside -> 기본값

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    .inside{
      list-style-position:inside;
    }
    </style>
<body>
   <ul class="inside"> <!--들여쓰기-->
    <li>DO it 시리즈</li>
    <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
   </ul>
   <ul><!--기본-->
    <li>된다 진짜 된다</li>
   </ul>
</body>
</html>

목록 속성을 한꺼번에 표시하는 list-style 속성

list-style 속성을 사용하면 지금까지 설명한, list-style-type / list-style-image / list-style-position 속성을 한꺼번에 표시할수있다!!

ol{
 list-style-type: lower-alpha;
 list-style-position : inside;
 }
 
 
 -> 변환
 
 ol{
  list-style: lower-alpha inside;
  }

# 표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

caption-side: top| bottom

표 제목은 <caption>태그를 이용하는 것은 이미 알것이다. 캡션은 기본적으로 표 위쪽에 표시되지만 cpation-side: bottom으로 사용하면 표 아래쪽으로 옮길 수 있다.

표에 테두리를 그려 주는 border 속성

표 테두리는 표 바깥 테두리 와 셀 테두리를 각각 지정한다.

border: 크기(px) 스타일(solid, dotted 등) 색상;

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>표 스타일</title>
    <style>
			table {
				caption-side: bottom;  /* 표 캡션 위치 */
				border:1px solid black;  /* 표 테두리는 검은 색 실선으로 
        solid 실선*/
			}
			td, th {
				border:1px dotted black;  /* 셀 테두리는 검은 색 점선으로 
        dotted 점선 */
				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 속성

표와 셀에 테두리를 따로 지정하면 셀과 셀 사이에 여백이 생긴다. 이를 조정하는데 쓰인다.

수평거리의 값과 수직거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도된다.

border-spacing: 수평거리 수직거리

표와 셀 테두리를 합쳐주는 border-collapse 속성

표와 셀 사이 여백 크기를 조절하려면? border-spacing
표와 셀 사이 여백을 합쳐서 하나로 표시할것인지? boder-collapse
이 속성은 <table> 태그에 적용되는 스타일에만 지정하면 된다.

border-collapse: collapse | separate

collpse : 표와 셀 테두리를 하나로 합쳐 표현
separate : 표와 셀 테두리를 따로 표시 기본값

 <style>
			table {
				caption-side: bottom; 
				border:1px solid black;  
                border-collapse :collapse;
			}
			td, th {
				border:1px dotted black; 
				padding:10px;  
				text-align:center; 
       
			}

마무리 문제1

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>표 스타일</title>
    <style>
      .container{
        line-height:2.0;
      }
      li{
        list-style-type : none;
      }
			.subject{
        font-weight: bolder;
        color:red;
      }
		</style>
	</head>
  <body>
		<div class="container">
			<h1>최신 웹 디자인 트렌드</h1>
			<ul>
				<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
				<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
				<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
				<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
				<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
				<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
			</ul>
		</div>
  </body>
</html>

마무리 문제 2


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 2</title>
    <style>
			.container {
        width:300px;
        height:70px;     
        margin:0 auto;
        background-color:#444;        
      }    
      h1 {
        text-align: center;
        line-height: 70px;
        color:white;
        text-shadow: 3px 2px 5px #000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>웹 개발 기초</h1>
    </div>
  </body>
</html>

마무리 문제 3

https://lee-ding.tistory.com/39?category=1339299

[HTML] 웹 문서에, 내용 입력하는 태그들

#텍스트 입력하기 제목 태그 : n의 자리에는 1~6의 숫자가 들어가며 1부터 6으로갈수록 제목 크기가 작아진다. 레드향 레드향 샐러드 레시피 상품 구성 텍스트 단락을 만드는 태그: 태그 사이에 텍

lee-ding.tistory.com

배경색을 지정하는 background속성

background : 색상

요청 사항

1. 표와 셀에 테두리(1px solid black)을 적용하고 한줄로 합쳐 표현 border-collapse이용

2. cpation 표 아래로

3. 각 셀에 padding:10px 적용 -> td, th 스타일적용

4. 배경색 첫번째 행과 열에 적용 -> <col>태그 이용해 열에 적용, 행은 class 이용 // 배경색은 background 속성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 2</title>
    <style>
      table{ /*테이블 스타일*/
        border : 1px solid black;
        border-collapse:collapse;
        caption-side:bottom;
        /*caption-size속성이나 border-collapse속성은 table태그 스타일에만 적용해도된다. */}
      
      th,td{ /*셀 스타일*/
        border : 1px solid black;
        padding: 10px;
      }
      .heading{
        background: #eee;
      }

    </style>
    
  </head>
  <body>
    <table>
      <caption>2019 국민 독서실태</caption>
      <colgroup>
      <col class="heading">
      <col>
      <col> 
      </colgroup>
      <!--
        <colgroup>, <col>태그는 반드시 <caption>태그 다음에 써야한다, 
        즉 표의 내용이 시작되기 전에 열의 상태를 알려준다.
        <col>태그를 사용할 때는 <colgroup>태그 안에 
        <col>태그를 포함해 표 전체 열의 개수만큼 <col>태그를 넣어야한다.
        1열에 heading 적용 1열-> 구분, 종이책, 전자책, 오디오북
        2,3열은 적용안함
      -->
      <thead>
        <tr class="heading">
          <th>구분</th>
          <th>성인</th>
          <th>독서자</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>종이책</th>
          <td>6.1권</td>
          <td>11.8권</td>
        </tr>
        <tr>
          <th>전자책</th>
          <td>1.2권</td>
          <td>7.1권</td>
        </tr>
        <tr>
          <th>오디오북</th>
          <td>0.2권</td>
          <td>5.5권</td>
        </tr>      
      </tbody>
    </table>
  </body>
</html>

마무리 문제 4

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>연습문제 4</title>
	<style>
		#container {  /* 전체 콘텐츠를 감싸는 div */
			width:650px;  /* 너비 */
			margin:0 auto;  /* 가로로 중앙에 배치 */
			padding:5px;	/* 테두리와 내용 사이의 패딩 여백 */		
		}
		#check {   /* 텍스트 부분을 감싸는 div */
			width:640px;  /* 너비 - 그림 너비 값에 맞춤 */
			border:1px solid #ccc;  /* 테두리 */
		}		
		h1 {
			color: white; /* 글자색 */
			font-size: 1em; /* 글자 크기 */
			background: #222; /* 배경색 */
			margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
			padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
		}		
    h2{
      color:#ff0000;
      font-size: 1.5em;
      text-align: center;
    }
    p{
      font-size: 1.2em;
      line-height: 2em;
      text-align:center;
      font-weight: bold;
    }
    .accent{
      color:#0000ff;
    }
    .smalltext{
      font-size:0.7em;
    }
	</style>
</head>

<body>
	<div id="container">
		<img src="./apple.png" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">		
		<div id="check">
			<h1>확인하세요</h1>
			<h2>주문 및 배송</h2>
			<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
			2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
			<hr>
			<h2>교환 및 환불</h2>
			<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
			고객센터로 전화주세요</p>
			<hr>
			<h2>고객센터 </h2>
			<p>0000-0000<br>
			<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
		</div>
	</div>
</body>
</html>

'html, css, js' 카테고리의 다른 글

[CSS] display 속성 (0)	2023.02.14
[CSS] 스타일 속성 모음 (0)	2023.02.14
[CSS] 스타일 시트 종류/ CSS 기본 선택자 / 스타일 우선순위 (0)	2023.02.12
[HTML] form 태그 (0)	2023.02.10
[HTML] HTML 태그 모음 (0)	2023.02.09

ABOUT ME

lee-ding lee-ding

#글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

글자 크기를 지정하는 font-size 속성

이탤릭체로 표시하는 font-style 속성

글자 굵기를 지정하는 font-weigth 속성

#웹 폰트사용하기

#텍스트 관련 스타일

글자색을 지정하는 color

텍스트를 정렬하는 text-align 속성

줄 간격을 조절하는 line-height 속성

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

텍스트에 그림자 효과를 추가하는 text-shadow 속성

영문자 텍스트의 대소 문자를 변환하는 text-transform 속성

글자 간격(자간)을 조절하는 letter-spacing, word-spacing

#목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type

블릿 대신 이미지를 사용하는 list-style-image속성

목록을 들여 쓰는 list-style-position

목록 속성을 한꺼번에 표시하는 list-style 속성

# 표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

표에 테두리를 그려 주는 border 속성

셀 사이의 여백을 지정하는 border-spacing 속성

표와 셀 테두리를 합쳐주는 border-collapse 속성

배경색을 지정하는 background속성

'html, css, js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

#글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

글자 크기를 지정하는 font-size 속성

이탤릭체로 표시하는 font-style 속성

글자 굵기를 지정하는 font-weigth 속성

#웹 폰트사용하기

#텍스트 관련 스타일

글자색을 지정하는 color

텍스트를 정렬하는 text-align 속성

줄 간격을 조절하는 line-height 속성

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

텍스트에 그림자 효과를 추가하는 text-shadow 속성

영문자 텍스트의 대소 문자를 변환하는 text-transform 속성

글자 간격(자간)을 조절하는 letter-spacing, word-spacing

#목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type

블릿 대신 이미지를 사용하는 list-style-image속성

목록을 들여 쓰는 list-style-position

목록 속성을 한꺼번에 표시하는 list-style 속성

# 표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

표에 테두리를 그려 주는 border 속성

셀 사이의 여백을 지정하는 border-spacing 속성

표와 셀 테두리를 합쳐주는 border-collapse 속성

배경색을 지정하는 background속성

'html, css, js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바