Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

HTML & CSS

1. Transition css 스타일 속성 변경 시 부드럽게 전환시키기 위해 속도를 조절하는 것 transition: property | duration | timing-function | delay 순으로 한 줄로 작성 가능 property: 효과를 적용하고자 하는 css 프로퍼티 명 지정 , 여러개 지정 시 콤마(,)로 구분 duration: 효과 지속시간, 밀리초(ms)나 초(s) 단위로 지정 timing-function: 변화 속도 지정 (ease - 기본 값, linear, ease-in, ease-out, ease-in-out) delay: 딜레이 시간만큼 대기 후 효과 발동 See the Pen CSS Transition - timing function by Jieun Kim (@ji-si..

2023. 3. 4.

HTML & CSS

마진 병합 현상이란? : 상하단 margin 값이 서로 병합되는 현상으로 margin 크기가 더 큰 값이 적용된다. (Block요소에서 일어남) 형제지간 마진 병합 box2 위 아래에 margin값을 줬지만 병합되어 40px이 아닌 20px 적용 See the Pen margin-collapsing #1 by Jieun Kim (@ji-silver) on CodePen. 부모 자식간의 마진 병합 자식에게 margin 값을 적용했지만 부모에도 영향을 미침 See the Pen margin-collapsing #2 by Jieun Kim (@ji-silver) on CodePen. 해결방법: 부모태그에 border나 padding값을 주어 벽이나 공간을 만든다.

2023. 3. 2.