728x90 반응형 CSS4 [SCSS] 반복문 @each / index() 함께 사용 / for in 문 유사 반복문 @each / index() 함께 사용 / for in 문 유사 안녕하세요~@each 문은 js의 for in 문과 유사하게 사용할 수 있습니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 @each 문@each $변수 in 데이터 { // 반복 내용}// scss 예)// List Data$fruits: (apple, orange, banana, mango);.fruits { @each $fruit in $fruits { li.#{$fruit} { background: url("/images/#{$fruit}.png"); } }}// css 컴파일 예).fruits li.apple { background: url("/image.. 2024. 4. 12. [CSS] 웹폰트 - 다이나믹 서브셋(Dynamic Subset) / 동적분할 다운로드 / 동적 하위 집합 폰트 호출에 그동안 의구심을 갖지 않고 통상적으로 사용하고 있던 웹폰트 설정중, 다이나믹 서브셋에 알아보았다. 프로젝트 중, QA에서 먼저 이슈제기를 해주셔서 찾아보게되었고 덕분에 새로운 지식을 습득하게 되었다. 👍 HTML 삽입 미리보기할 수 없는 소스 [ QA건 ] 항목 내용 QA 이슈 폰트 호출 확인 건 QA 내용 개발자도구 > 네트워크 > 로드된 폰트 확인시, 다량의 폰트가 호출됨 -> 필요한 폰트만 호출돼야 함 QA 캡쳐 QA Close 다이나믹 서브셋으로 실제 컨텐츠에 담긴 문자만 유니코드 방식으로 로드되므로 이슈없음 Close [ 다이나믹 서브셋(Dynamic Subset) 이란? ] 웹폰트를 사용할 때, CSS의 unicode-range 속서을 이용해 유니코드 영역의 문자가 사용될 때 실제.. 2023. 8. 25. [CSS] 첫 번째 자식 요소와 마지막 자식 요소 제외시키기 첫 번째 자식 요소와 마지막 자식 요소 제외시키기 안녕하세요~ 첫 번째 자식 요소와 마지막 자식 요소를 제외시킬 때 어떻게 CSS style을 작성하시나요? 예를 들어, list를 만들 때 첫 번째 요소에는 margin여백을 넣지 않고 다른 요소들에게는 margin을 넣고 싶을 때! 아래의 코드처럼 작성하고 계신가요? ``` ``` 첫번째 두번째 세번째 네번째 ``` 이렇게 작성하게 되면, li에 margin-left:10px 스타일이 적용되고 난 후에 li:first-child에 의해 margin-left:0으로 오버 라이딩(overriding)되게 됩니다. :last-child를 사용해도 첫 번째와 마지막의 차이이지 동일하게 오버라이딩이 됩니다. 첫 번째 li 요소에 별도의 클래스를 추가도 오버라이딩.. 2022. 4. 4. [CSS] font 두께(font-weight) 선언 시 유의점 CSS로 폰트 선언 시 유의점 일반적인 font-weight 스타일은 normal, bold처럼 굵기를 영문 텍스트로 표기한다. 하지만, normal과 bold 이외의 굵기를 표현하는 폰트에서는 숫자로 가중치를 표기하는 방식이 폰트 정의에 좋은 방법이다. ex) NotoSans-Medium 등등 [일반적인 가중치의 이름 매핑] 가중치 이름 매핑 100 Thin (Hairline) 200 Extra Light (Ultra Light) 300 Light 400 Normal 500 Medium 600 Semi Bold (Demi Bold) 700 Bold 800 Extra Bold (Ultra Bold) 900 Black (Heavy) [참고자료] - MDN : https://developer.mozilla... 2022. 3. 20. 이전 1 다음 728x90 반응형
