웹 페이지에 1pixel 짜리 라인 만드는 법
요 몇 일 css로 html 만들기를 하던 중
1px 높이의 라인 만드는 것 때문에 머리가 아플 지경이었는데
아침놀님의 hr 로 라인 만들기를 통해 라인을 구현하였으나
뜻하지 않는 문제가 발생하여 다시 고민
일모리님의 조언으로 덕분에 문제를 해결하였다.
얼마나 뜻하지 않는 삽질인지 팁을 남겨야겠다.
css 에 다음과 같이 정의 한 후
#line {
font-size: 0;
margin: 0;
padding: 0;
background-color: black;
height: 1px;
}
웹페이지에 <div id=”line”></div> 넣어주면 라인이 멋지게 나온다.
ff, ie 모두 동일한 결과를 보여준다.
이것을 가지고 높이를 바꿔가면서 쓸 수도 있다.
아래는 3px 높이의 라인이다.
<div id=”line” style=”height: 3px”></div>
Tagged with: css • tip