728x90 반응형 CSS6 [CSS] border에 gradation,gradient 적용하기 ( + radius 포함 ) border에 gradation,gradient 적용하기 ( + radius 포함 ) 오늘도 디자인시안으로 부터 미션을 받은 나.. 😭😅 웹브라우저에서 적용되는 css 스타일코드가 많은 발전이 되었다.브라우저 또한 IE의 하위브라우저도 많이 종료되었고, 모던브라우저로 대부분 크로스브라우징도 또한 큰 이슈 없이 적용되고 있다. 하지만!크로스브라우징에 이슈가 없어 보이는 border에 그라데이션을 적용하는 부분에서 이슈가 발생했다! 😱 일단!border에 그라데이션을 넣기 위해서는 border-image:linear-gradient() 속성을 사용해야 한다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 챕터 1️⃣ border-image - linear gradien.. 2024. 12. 6. [CSS] 스크립트 없이 CSS만으로 유동적인 정렬 맞추기(리스트 만들기) 스크립트 없이 CSS만으로 유동적인 정렬 맞추기(리스트 만들기) 안녕하세요~아래와 같은 시안을 받았을 때, 퍼블리싱 방법으로 어떤 방법이 있을까요? 스크립트 사용?백그라운드에 이미지를 넣는 방법? Nooooo.ᐟ.ᐟ.ᐟ.ᐟ 지금부터 css만으로 유동적으로 길어지는 리스트를 만드는 방법을 알려드릴게요~ 목표!!1. 텍스트가 많은 항목에 따라 리스트 아이템의 높이가 유동적으로 변하도록 만들기!2. 각 항목 사이에 선을 넣어 구분을 시작적으로 표현3. 스크립트나 백그라운드 이미지를 사용하지 않고 오직 css만으로 구현하기! background-image를 통한 gradient를 활용하는 방법입니다!! 반복되어야 하는 라인은 상위 부모에 background-image를 넣습니다단, 흰색배경색과 라인색을 li.. 2024. 9. 20. [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 반응형
