Cording46 [HTML / CSS] 구글 폰트 사용 / 폰트 파일 사용 1. 폰트 파일 사용하는 방법 폰트 파일을 다운받아 웹 페이지에 적용시키는 방법 /* 본인이 가지고 있는 폰트 파일을 사용하는 방법 */ /* 폰트 css파일로 불러오기 */ @font-face{ src: url("폰트 저장 경로/파일명"); font-family: "임의 지정 폰트명" } /* 불러온 폰트 요소에 적용시키기 */ div { font-family: "임의 지정 폰트명" } 2. 구글 폰트 사용하는 방법 구글에서 제공하는 폰트를 끌고와서 사용하는 방법 font.google.com으로 접속 / 한글폰트 "link"태그로 폰트 연결 후 불러오기 2019. 12. 28. [HTML / CSS] CSS 선택자 1. Tag (태그 이름) /* 모든 태그 */ h1 { font-size: 80px; } CSS 적용 대상 O CSS 적용 대상 X 2. Class (클래스) / Id (아이디) /* class 'red' 를 갖는 모든 태그 (class는 '.'를 앞에 붙여표시) */ .red { color: red; } /* id 'blue' 를 갖는 태그 (id는 '#'를 앞에 붙여표시) */ #blue { color: blue; } CSS 적용 대상 O CSS 적용 대상 X CSS 적용 대상 X CSS 적용 대상 O CSS 적용 대상 X CSS 적용 대상 X 3. Children (자식) /* class 'parents'를 갖고 있는 자식 요소 중 모든 태그 */ .parents h1 { color: orange.. 2019. 12. 28. [HTML / CSS] 배경이미지 삽입 1. Background-Repeat (배경이미지 반복) background-repeat 속성 값 설정으로 배경이미지 반복 여부 및 방법 결정 /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repe.. 2019. 12. 26. [HTML / CSS] Box Decorations 1. Border-Radius (둥근 모서리) boder-radius 속성 값으로 설정 radius 속성 값 크기에 비례해서 둥그러짐 radius 속성 값 상하좌우 각각 다르게 설정 가능함 2. Background-Color (배경색) background-color 속성 값으로 설정 배경색을 지정해 줌 배경색을 투명하게 둠(기본값) 3. Box-Shadow (그림자) box-shadow 속성 값으로 설정 (기본값은 none) 그림자 가로 세로 위치만 설정해주면 그림자 생성 그림자 색 설정 (기본값: black) 그림자 흐림(blur): 가로 세로 위치 뒤에 값 추가 그림자 흐림 크기(spread): blur 값 뒤에 값 추가 4. Box-sizing padding과 border 값을 설정하더라도 widt.. 2019. 12. 26. 이전 1 ··· 6 7 8 9 10 11 12 다음
