ChangMinYang

코딩노잼

유용한 CSS 속성들

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

1. 위치 속성

1) static

  • default 값
  • 이동 불가

2) relative

  • satic인 상태를 기준으로 위치 조절
  • position: relative를 사용하여 위치 조절 가능
  • 예를 들어 top: 100px;을 사용하면 100px만큼 내려간다.

3) absolute

  • 문서 흐름에서 공간을 차지하지 않는다. 대신 가장 근접한 조상에 대해 상대적으로 배치한다.
  • 조상이 없다면 가장 위의 태그(body)를 기준으로 삼는다.

4) fixed

  • 문서 흐름에서 공간을 차지하지 않는다. absolute와 모두 비슷하지만 조상 요소와 상관이 없다는 다른 점이 있다.
  • 즉, fixed는 뷰포트의 특정 좌표에 계속 고정되어있다.
  • 보통 header에 사용된다고 한다.

5) stiky

  • relative와 fixed 방식을 조합한 방식으로 스크롤이 생겨날 때 스크롤 상위에 달라붙어서 움직인다.
  • 주의사항
    • stiky 자신의 바로 위의 부모 요소 안에서만 적용된다.
    • stiky는 top, bottom, left, right 속성 중 하나는 반드시 필요하다. (설정된 위치에서 fixed 속성처럼 동작해야 하는데 기준 위치가 없기 때문에 동작하지 않는다.)
    • 부모태그에 무조건 height 높이 값이 있어야 한다. (부모 height 값만큼 sticky가 고정되며, %로 설정된 경우는 동작하지 않는다.)
    • 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안 된다.

See the Pen CSS Position by Changmin Yang (@ycm0926) on CodePen.

2. CSS Transition(전환)

  • CSS 속성이 변경될 때 애니메이션 속도를 조절할 수 있다.
  • 주로 호버와 함께 쓰인다.

1) property

  • transition을 적용시킬 속성을 정한다.

2) duration

  • transition이 완료되는 데 걸리는 총시간을 정한다.

3) delay

  • transition의 지연 시간을 정한다.

4) timing function

  • transition의 실행 방법을 정한다.
    • ease - cubic-bezier(0.25, 0.1, 0.25, 1)와 같다. 처음과 끝을 부드럽게 (기본값)
    • linear - cubic-bezier(0, 0, 1, 1)와 같다. 등속운동
    • ease-in - cubic-bezier(0.42, 0, 1, 1)와 같다. 처음을 느리게
    • ease-out - cubic-bezier(0, 0, 0.58, 1)와 같다. 마지막을 느리게
    • ease-in-out - cubic-bezier(0.42, 0, 0.58, 1)와 같다. 처음과 마지막을 느리게 준다.
    • step-start - steps(1,start)와 같다. 시작하는 지점에 스텝을 끊어준다.
    • step-end - steps(1,end)와 같다. 끝나는 시점에 스텝을 끊어준다.

See the Pen Transitions by Changmin Yang (@ycm0926) on CodePen.

3. CSS Transform(변형)

  • 요소를 이동(roate), 크기 조절(scale), 기울이기(skew), 이동 효과(translateX) 등을 할 수 있다.

transform-origin

  • 회전 중심(원점)을 설정한다.
    • 예를 들어 transform-origin: center;,transform-origin: top left;,transform-origin: center;등이 있다.

See the Pen Transform by Changmin Yang (@ycm0926) on CodePen.

4. 호버(Hover)효과 주기

  • 배운 것들을 활용하여 버튼에 그럴싸한 호버효과 내기

See the Pen Hover by Changmin Yang (@ycm0926) on CodePen.

5. background

  • 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정한다.
  • 순서는 상관없다.
    • 단, "backgroud-size"를 쓰려면 "position" 바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 한다. 예를 들면 "center/80%" 처럼 사용한다.

1) backgroud-image

  • 배경 이미지를 한 개나 여러 개 지정한다.

2) backgroud-size

  • 배경 이미지의 크기를 설정한다.
    • contain: 비율을 유지하면서 이미지 잘림 없이 최대한 꽉 차게 표시(반복 증상 나타남)
    • cover: 비율을 유지하면서 이미지 잘림 있고, 최대한 꽉 차게 표시

3) backgroud-repeat

  • 배경 이미지의 반복 방법을 지정한다.

4) background-position

  • 배경 이미지의 초기 위치를 설정한다.

See the Pen background by Changmin Yang (@ycm0926) on CodePen.

댓글남기기

참고