라벨이 테두리스타일인 게시물 표시

CSS 테두리(border) 스타일 실선, 점선 설정 및 테두리 원 모양으로 둥글게 만들기

이미지
CSS 스타일 적용되는 방향 지난번 HTML 태그에 스타일이 적용될 때, 박스 모델 단위로 적용된다고 정리했었는데, 상하좌우에 적용되는 스타일을 각기 다르게 적용할 수 있습니다.  상하좌우의 값 구분은 공백으로 구분을 해주고, 속성값을 4개 모두 입력했을 경우와 3개 그리고 2개를 입력한 경우 적용되는 방향에 차이가 있으니 아래의 내용을 확인하시기 바랍니다. CSS 속성값 갯수에 따른 적용 방향 CSS 속성값 1개 입력 했을 경우 - 4방향 모두에 동일한 속성값으로 적용됨. CSS 속성값 2개 입력 했을 경우 - 첫번째 속성값은 위,아래 방향에 적용되고 두번째 속성값은 좌우에 적용됨. CSS 속성값 3개 입력 했을 경우 - 입력 순서대로 상 ->  우 -> 하 의 순서로 적용되고 왼쪽은 오른쪽 속성값과 동일하게 적용됨. CSS 속성값 4개 입력 했을 경우 - 입력 순서대로 상 -> 우 -> 하 -> 좌 의 순서로 적용 됨. 테두리 선 스타일 지정 지난번 HTML 테이블 태그의 스타일 지정에서도 알아본 테두리의 선 스타일은 HTML의 표뿐만 아니라 일반적인 요소에도 지정할 수 있습니다. CSS의 border-style 속성을 사용하면 됩니다. border-style 속성값 속성값 설명 none 테두리 선을 없앴니다. border-style 속성의 기본값 solid 일반적인 실선 dotted 일반적인 점선 dashed 짧은 직선 모양의 점선 double 테두리 선을 이중선으로 표시 groove 테두리가 조각낸 모양으로 파인 듯한 느낌 ridge 테두리 선이 입체감 있게 튀어나온 느낌 border-style 예제 border-style에 속성값을 공백으로 구분하여 입력시 박스 4방향을 다른 스타일로 지정할 수 있으며, 그 순서는 top -> right -> bottom -> left 순서입니다. < style >         body   {     width : 1920px ;     height :