1. 적용시킬 폰트의 위치경로와 format을 적어준 뒤, weight을 지정해준다. @font-face { src : url('파일위치') format('폰트형식') 파일 포멧 분류 ttf 👉🏻 format('truetype') or format('opentype') otf 👉🏻 format('opentype') woff 👉🏻 format('woff') woff2 👉🏻 format('woff2') @font-face { font-family: "폰트이름"; src: url("원하는 폰트 위치.폰트형식") format("폰트형식"), url("원하는 폰트 위치.폰트형식") format("폰트형식"); } 폰트 다운로드 사이트 영문폰트 - dafont 한글폰트 - 눈누 한글/영문 - 산돌구름 ￣￣￣￣￣￣￣..

구글 웹폰트 사용방법 : 이 방법이 가장 편하고 쉽다 1. 원하는 폰트 선택 2. 내가 사용할 weight를 선택해준다 +Select this style 3. 우측에 / @import 형식으로 소스코드가 생성된다 테스트 상태에서는 jua 폰트와 noto serif korean 두가지 폰트가 선택되어 있다. 4. 소스코드를 복사해 넣어준다. - 생성된 코드는 html 소스 head부분에 넣어주고 @import - 생성된 코드는 css 소스 상단에 넣어준다. 5. CSS에서 사용할때에는 CSS rules to specify families 를 확인하고 적용한다. html { font-family: 'Jua', sans-serif; body { font-family: 'Noto Serif KR', serif;..

모서리를 라운드로 만들어주는 코드 border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래;

요소의 쌓임 순서(stack order)를 정의할 수 있다. 정수 값을 지정하여 *쌓임맥락 (stacking context)에서의 레벨(순서)을 정의하는 방식으로 적용되며 *위치 지정 요소에 대해 적용할 수 있는 속성이다.=포지션이 지정된 요소에만 적용 가능하다. * 위치 지정요소 positioned element position속성이 정의되어있는 요소를 말한다. * 쌓임맥락 동일한 위치에 요소들이 배치되면 요소들은 z축에서(겹쳐서) 쌓이게 된다. 나중에 생성된 요소가 위에 배치된다. z-index의 기본값은 auto로써 이것은 새로운 쌓임맥락이 형성되지 않은 자연스러운 상태며 z-index로 정수값을 지정해주면 숫자가 높은 순서대로 위쪽에 배치되게 된다. ▼ z-index 적용 전 z-index div..

모든 CSS 속성에 사용 가능한 키워드, '전역값' 이라 표현하기도 함. inherit 상위 요소로부터 해당 속성의 값을 물려받겠다. initial 기본값(초기값)을 사용한다. unset 상위요소로부터 물려받을 수 있으면 물려받고 그럴 수 없으면 기본값을 사용하겠다. 상속 속성에 대해서는 inherit처럼 적용되고 상속되지 않는 속성에 대해서는 initial처럼 적용된다. ◾ inherit - 상위속성값 상속 div{ display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; color: tomato; font-size: 18px; border: 3px dashed red; } p{ color: inhe..

⭕상위요소로부터 상속되는 속성 clolf font-family font-size font-weight text-align cursor ❌상위요소로부터 상속되지 않는 속성 background-color background-repeat background-image border display 더 많은 속성별 상속여부 텍스트는 p 태그이나 스타일값은 p의 상위요소인 div에 줌 상속 div{ display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; color: tomato; font-size: 18px; border: 3px dashed red; } divdiv