1월 09, 2023

border 테두리 속성 | 점선의 점과 점사이 간격 조절

border 함수는 단어 뜻 그대로 경계를 지칭하는 말이다. 웹페이지에 그림이나 표, 양식 등 사각 형태나 그 일부분에 테두리를 적용하는 매우 유용한 요소이다. 테두리와 관련된 속성에는 두께, 스타일, 색상 등이 있지만, 웹상에 이와 관련된 우수하고 훌륭한 글들이 많이 있어 제반 사항들은 생략하고, 점선 테두리에 있어서 점과 점 사이의 간격 설정에 대한 것만 간단하게 알아보고자 한다.

해당 부분에 아래와 같이 보드 속성을 삽입하고, 빨간색 숫자의 가감수정으로 점과 점 사이의 간격을 조절하며, 파란색 숫자로는 선의 굵기를 조절하면 된다.

가로점선 

#dotted_line1 {   
    background-image: linear-gradient(to 
    right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 10px 2px;
    background-repeat: repeat-x;
    padding-bottom: 20px;
    margin-bottom: 35px;
    width:70%;
}

세로점선 

#dotted_line1 {   
    background-image: linear-gradient(to 
    right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 10px 2px;
    background-repeat: repeat-y;
    padding-bottom: 20px;
    margin-bottom: 35px;
    width:70%;
}

점선 샘플