CSS 스타일 문서에서 사용하는 텍스트 / 목록 / 표 관련 속성들

지나·2022년 3월 8일

🌟 텍스트 관련 속성

font-family

선택자 {
		font-family: "글꼴 이름1", 글꼴2, 글꼴3;}

웹 문서에서 사용할 글꼴을 지정하는 속성

띄어쓰기가 들어간 두 단어 이상의 글꼴 이름은 "" 큰 따옴표로 묶어 표기
첫번째로 정의 된 글꼴이 없을 경우를 대비하여 두번째, 세번째 글꼴까지 지정한다.
문서 내에서 한번 글꼴을 정의하게 되면 문서 안의 모든 자식 요소에 같은 글꼴을 사용

@font-face

@font-face {
		font-family: familyname;   <!--문서 내에서 사용할 웹 폰트의 패밀리명 지정-->
        src: local(familyname),     <!--로컬에 이미 설치 된 웹 폰트의 경로-->
        	 url(font/familyname.woff)  <!--웹 폰트를 다운로드 할 주소-->
        	 format('woff');        <!--다운로드 할 웹 폰트의 형식-->
        font-weight: 속성값;
        font-style: 속성값;}

웹 문서에서 사용할 웹 폰트를 지정하는 속성

font-family : css 문서 내에서 사용할 웹 폰트의 패밀리명

웹 폰트의 패밀리명과 실제 웹 폰트명이 반드시 같아야 하는 것은 아니다.
유지보수를 위해 웹 폰트 패밀리명과 웹 폰트명을 동일하게 해주는 것이 좋긴 함

src : local() 속성과 url() 속성을 사용

local : 로컬에 이미 설치 된 웹폰트의 경로를 () 안에 선언
local 속성은 IE8 이하 브라우저에서는 인식하지 못한다. 또한 사용자 로컬에 폰트가 잘못 설치된 경우 원하는 화면이 노출되지 않을 수 있을 가능성이 높기 때문에 잘 사용하지 않는다.
url : 주로 사용, 웹 폰트를 다운로드 할 주소를 () 안에 선언
위 두 속성은 콤마 (,) 를 사용하여 여러번 선언할 수 있으며, 브라우저에 적용할 수 있는 폰트를 찾을 때까지 선언 순서대로 이동한다.

format : 해당 브라우저에서 지원이 가능한 파일만 다운로드하게 하는 속성으로 불필요한 다운로드를 막는다.

url 속성과 함께 사용한다.
거의 모든 브라우저가 woff 형식을 지원하지만 IE8 이하의 브라우저들은 eot 형식의 파일을 사용 해야 한다. 이러한 브라우저간의 호환성을 위해 woff 파일과 eot 파일을 함께 선언하는 것이 좋다.
브라우저에서 지원이 가능한 파일을 찾을때까지 순서대로 선언되어 해당 파일을 다운로드하게 한다.

font-weight 속성과 font-style 속성의 값을 함께 지정할 수 있다.

font-size

선택자 {
		font-size: 속성값;}

웹 문서에서 사용하는 글자의 크기를 지정

속성값 : 키워드 / 단위 / 백분율

키워드 : xx-small - x-small- small - medium - large - x-large - xx-large

단위 : px / pt / ex / em / `rem``

em : 상대적으로 크기를 정하는 단위로, 자기 자신 또는 상위 요소를 기준으로 함
rem : 상대적으로 크기를 정하는 단위로, 문서의 최상위 요소 (html) 를 기준으로 함

백분율 : 부모요소의 글자 크기를 기준으로 계산

해당 부모요소의 글꼴 크기가 16px 처럼 단위로 확실히 표현되어 있어야 함

font-style

선택자 {
		font-style: normal / italic / oblique;}

글자를 이탤릭체로 지정해야할 때 사용

normal : 기본값, 일반적인 형태로 표현
ltalic : 주로 사용, 이탤릭체로 표현
oblique : 이탤릭체로 표현

font-weight

선택자 {
		font-weight: 예약어 / 숫자값; }

글자 굵기

예약어 : lighter - normal (기본값) - bolder (원래보다 더 굵게) - bold (굵게)

숫자값 : 100 ~ 900 사이의 숫자로 굵기를 표현 (900 이 가장 굵음)

color

선택자 {
		color: 색상값;}

글자 색상

16진수 : 000ff 등등
hsl : (0, 100%, 50%)
hsla : (0, 100%, 50%, 0.5) 알파값은 투명도를 나타낸다.
rgb : (0, 0, 255)
rgba : (0, 0, 255, 0.5) 알파값은 투명도를 나타낸다.

text-align

선택자 {
		text-align: 속성값;}

텍스트 정렬

start : 현재 텍스트 줄의 시작지점에 맞춰 문단을 정렬
end : 현재 텍스트 줄의 끝지점에 맞춰 문단을 정렬
left : 기본값, 왼쪽 정렬
center : 가운데 정렬
right : 오른쪽 정렬
justify : 양쪽에 맞춰 문단을 정렬
match-parent : 부모 요소를 따라 문단을 정렬

line-height

선택자 {
		line-height: 단위 / 배수 / 백분율;}

줄 간격

단위 : px
배수 : 2.0 (두배)
백분율 : % (해당 문단의 글자 크기를 기준)

text-decoration

<p style="text-decoration: 속성값">텍스트</p>

텍스트에 줄을 표시하거나 없앰

none : 텍스트에 줄을 표시하지 않음
underline : 텍스트에 밑줄을 표시
overline : 텍스트에 윗줄을 표시 (취소선)

text-shadow

선택자 {
		text-shadow: 가로거리 세로거리 번짐정도 색상;}

텍스트에 그림자 효과를 주거나 없앰

none : 효과 없음
가로거리 (px) : 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만듬
세로거리 (px) : 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만듬
번짐정도 (px) : 양숫값은 경계를 퍼져보이게, 음숫값은 경계를 축소시킴

text-transform

선택자 {
		text-transform: 속성값;}

텍스트의 대소문자를 변환시킴 (영문 적용)

none : 변환하지 않는다.
capitalize : 첫번째 글자를 대문자로 변환
uppercase : 모든 글자를 대문자로 변환
lowercase : 모든 글자를 소문자로 변환
full-width : 모든 문자를 전각문자로 변환 (가로세로 비율이 1:1 인 문자)

letter-spacing word-spacing

선택자 {
		letter-spacing: 속성값;
        word-spacing: 속성값;}

텍스트 간격

letter-spacing : 주로 사용, 글자와 글자 사이의 간격을 조절
word-spacing : 단어와 단어 사이의 간격을 조절
속성값 : px em 같은 단위를 사용하거나 백분율 % 로 표기

🌟 목록 관련 속성

list-style-type

선택자 {
		list-style-type: 속성값;}

`ul` 의 불릿모양이나 `ol` 의 번호스타일을 지정

none : 불릿이 표시되지 않는다.

ul 에 적용 시 속성값

disc : 불릿 모양을 채운 원으로 지정
circle : 불릿 모양을 빈 원으로 지정
square : 불릿 모양을 채운 사각형으로 지정

ol 에 적용 시 속성값

decimal : 1, 2, 3 ...
decimal-leading-zero : 01, 02, 03 ...
lower-roman : i, ii, iii ...
upper-roman : I, II, III ...
lower-alpha : a, b, c ...
upper-alpha : A, B, C ....

list-style-image

선택자 {
		list-style-image: url('listimage/circle.png');}
        <!--listimage 폴더의 circle.png 파일을 불릿 대신 넣음-->

`ul` 에서 불릿 대신 이미지를 넣을 때 사용

list-style-position

선택자 {
		list-style-position: inside / outside;}

목록을 들여쓰기 할 때 사용

inside : 불릿이나 번호를 기본 위치보다 안으로 들여씀
outside : 기본값 (들여쓰기 되지 않는다.)

list-style

선택자 {
		list-style: lower-alpha inside;}  <!--목록을 소문자 알파벳으로 지정하고 안으로 들여쓰기함-->

위 세가지의 목록 속성을 함께 쓸 수 있는 단축형 속성

🌟 표 관련 속성

caption-side

선택자 {
		caption-side: top / bottom;}

표 제목의 위치를 지정

top : 기본값, 제목을 위쪽에 표기
bottom : 제목을 아래쪽에 표기

border

선택자 {
		border: 선굵기 선타입 색상;}

표와 셀의 테두리를 만들 때 사용

선 굵기 : px
선 타입 : 실선solid 또는 점선 dotted
색상 : 16진수 또는 색상값 (hsl rgb 등)

선택자가 table 일 때는 표에 테두리가 생기고, 선택자가 td, th 일 때는 셀에 테두리가 생긴다.

선택자가 table 일 때

선택자가 td, th 일 때

border-spacing

선택자 {
		border-spacing: 수직여백 수직여백;}

셀 사이의 여백을 지정

여백 값은 px em 같은 단위로 표기한다.

수직여백 : 양 옆 여백, 세로로 보았을 때 셀과 셀 사이의 여백
수직여백 : 위 아래 여백, 가로로 보았을 때 셀과 셀 사이의 여백

padding

td, th {
		padding: 속성값;}

테두리와 내용 사이의 여백을 지정