02-1⠀CSS 텍스트 / 목록 / 표 스타일 속성

 

 

 

<텍스트 관련 스타일>

 

 

선택자 {

font-family: "글꼴 이름1", 글꼴이름2, 글꼴이름3

}

웹 문서에서 사용할 글꼴을 지정

*글꼴이 없을 경우를 대비하여 두번째, 세번째 글꼴까지 지정

*띄어쓰기가 들어간 두 단어 이상의 글꼴 이름은 "" 큰 따옴표로 묶음

*한번 글꼴을 정의하게 되면 문서 안의 모든 자식요소에 같은 글꼴을 사용

 

 

선택자 {

font-size:값

}

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

*키워드 사용시

xx-small < x-small < small < medium < large < x-large < xx-large

*단위 사용시 (주로 사용)

px / pt / ex

em (=16px 12pt , 자기 자신 또는 부모요소에 상속받음)

rem (상대적인 값으로 html 태그에게 상속받음 - 거의 뭐 조상요소)

*백분율 사용시

부모요소의 글자 크기를 기준으로 계산하여 사용 (부모요소의 글꼴크기가 font-size:16px 처럼 단위로 확실히 표현되어있어야함)

 

 

선택자 {

font-style: normal / italic / oblique

}

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

*normal : 기본값 (일반적인 형태로 표현)

*italic : 이탤릭체로 표시 (주로 사용)

*oblique : 이탤릭체로 표시

 

 

선택자 {

font-weigh: 예약어 / 숫자값

}

글자 굵기를 지정할 때 사용

*예약어

lighter (원래보다 더 가늘게) < normal (기본값) < bolder (원래보다 더 굵게) < bold (굵게)

*숫자값

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

 

 

선택자{

color : 색상값;

}

글자색상을 지정

*16진수 : #000ff ...

*hsl : (0, 100%, 50%) / hsla (0, 100%, 50%, 0.5) -알파값은 투명도

*rgb : (0, 0, 255) / rgba (0, 0, 255) / rgba (0, 0, 255, 0.5) -알파값은 투명도

 

 

선택자{

text-align: 속성값;

}

텍스트 정렬

*속성값의 종류

start : 현재 텍스트 줄의 시작 위치에 맞춰 문단 정렬

end : 현재 텍스트 줄의 끝 위치에 맞춰 문단 정렬

left : 왼쪽 정렬 (기본값)

right : 오른쪽 정렬

center : 가운데 정렬

justify : 양쪽에 맞춰 문단 정렬

match-parent : 부모요소를 따라 문단 정렬

 

 

선택자{

line-height: 단위 / 배수 / 백분율;

}

줄 간격을 조절

*단위 : px / 배수 : 2.0 (두배) ... / 백분율 : % (지정 문단의 글자 크기를 기준)

*세로 정렬 : 높이를 나타내는 height 의 속성값과 line-height 의 속성값을 똑같이 지정

 

 

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

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

*속성값

none : 텍스트에 줄 표시 X

underline :  밑줄 표시

overline : 윗줄 표시 (취소선)

 

 

선택자{

text-shadow: none / 가로px 세로px 번짐정도px #색상값;

}

텍스트에 그림자 효과를 줄 때 사용

*속성값

none : 효과 없음

가로 거리 (px) : 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만듬

세로 거리 (px) : 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만듬

번짐 정도 (px) : 양숫값은 그림자 경계 퍼져보이게, 음숫값은 그림자 경계 축소

 

 

선택자{

text-transform: 속성값;

}

텍스트의 대소문자 변환 시 사용 (영문에만 적용)

*속성값

none : 변환 X

capitalize : 첫번째 글자를 대문자로 변환

uppercase : 모든 글자를 대문자로 변환

lowercase : 모든 글자를 소문자로 변환

full-width : 모든 문자를 전각문자로 변환 (가로세로 비율 1:1인 문자)

 

 

선택자{

letter-spacing / word-spacing: 속성값;

}

letter-spacing : 글자와 글자 사이의 간격 조절 (주로 사용)

word-spacing : 단어와 단어 사이의 간격 조절

*속성값 : px, em 같은 단위 / 퍼센트 (%)

 

 

 

 

텍스트 관련 스타일

 

 

 

 

< 웹 폰트 >

 

웹 문서를 서버에 올릴 때 기존에 사용하던 웹 폰트 파일도 함께 업로드

트루타입 글꼴 (.ttf) 를 .woff (주로 사용) 또는 .woff2 .eot 로 변환해야함

 

@font-face { font-family: 'jinafont';

src: local ('jinafont');

*/시스템에 해당 글꼴이 있는지 확인/*

url('font/jinafont.woff')

format('woff');

}

 

*선언순서는 woff > ttf

 

 

 

 

<목록 관련 스타일>

 

 

선택자 {

list-style-type: 속성값;

}

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

*ul 속성값

disc : 채운 원

circle : 빈 원

square : 채운 사각형

*ol 속성값

decimal : 1, 2, 3 ...

decimal-leading-zero : 01, 02, 03 ...

lower-roman : i, ii, iii ...

upper-roman : Ⅰ,Ⅱ,Ⅲ ...

lower-alpha (=lower-altin) : a, b, c ...

upper-alpha (=uppur-altin) : A, B, C ...

*none : 불릿이나 숫자를 없앰

 

 

선택자 {

list-style-image: url ('파일.png');

}

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

* ul { list-style-image: url ('image/dot.png')

 

 

선택자 {

list-style-position: inside / outside ;

}

목록을 들여쓰기 할때 사용

*속성값

inside : 불릿이나 번호를 기본 위치보다 안으로 들여씀

outside : 기본값 (들여쓰기x)

 

 

선택자 {

list-style: 속성값1 속성값2;

}

위 세가지의 목록 속성을 한꺼번에 지정 가능

* ol {list-style: lower-alpha inside ; }

목록을 소문자로 지정하고, 안으로 들여쓰기 됨

 

 

 

 

목록 관련 스타일

 

 

 

 

<표 관련 스타일>

 

 

선택자 {

caption-side: top / bottom;

}

표 제목의 위치를 지정

*속성값

top : 위쪽 (기본값)

bottom : 아래쪽

 

 

선택자 {

border : 선굵기px 선타입 색상;

}

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

*속성

선택자가 table 일 시, {1px 실선 검정색}인 표 테두리가 생김

table { border: 1px solid black; }

선택자가 td, th 일 시, {1px 점선 검정색}인 셀 테두리가 생김

td, th { border: 1px dotted black; }

 

 

선택자 {

border-spacing: 수직px 수평px;

}

셀 사이의 여백을 지정할 때 사용

*속성값

수직px : 세로로 보았을 시, 셀과 셀 사이의 여백 (양옆 여백)

수평px : 가로로 보았을 시, 셀과 셀 사이의 여백 (위아래 여백)

 

https://renenyffenegger.ch/notes/development/web/CSS/properties/border/spacing

 

 

 

td, th {

padding: 속성값;

}

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

 

 

 

선택자 {

border-collapse: 속성값;

}

표와 셀의 테두리를 합칠 때 사용

*속성값

border-collapse : separate (기본값)

표와 셀의 테두리를 따로 표시

border-collapse: collapse

표와 셀의 테두리를 합쳐 하나로 표시

 

https://www.codingfactory.net/10616

 

 

 

 

 

표 관련 스타일