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. [포항 주변 맛집] 백종원 골목식당 The 신촌's 덮죽 안녕하세요 😃 포항에서 먹었던 음식점 중에 여러분들과 공유하고 싶은 음식점이 있어 포스팅을 작성하게 되었습니다!! 그 음식점은 바로 백종원 골목식당에 출연했던 The 신촌's 덮죽 입니다. 방송 출연 당시에 덮죽 관련 상표권 문제가 발생해 안타까움이 있었지만, 방송이 끝난 후에도 여전히 밝은 모습으로 장사하고 계신 사장님을 뵐 수 있었습니다! HTML 삽입 미리보기할 수 없는 소스 메뉴는 단 두 가지! 소문덮죽과 시소덮죽 입니다. 소문덮죽은 소라돌문어부추덮죽이고, 시소덮죽은 시금치소고기덮죽 입니다. 매운걸 잘 못 먹지만, 그래도! 포항에는 돌문어가 유명한 것을 알고 있어서 소문덮죽으로 주문했습니다! 주문하면, 이렇게 귀여운 번호판을 주십니다 ㅎㅎ 뒷 면에 번호 적혀있고, 번호 부르면 주문한 음식을 받으러.. 2022. 5. 9. [컨퍼런스] GitHub InFocus 2022 – Korea 웨비나(conference) GitHub InFocus 2022 – Korea 웨비나 소개 안녕하세요~ GitHub 단군소프트에서 GitHub InFocus 2022 – Korea 웨비나를 개최한다고 합니다! GitHub InFocus는 엔터프라이즈 기업들의 소프트웨어 개발에 대한 다양한 팁과 비결들을 공유해 드리는 웨비나 입니다. 올해로 두번째 열리는 이번 InFocus 행사에서는 GitHub의 CEO이신 Thomas Dohmke님의 키노트 세션으로 부터, 현재 GitHub Enterprise를 현업에서 사용하는 기업 담당자 분들을 게스트로 모시어 GitHub Enteprise를 기업내에서 어떻게 유용하게 사용하는지에 대한 세션이 있으니 많은 기대 바랍니다. 웨비나 개요는 다음과 같습니다. - 제목 : GitHub InFocus .. 2022. 5. 9. [인천 가볼만한 곳] 인천시 서구 드림파크 야생화단지 주말 벚꽃 나들이🌸 안녕하세요 😃 지난번 포스팅에서는 인천 서구 벚꽃 명서 드림파트 야생화단지를 소개와 벚꽃 구경에 대해 포스팅했었습니다. 너무 넓어서 지난번에 다 보지 못한 게 아쉬워 다시 한번 나들이를 가봤습니다! 이번 나들이에서는 겹벚꽃도 보고왔어요~ 지난번 포스팅은 아래의 링크에서 확인해주세요 👇 https://yeony-list.tistory.com/24 [인천 가볼만한 곳] 인천 서구 벚꽃 명소 드림파크 야생화단지 안녕하세요~ 요즘 날씨도 너무 좋고~ 벚꽃 구경하러 가기 좋은 날씨인데요~ 코로나 때문에 계속 벚꽃 명소에서 출입을 막았었었죠ㅠ 이번해에는 벚꽃명소에서 조금씩 출입을 허가하고 있는 듯 yeony-list.tistory.com https://yeony-list.tistory.com/32 [인천 가볼만한 .. 2022. 4. 18. [javaScript] 객체 지향 프로그래밍 기초 (객체, 메소드, this) 안녕하세요! 여니노트 입니다🙂 객체 기초 공부한 내용 몇 자 적어 봅니다 HTML 삽입 미리보기할 수 없는 소스 객체 기초 - 객체를 사용하면, 변수와 함수를 묶어 관리에 용이합니다. - 속성과 메소드를 가집니다. 객체 만들기 person = {}; 속성 - 객체에 속한 변수 person.name = "yeony"; person.site = "blog"; console.log(person.name); console.log(person.site); HTML 삽입 미리보기할 수 없는 소스 메소드 - 객체에 속한 함수(function) person.eat = function(food) { console.log(this.name + "는 " + food +"를 먹었다."); }; person.eat("coffe.. 2022. 4. 15. 이전 1 2 3 4 다음 728x90 반응형
