본문 바로가기
728x90

전체 글146

all: inherit; 속성 🤰🏻 해당 요소의 모든 css 속성을 부모 요소로부터 상속받게 하는 역할을 한다.상속받는 속성은 다음과 같다.bordermargin, paddingcolor, font, line-heightbackgroundbox-shadow이외에도 거의 모든 속성 예를 들어, 부모 속성에 border: 1px solid red; box-shadow: box-shadow: 10px 5px 5px red; 라는 속성이 있다면 자식은 border와 box-shadow 모두 속성을 상속받아 자연스레 동일하게 적용된다. 자식 요소에서 사용하고 싶지 않을 때에는 상속받은 특정 속성을 명시적으로 초기화시키면 된다.border: none;box-shadow: none; 오랜만에 접하게 되면 "이게 뭐지" 싶다.되짚음 용으로 끄적여봤다. .. 2025. 8. 12.
와이키키 마켓 🏪 와이키키 마켓이라고 들어보셨나요? 저도 이번에 첨 들어봤는데 한강에서 BBQ를 먹을 수 있는 곳 말로만 하면 감이 잘 안오시겠죠?그래서 사진을 준비했습니다 ‼️ 한강을 따라 걷다보면 이렇게 선착장이 나오는데요.선착장 위에서 고기를 구워먹는 컨셉입니다. 선착장 안에 매점도 있어서 아이스크림, 라면, 고기 추가, 맥주 등등 구매해서 먹을 수도 있어요 ⭕️ 매점에서 예약 확인 및 고기를 받아서 윗층으로 올라갑니다. 소금이나 후추, 집게, 1인당 물 하나 등은 제공을 해주고요! 자리는 여러 종류가 있네요. 인원 수마다 다르고, 예약할 때 선택할 수 있나봐요저희는 한강이 바로 보이는 자리에 앉았어요. 런치를 예약해서 사람이 많진 않았습니다. 해 지고 오면 너무 이쁠 것 같아요 🌆 파인애플, 새우, 버섯,.. 2025. 8. 1.
CSS 애니메이션 🙀 css 애니메이션은 2007년 애플이 처음 웹에 도입한 이후 많은 발전을 해왔다.그런데 조금만 복잡한 애니메이션을 구현하려면 서드파티 라이브러리나 방대한 자바스크립트 코드가 필요하다.그러나, 이제는 css만으로 스크롤 애니메이션을 만들 수 있다는 소식을 조금 늦게 가져와 봤다 ‼️ 스크롤 기반 애니메이션은 세 가지 요소로 구성된다.target: 애니메이션을 적용할 페이지 내의 대상keyframes: 사용자가 스크롤할 때 일어나는 변화timeline: 애니메이션이 일어나는 결정 기준 타임라인2023년 6월에 도입이 되었다. 스크롤 기반 애니메이션에서는 ‘시간’을 사용하지 않고, 타임라인의 유형인 scroll과 view를 이용해 구현한다. scroll()사용자의 스크롤에 따라 애니메이션이 진행된다.사용자가 .. 2025. 7. 31.
개발하면서... 느끼는 부분 정리 👩🏻‍💻 개발을 하면서 내가 느끼는 것 / 타인으로부터 느끼는 것이 있다.처음에는 무조건 정해진 일정에 기능만 잘 동작하면 된다고 믿었고, 그 시절에는 그것밖에 보이지 않았다.그것만 하기에도 벅찼으니까. 그런데 한 프로젝트를 5년 이상 자리를 지키다보니 내가 작성한 코드인데도 여기저기 사용하기도 하고, 기능이 뭔지 많은 시간들 들여 파악하기도 하고 하면서 어떻게 하면 이런 시간들을 좀 더 줄여볼까 고민을 하게 되었다. 지향할 것들 🤙🏻중복되는 부분은 반드시 파일로 분리 (getter / setter)2번 이상 다른 파일에서 사용한다면 utils 등의 폴더 및 파일로 분리하기예) userInfo에서 chidlname, name 부분같은 사소한 부분이어도 분리하기const getChildName = (childI.. 2025. 7. 17.
728x90