CSS 4

css @font-face나 @import 없이 link만 있는 경우 웹폰트 쓰는법 법? (웹폰트 사용법, 눈누, 구글폰트 사용법 포함)

(눈누, 구글폰트에서 웹폰트 소스 가져오는법은 내용 하단에 있음) ➜ 웹폰트를 삽입하는 법 @font-face, @import, 1. @font-face와 @import먼저 @font-face와 @import는 눈누나 구글폰트 등 웹폰트 검색 사이트에서 웹폰트 소스를 복사하여 css파일 상단에 붙여넣으면 바로 사용할 수 있다./* @import 예시 ------------------*/ @import url('https://fonts.googleapis.com/css2?family=Saira:wght@100&display=swap'); /* @font-face 예시 ------------------*/ @font-face { font-family: 'GmarketSansMedium'; src: url('..

CSS 2023.10.21

css color 투명도 hex로 간단하게 주기

우리가 일반적으로 사용하는 hex 속성값은 6자리로 이뤄져 있는데, 이 뒤에 투명도 값 2자리를 추가해주기만 하면 간단하게 투명도를 줄 수 있다. /* hex8 속성값 예시 */ .hex { color: #67A0FF33; } 아래는 각 Opecity에 해당하는 Alpha값이다. 100가지나 되는 두자리 값을 외워야 되나 걱정할 수 있지만, 아니다. 투명도 알파값도 앞의 여섯자리와 마찬가지로 당연히 Hexadecimal! 16진수로 이루어져 있기 때문이다. 00(투명) ~ FF(불투명)이란 것을 생각해서 대충 때려 넣다보면 금방 익숙하게 쓸 수 있을 것이다. 100% — FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% — ED 92% — EB ..

CSS 2023.10.21

css 특정 요소의 부모(=조상)요소를 선택하고 싶을 때 :has()

➜부모:has(자식) || 직계조상:has(자손) 예로들만한 것이 생각이 안나서;; 일단 간단한 예를 들어보자..음.... 이렇게 쓰는지는 모르겠지만 그냥 예로 드는거니까😛;; 위의 이미지와 같이 리스트를 만들 때, ' N 아이콘이 붙은 제목만 그린&볼드처리' 하고 싶다고 치자. 아래와 같이 새 글이 등록 되면 스크립트로 제목 내용 끝에 바로 N 를 붙이기로 했다. (= 제목안에 append(=뒤에 끼워넣기)하기로 했다.) 공지사항 제목 공지사항 제목 이 때, 해당 제목에만 스타일을 주기 위해 아래와 같이 선택자를 지정할 수 있다. /*를 자식으로 가지는 부모-----------------------------*/ .title:has(.new) { color: green; font-weight: bold..

CSS 2023.10.21