CSS의 속성들
속성 설명
color 텍스트 색상
font-weight 볼드체 설정
padding 요소의 가장자리와 내용간의 간격
font-size 폰트의 크기
backgroud-color 배경색
border 요소를 감싸는 경계선
font-style 이탤릭체 설정
backgroud-image 배경 이미지
text-align 텍스트 정렬
list-style 리스트 스타일
폰트
속성 설명
font 한줄에서 모든 폰트 속성을 설정할 때 사용
font-family 폰트 패밀리 설정
font-size 폰트의 크기 설정
font-style 폰트 스타일 설정 ,기울임꼴
font-weight 폰트의 볼드체 여부 설정
순서
font-style
font-weight
font-size
font-family
웹폰트 검색
웹사이트에 구글폰트 적용하기
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
font: 2.0em 'Shadows Into Light', cursive;
Example
Set some font properties with the shorthand declaration:
p.a {
font: 15px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
폰트 크기 설정
폰트의 단위
pt – 포인트
px - 픽셀
% - 퍼센트
em – 배수(scale factor)
키워드 – xx-small, x-small, small, medium, large, x-large, xx-large
이미지 background
background-position:
top left top center
body{
background-image: url(../images/딸기스무디.jpg);
background-repeat: repeat-x; / no-repeat repeat /
background-position: center right;
background-attachment: scroll; / scroll fixed/
background-size: 400px 400px;
background-color: yellow;
}
hr{
clear: both;
}
=> 지정된 속성을 해제시킨다.
text-shadow: 10px 5px 23px red; => x축 y축 흐린정도 색깔
링크 스타일
a:link - 방문되지 않은 링크의 스타일
a:visited - 방문된 링크의 스타일
a:hover - 마우스가 위에 있을 때의 스타일
a:active - 마우스로 클릭되는 때의 스타일
리스트 스타일
속성 설명
list-style 리스트에 대한 속성을 한줄로 설정한다.
list-style-image 리스트 항목 마커를 이미지로 지정한다.
list-style-position 리스트 마커의 위치를 안쪽인지 바깥쪽인지를 지정한다.
list-style-type 리스트 마커의 타입을 지정한다.
테이블 스타일
속성 설명
border 테이블의 경계선
border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부
separate|collapse|initial|inherit;
width 테이블의 가로 길이
height 테이블의 세로 길이
border-spacing 테이블 셀 사이의 거리
empty-cells 공백 셀을 그릴 것인지 여부
table-align 테이블 셀의 정렬 설정
둥근경계선
스타일에
border-radius: 30px;
letter-spacing: 10px; => 글자 간격
