1.1 배경색과 배경범위 지정 background-color background-clip : border-box padding-box content-box 1.2 배경 이미지 지정 background: url() background-image: url("이미지파일경로") background-repeat : repeat-x repeat-y no-repeat background-position: ; 수평 위치 : left | center | right | 길이값 | % 수직 위치 : top | center | right | 길이값 | % background-origin : border-box padding-box content-box background-attachment : scroll | fixed ba..
CSS와 box model box-sizing : 박스 모델의 크기를 계산 border-box : 테두리까지 포함해서 너빗값 ( 총 너비 = width+2(margin+padding+border) ) content-box : 콘텐츠 영역만 너비값을 지정 (default) box-shadow : 박스 모델에 그림자 효과 box-shadow : inset 테두리 스타일 border: border-style : solid | dotted | dashed | double border-width : | thin | medium | thick border-color border-radius : 둥근 테두리 50% 👉 원 형태의 이미지 생성 여백을 조절하는 속성 margin 웹 문서를 가운데 정렬하기 👉 margin..
1. 글꼴 관련 스타일 font-size - px | rem | em | % font-style - normal | italic | oblique font-weight - normal | bold | bolder | Lighter font-family : 웹 문서에 사용할 글꼴 지정 body{ font-family: "맑은 고딕", 돋음, 굴림 /* 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶는다 */ } 1.2 웹 폰트 사용 @font-face { font-family: cheri; src: url(../fonts/cheri.ttf); } .font-md{ font-family: cheri, '글꼴이름', serif; font-size: 40px; } 1.3 텍스트 관련 스타일 color text-..
🎈참고. CSS 선택자 1.1 기본 선택자 * tag명 .클래스명 #id명 tag1, tag2 [속성명] tag명[속성명] [속성명=값] [속성명~=값] [속성명:=값] [속성명^=값] [속성명$=값] tag > tag2 tag tag2 tag + tag2 tag ~ tag2 1.2 가상 클래스(Pseudo class) 선택자 :focus :first-child :last-child :only-child :nth-child(n) :not(선택자) :enable :disable :checked :empty :link : 방문하지 않은 링크 :visited : 방문한 링크 :hover : 지정된 요소에 마우스가 올라간 경우 :active : 지정된 요소가 활성화된 경우 a:link { /* 방문하지 않은 a..
