마크업 언어/CSS

[CSS] %가 기준으로 삼는 것

KIMJAVAN 2024. 4. 15. 11:27
728x90
  1. 너비와 높이 (width and height): 요소의 너비(width)나 높이(height)를 설정할 때 % 단위는 부모 요소의 너비나 높이를 기준으로 합니다. 예를 들어, 부모 요소의 너비가 500px일 때 자식 요소의 너비를 50%로 설정하면, 그 자식 요소의 너비는 250px이 됩니다.
  2. 패딩과 마진 (padding and margin): 패딩(padding)이나 마진(margin)을 백분율로 설정할 경우, 이는 해당 요소의 부모 요소의 너비를 기준으로 계산됩니다. 예를 들어, 부모의 너비가 600px이고, 자식 요소의 마진을 10%로 설정하면, 그 마진은 60px이 됩니다.
  3. 위치 (position): 요소의 위치를 %로 지정하면, 이는 위치의 기준점(예를 들어 position: relative의 부모 요소, position: absolute의 가장 가까운 위치 지정 조상 요소)의 크기를 기반으로 계산됩니다.