코딩기록

td에 boder-bottom이 있는 상황에서tr을 호버했을 때 tr에 테두리를 주고 싶었다.어떻게 하나 찾아보니 역시 방법은 있다. outline   을 이용하면 된다.   See the Pen table tr hover border by _홍시 (@wlcbybsd-the-sasster) on CodePen.offset은 간격 조절하려고 넣어줬음.

HTML 삽입 미리보기할 수 없는 소스 - svg는 기존 코드를 보면서 참고를 했다. 쓸 때마다 헷갈림 ㅜ https://100dayscss.com/days/27/ Day 27 - 100 Days CSS Challenge 100 Days CSS Challenge Checklist: What's the great thing about working through your to-do list? That's right, the relieving feeling when you can check off the tasks. 100dayscss.com

HTML 삽입 미리보기할 수 없는 소스 - 기존 css는 배경을 input과 같은 위치에 두어 css로 조정하게 하였다. - 나도 자바스크립트 없이 css로만 그렇게 할까 싶었지만 그러려면 input의 위치를 하나씩 잡아야하기 때문에 재사용성이 떨어질 것 같았다. const changeBg = () => { for(let i = 1; i

HTML 삽입 미리보기할 수 없는 소스 day 6 챌린지는 hover 연습 같다. 기존 챌린지에서는 원 말고도 다른 컴포넌트드이 더 있지만 원 움직이는 것만 해도 연습이 될 것 같다. https://100dayscss.com/days/6/ Day 6 - 100 Days CSS Challenge 100 Days CSS Challenge Profile: Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself. 100dayscss.com

HTML 삽입 미리보기할 수 없는 소스 alternate - 애니메이션이 끝났을 때 자연스럽게 반대방향으로 이동하게 함. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프 developer.mozilla.org

HTML 삽입 미리보기할 수 없는 소스 * html - 피라미드 반대편 부분의 위치를 기존 피라미드 삼각형에 맞추려고 pyramid 안에 side 넣었다. * css - 해랑 그림자의 위치를 position으로 조절을 하는건지 고민을 했는데 transform-origin을 사용해서 조정했다. - x, y, z의 위치 조절이 가능하다. /* x-offset | y-offset | z-offset */ transform-origin: 2px 30% 10px; https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin transform-origin - CSS: Cascading Style Sheets | MDN The transform-origin C..

https://100dayscss.com/about/ What is this? - 100 Days CSS Challenge 100 Days CSS Challenge For 100 consecutive days, I've written HTML and CSS snippets as a creative learning process for myself. I used CodePen to write and save my code and published my results every day on this website. After accomplishing my project on da 100dayscss.com 좋은 사이트를 발견했다. 하루에 뭐라도 2개 이상 하기에서 후보지가 늘었다.. HTML 삽입 미리보기할..

1. 중첩, 상위선택자 참조 .container {background: yellow; h1{background:none; color: #000; &:hover{color:#fff} } p{color:tomato; font: { size: 20px; weight:bold; } span{background:burlywood;} } } - &가 상위선택자를 가리키는 일을 함. - font-size, font-weight와 같이 중복되는 속성도 묶어서 스타일 주기 가능. .container { background: yellow; } .container h1 { background: none; color: #000; } .container h1:hover { color: #fff; } .container p { ..

▶애니메이션 배너 만들기 - 배너에 들어가는 애니메이션 이미지들 각각의 위치지정 해줌. - 애니메이션에 들어가는 세미콜론(;) 잘 확인해야함 . 작동하지 않음. - opacity 값을 주어 투명했다가 진해지는 효과를 넣어줌.

▶attribute(속성) 검사 - .menuOn : '개인'메뉴가 항상 밑줄에 두껍게 표시될 수 있도록 함. - utilMenu 사이에 막대기는 after를 이용해 만듦.