Written by Jieun
Home
  • 전체 (129)
    • Git (1)
    • React, Next (57)
    • HTML & CSS (2)
    • JavaScript, TypeScript (24)
    • Node.js (11)
    • MongoDB (4)
    • AWS (2)
    • 코딩테스트, 알고리즘 (17)
    • etc (8)
    • 일상 (1)
블로그 내 검색

Written by Jieun

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

HTML & CSS (2)

  • HTML & CSS

    [CSS] CSS 트랜지션(Transition) & 애니메이션(Animation)

    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

    [CSS] 마진 병합 현상 (margin-collapsing)

    마진 병합 현상이란? : 상하단 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.

이전
1
다음
전체 글 보기
Tistory 로그인
Tistory 로그아웃
로그아웃 글쓰기 관리

Today

Total

Designed by Nana
블로그 이미지
지은이: 김지은

티스토리툴바