CSS에서 픽셀(px) 단위 사용하기
CSS에서 화면 픽셀 기준으로 측정값을 정의하려면 px 단위를 사용합니다. px는 절대 길이 단위로, 요소의 위치(left, top), 크기(width, height), 여백(margin), 안쪽 여백(padding) 등 다양한 속성에 활용할 수 있습니다.
예제 코드
다음 예제는 px 단위를 사용해 div 요소를 상대 위치(relative)로 지정하고, 왼쪽에서 90px, 위쪽에서 3px만큼 이동시키는 방법을 보여줍니다.
<html>
<head>
</head>
<body>
<div style = "position:relative;left:90px;top:3px;background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 노란색 배경의 div가 원래 위치에서 오른쪽으로 90픽셀, 아래로 3픽셀 이동한 자리에 표시됩니다. 이처럼 px 값을 변경하면 요소를 픽셀 단위로 정밀하게 제어할 수 있습니다.
참고 사항
px 단위는 화면 해상도나 브라우저의 확대·축소 설정에 따라 실제 물리적 크기가 달라질 수 있습니다. 따라서 반응형 웹 디자인에서는 %, em, rem 같은 상대 단위와 함께 적절히 조합해 사용하는 것이 좋습니다.