[css] <div> 태그를 이용하여 가로선, 세로선 그리기

✍ <div> 태그를 이용하여 가로선, 세로선 그리기

• html에 가로 / 세로 로 이용할 div 만들어주기
• 가로선이냐 세로선이냐에 따라 width / height 로 선 두께, 길이 지정 ex. 가로선일 경우. height: 1px(선두께) width: 100px(선 길이)
• 굳이 border-right 나 border-bottom을 이용할 필요없이 background-color를 이용해서 선의 색상을 지정할 수 있다.
• 선의 위치는 아래의 코드대로 원하는 곳에 배치 가능

.width{ //가로줄
  width:100%; //예시: 부모요소 전체에 가로줄을 그을때
  height: 1px; 
  background-color:black; // 예시: 검은색 줄
  //position 으로 선 위치 어떻게 정할 건지 정하고 top, left, bottom, right을 통해 조정 가능.
  //ex.position:absolute; top: 50%;
}
.height{ //세로줄
  height:100%; //예시: 부모요소 전체에 세줄을 그을때
  width:1px;
  background-color:white; // 예시: 하얀색 줄
}