728x90 반응형 분류 전체보기43 [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. [HTML] PIN번호 vs 비밀번호 업무 진행 중, 'PIN번호'를 작업하면서 기존에 사용되던 비밀번호와의 차이점 및 보안 관련한 PIN번호 마크업 하는 방법에 대해 문서화 PIN번호란? PIN번호(PIN Number) : 개인식별번호 (Personal Identification Number) PIN번호와 비밀번호의 유사점 '본인 확인 용도'로 동일한 의미로 사용 HTML 삽입 미리보기할 수 없는 소스 PIN번호와 비밀번호의 차이점 구분 비밀번호 PIN번호 사용문자 - 일반적으로 알파벳 대/소문자, 숫자, 특수문자 등을 사용 - 숫자 0 ~ 9 사용 조합 가능 문자 갯수 - 스페이스 키까지 포함해 95개의 문자 사용 가능 - 10개 문자 단위 조합 가능한 경우의 수는 약 6,000만조 개 - 숫자 10개만 사용하므로 조합 가능한 경우의 수.. 2023. 9. 4. [CSS] 웹폰트 - 다이나믹 서브셋(Dynamic Subset) / 동적분할 다운로드 / 동적 하위 집합 폰트 호출에 그동안 의구심을 갖지 않고 통상적으로 사용하고 있던 웹폰트 설정중, 다이나믹 서브셋에 알아보았다.프로젝트 중, QA에서 먼저 이슈제기를 해주셔서 찾아보게되었고덕분에 새로운 지식을 습득하게 되었다. 👍 HTML 삽입미리보기할 수 없는 소스 [ QA건 ]항목내용QA 이슈폰트 호출 확인 건QA 내용개발자도구 > 네트워크 > 로드된 폰트 확인시, 다량의 폰트가 호출됨-> 필요한 폰트만 호출돼야 함QA 캡쳐QA Close다이나믹 서브셋으로 실제 컨텐츠에 담긴 문자만 유니코드 방식으로 로드되므로 이슈없음 Close [ 다이나믹 서브셋(Dynamic Subset) 이란? ]웹폰트를 사용할 때, CSS의 unicode-range 속서을 이용해 유니코드 영역의 문자가 사용될 때 실제 컨텐츠에 담긴 문자만.. 2023. 8. 25. 맥북 스티커 자국 변색 제거 맥북 스티커 자국 변색 제거하기 HTML 삽입 미리보기할 수 없는 소스 안녕하세요~ 맥북을 사용하면서 상판에 스티커를 붙여 꾸미시는 분들이 많이 계신 걸로 알아요~ 저도 몇개 붙여 놓았거든요 😁 붙여 놓았던 스티커를 떼고 다른 스티커를 붙이는 경우, 혹은 사용하던 맥북을 다른 사람에게 선물이나 중고 판매를 하는 경우에 스티커를 떼내야 하는데요. 이런 경우, 오랫동안 붙여진 스티커가 자국이 남아 맥북 상판에 변색이 생기는 경우가 있습니다. 빛을 비춰 여러각도에서 확인해보면 더더욱 자국이 잘 보입니다. HTML 삽입 미리보기할 수 없는 소스 이번 포스팅에서는 이런 변색 자국을 없애는 방법을 알려드립니다! 스티커 끈끈이는 알콜티슈 또는 알코올 스왑으로 닦아주세요. 스티커 자국은 치약으로 닦아주세요. 치약을 자.. 2022. 8. 30. [인천 주변 맛집] 두메산골 능이 돌문어 백숙 안녕하세요 😃 최근 보양식으로 먹은 음식 중에 여러분들과 공유하고 싶은 음식점이 있어 포스팅을 작성하게 되었습니다!! 그 음식점은 바로 인천 계양구에 위치한 두메산골 식당입니다. 메뉴 먼저 알아볼까요? 1번 능이 돌문어 닭/오리백숙과 2번 능이 한방 닭/오리백숙이 유명합니다. 저는 3번 한방백숙에 돌문어를 추가해서 먹고, 추가로 해물 부침개까지 먹고 왔습니다! HTML 삽입 미리보기할 수 없는 소스 밑반찬들도 메인 메뉴 못지않게 잘 나오는데요~ 특히 마늘장아찌 무침과 도토리묵무침이 일품이었습니다! 찰밥이 있는데, 보기에는 적은 양으로 보이지만 꽤나 많은 양이었습니다. 찰밥은 백숙을 먹으면서 먹어도 되고, 기호에 맞게 백숙을 먹고 국물에 넣어 먹어도 됩니다. 저는 백숙을 다 먹고 더욱 진국이 되었을 때 그.. 2022. 6. 7. [포항 숙소] 뚜르드퐝 여성전용 게스트하우스 추천 🏠 안녕하세요 😀 포항 여행을 하면서 묵었던 게스트하우스 소개해드려요!! 찐 내 돈 내산 후기입니다!! 👇👇👇 HTML 삽입 미리보기할 수 없는 소스 여자 혼자 여행으로 안성맞춤 가성비 갑인 게스트하우스!! 포항에는 터미널이 2개가 있는데요~ 그중에 시외터미널과 가깝게 위한 뚜르드퐝 게스트하우스를 소개합니다! 예약은 전화&문자로 가능하고, 저는 문자로 예약 확정받았습니다. 1인 단독룸 : 36000원 (인원 추가 시 12000원) 정말 호텔보다 훨씬~ 값싼 가격에 깨끗한 시설을 이용할 수 있어서 너무 편안하게 잘 묵었었습니다! 입실시간 : 4시 입실은 4시 부터지만, 일찍 도착한 저는 짐 보관 서비스를 이용하고 먼저 포항을 둘러보고 저녁에 입실하게 되었습니다! 저녁이 되니, 게하의 조명이 더해져 한층 예쁨이.. 2022. 5. 10. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
