CSS 글꼴, 목록, 표
인라인 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
외부 스타일 시트 : 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용
(같은 폴더에 있으면 그냥 파일명만 주고, 다른데에 나와있으면 폴더명까지 같이 적어서 경로(위치)를 표시해 준다.)
CSS 기본 선택자
| 종류 | 사용 방법 | 설명 |
| 전체 선택자 | * {속성선언;} | 모든 태그에 스타일을 적용한다. |
| 타입 선택자 | 태그 {속성선언;} | 지정한 태그에 스타일을 적용한다. |
| 클래스 선택자 | .클래스이름 {속성선언;} | 지정한 클래스에 스타일을 적용한다. |
| 아이디 선택자 | #아이디 {속성선언;} | 지정한 아이디에 스타일을 적용한다. |
| 속성 선택자 | [속성] {속성선언;} [속성=값] {속성선언;} |
지정한 속성 또는 속성값이 있는 태그에 스타일을 적용한다. |
그룹 선택자 : 쉼표로 여러 선택자를 한꺼번에 정의해줄 수도 있다.
+클래스 그룹 선택자
.a, .b, .c{} : 쉼표는 각각의 항목을 or로 적용한다.
.a .b .c{} : 뒤에 나온 선택자가 하위 개체로 지정된다.(A요소 내부의 B요소 내부에 있는 C요소에만 적용 가능)
.a.b.c{} : class="a b c" 처럼 모든 속성을 한번에 적용시킨다.
캐스캐이딩(Cascading)
캐스캐이딩(Cascading) : 선택자에 여러 스타일이 적용될 때 우선순위에 따라 위에서 아래로 스타일이 적용된다.
스타일 우선 순위 :
- 얼마나 중요한가에 따라(사용자→제작자→브라우저)
- 얼마나 한정 지을 수 있는가에 따라(!important→ 인라인 스타일→ id 스타일→ 클래스 스타일→ 타입 스타일)
- 소스 순서에 따라
상속 : 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨.
스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다.
(ex. 글자 색은 상속되지만 배경 색은 상속되지 않음)
텍스트 스타일
글꼴, 텍스트
font-family : 글꼴 지정(지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정할 수 있다.)
<style>
*{font-family:돋음, 굴림;}
</style>
font-size : 글꼴 크기 지정
font-style : 글꼴 모양 지정
normal : 보통 모양.
italic : 기울임꼴
oblique : 기울임꼴
initial : 기본값으로 설정
inherit : 부모 요소의 속성값 상속
font-style: normal | italic | oblique | initial | inherit
font-weight : 글자 굵기 지정
normal : 보통 굵기(400)
bold : 굵은 굵기(700)
bolder : 상속된 값보다 굵은 굵기
lighter : 상속된 값보다 얇은 굵기
number : 100, 200, 300, 400, 500, 600, 700, 800, 900
initial : 기본값으로 설정
inherit : 부모 요소의 속성값 상속
웹 폰트 사용(구글 폰트 복사) : 임포트문 붙여주고 font-family에 글꼴 이름 붙여줌
https://fonts.google.com/?subset=korean
<style>
@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
h1 {
font-family: 'Gugi', cursive;
}
</style>
color : 글자 색 지정
text-align : 문단 정렬 방법 지정
start : 현재 텍스트 줄의 시작위치에 맞추어 정렬
end : 끝 위치에 맞추어 정렬
justify : 양쪽에 맞추어 정렬
match-parent : 부모 요소를 따라 정렬
text-align : start | end | left | right | center | justify | match-parent
line-height : 줄 높이 지정(자간거리)
숫자와 백분율은 부모 요소를 기준으로 몇 배인지 지정. 보통 글자 크기의 1.5~2배 정도면 적당하다.
normal : 웹브라우저에서 정한 기본값. 보통 1.2( 글자의 1.2배 )
length : 단위를 적용하여 길이를 고정함 ( ex. 20px )
number : 글자 크기의 몇 배인지로 줄 높이를 정함 ( 보통 기본값 1.2 )
percentage : 글자 크기의 몇 %로 줄 높이로 정함 (ex. 60% -글자크기를 기준이므로 100%가 1가 동일하다.)
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속
line-height: normal | length | number | percentage | initial | inherit
text-decoration : 텍스트에 줄 표시
none : 선을 만들지 않습니다.
underline : 글자 아래에 선을 만듭니다.
overline : 글자 위에 선을 만듭니다.
line-through : 글자 중간에 선을 만듭니다.
text-decoration: none | underline | overline | line-through
text-shadow : 그림자 효과
text-shadow: 가로거리px 세로거리px [번짐정도px] 색상
text-transform : 대소문자 변환
none : 변환X
capitalize : 첫번째 글자를 대문자로 변환
uppercase : 모든 글자를 대문자로 변환
lowercase : 모든 글자를 소문자로 변환
full-width : 전각문자로 변환
text-transform: none | capitalize | uppercase | lowercase | full-width;
letter-spacing : 글자간 간격
word-spacing : 단어간 간격
letter-spacing : 0.2em;vertical-align: middle
중앙정렬
목록
list-style-type : 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꿈
| disc | ● |
| circle | ○ |
| square | ■ |
| decimal | 1, 2, 3, ... |
| decimal-leading-zero | 01, 02, ... |
| lower-roman | ⅰ, ⅱ, ⅲ, ... |
| upper-roman | Ⅰ, Ⅱ, Ⅲ, ... |
| lower-alpha, lower-latin | a, b, c, ... |
| upper-alpha, upper-latin | A, B, C, ... |
| none | 불릿이나 숫자를 없앰 |
list-style-image : 순서 없는 목록의 불릿을 이미지로 바꿈
list-style-image: <url(이미지 파일 경로)> | nonelist-style-position : 불릿이나 번호를 들여쓰거나 내어쓸 수 있음
list-style-podition : inside | ouside;list-style : list-style-type, list-style-position, list-style-image 속성을 한꺼번에 표기해줄 수 있음.
표
caption-side : 캡션(설명글)을 표 아래쪽에 표시 가능(디폴트는 top)
caption-side : bottom;
border : 표의 테두리 지정
너비(border-width) : medium | thick | thin | length | initial | inherit
모양(border-style) : dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit
색깔(border-color)
border: 너비 모양 색깔
border: 1px solid black;
border-collapse : 테두리 한줄로 표시(표 테두리와 셀 테두리를 합칠 것인지)
border-collapse : collapse;
table-layout : 셀 안 내용의 양에 따라 셀 너비를 조절
auto : 자동 조절(기본값)
fixed : 내용의 양과 상관없이 고정
initial : 변경된 테이블을 기본값(auto)으로 설정
inherit : 상속받음
table-layout : auto | fixed | initial | inherit;
empty-cells : 빈 셀의 테두리를 표시할지 말지 지정
empty-cells: show | hidebackground-color