다운로드 폰트 사용 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 (모서리라운드) 모서리를 라운드로 만들어주는 코드 border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; z-index 요소의 쌓임 순서(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 의사요소 :: 의사요소 (pseudo-elements)는 선택자에 추가하는 키워드로 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다. after 요소의 앞에 의사요소를 생성 및 추가한다. before 요소 뒤에 의사 요소를 생성 및 추가한다. first-line 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다. marker 목록 기호의 스타일을 적용한다. placeholder 입력 요소의 플레이스 홀더(자리표시자) 스타일을 적용한다. 사용가능한 다른 의사요소 선택자 :: 의사요소 { 속성명 : 속성값; } li::first-letter { font-size : 20px; } first-letter 첫번째 글자 = li요소의 첫번째 글자만 크기를 20px로 하겠다 (기본값은 16px) [실습] .. active (의사클래스) active : 사용자가 요소를 활성화했다. (ex:마우스 클릭) 🪐 active [ type = "button" ] : active { background-color: rgb(54, 42, 71); } 선택자 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 선택자의 종류 1.기본 선택자 2.그룹 선택자 3.특성 선택자 4.결합 선택자 5.의사 클래스 6.의사요소 *** 의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다. 사용자와의 상호작용과 관련된 경우에도 스타일을 적용할 수 있어서 유용하다. focus (의사클래스) focus : 요소가 포커스를 받고있을때 🪐 focus 의사클래스 /* hover adtive focus disabled nth-child() */ input : focus { color: white; background-color: tan; } 선택자 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 선택자의 종류 1.기본 선택자 2.그룹 선택자 3.특성 선택자 4.결합 선택자 5.의사 클래스 6.의사요소 *** 의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다. 사용자와의 상호작용과 관련된 경우에도 스타일을 적용할 수 있어서 유용하다. disabled (의사클래스) disabled : 비활성화 상태의 요소 🪐 disabled 의사클래스 /* hover adtive focus disabled nth-child() */ input:focus{ color: white; background-color: tan; } input:disabled{ height: 100px; } 선택자 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 선택자의 종류 1.기본 선택자 2.그룹 선택자 3.특성 선택자 4.결합 선택자 5.의사 클래스 6.의사요소 *** 의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다. 사용자와의 상호작용과 관련된 경우에도 스타일을 적용할 수 있어서 유용하다. nth-child( ) (의사클래스) nth-child() : 형제 사이에서의 순서에 따라 요소를 선택한다 의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다. 사용자와의 상호작용과 관련된 경우에도 스타일을 적용할 수 있어서 유용하다. 🪐 nth-child 형제요소중에서 몇가지만 선택하겠다. /* hover adtive focus disabled nth-child() */ body{ display : flex; justify-content: space-between; } .box{ width: 50px; height: 50px; background-color: blue; color:rgb(255, 255, 255); } /* (3) 3번째 형제에 대해서만 속성을 부여하겠다 .. hover (의사클래스) 선택자 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 선택자의 종류 1.기본 선택자 2.그룹 선택자 3.특성 선택자 4.결합 선택자 5.의사 클래스 6.의사요소 의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다. 사용자와의 상호작용과 관련된 경우에도 스타일을 적용할 수 있어서 유용하다. 👉🏻 의사클래스 실습대상 hover : 마우스 포인터가 요소에 올라가있다 active : 사용자가 요소를 활성화했다. (ex:마우스 클릭) focus : 요소가 포커스를 받고있다 disabled : 비활성화 상태의 요소 nth-child() : 형제 사이에서의 순서에 따라 요소를 선택한다 사용가능한 모든 의사클래스 보기 🪐 hover /* hover.. 이전 1 2 3 다음
