HTML CSS border 속성
■ 웹 문서에 어떤 요소를 넣을 때 다른 요소들과 구분하기 위해서 테두리를 만들어주면 보기 좋은데요. 이번에는 테두리에 해당하는 border의 속성들에 대해서 알아보겠습니다. 이것의 속성에는 선의 종류, 두께, 색 등이 있는데 이것들을 따로 사용해서는 나타나지 않다가 모든 속성값이 입력됐을 때 비로소 선이 나타나게 되는데요.
■ 예를 들어 선의 두께만 지정해주면 선은 안보입니다. border-style (선의 종류)를 지정해줘야 비로소 선이 보이게 되구요. 이 이후에 테두리의 색을 지정해줘야 색까지 보이게 됩니다. 하지만 이것들을 한번에 모두 묶어서 표시하면 바로 보이게 되는데요. 이 속성값들을 한번에 묶어서 지정할 때의 형식은 다음과 같습니다. border : (두께) (선의 종류) (선의 색); 이때 속성값의 입력순서는 바뀌어도 관계없습니다. 여기서는 각각의 속성을 먼저 알아보고 묶어서 사용하는 예는 마지막에 보기로 할게요.
■ 예제를 하나 만들어 볼 건데요. 간단한 이미지를 한 장 삽입하고 거기에 border 속성을 하나씩 적용해가면서 테두리의 변화를 살펴보겠습니다.
■ body 태그 안에 그림을 한 장 넣었습니다. 아직 스타일 적용은 전혀 하지 않았기 때문에 아래 그림처럼 원본 사진이 출력됩니다.
■ 이 상태에서 border의 두께 (border-width), 선의 종류 (border-style), 색 (border-color) 속성값을 순서대로 하나씩 적용해 볼게요.
■ border-width : 2px;로 선의 두께를 2픽셀로 지정했는데, 보이지 않죠? 이렇게 두께값만 입력하면 선은 안보입니다. 다음은 스타일 속성으로 선의 종류를 지정해 볼게요. 선의 종류는 실선(solid), 점선 (dotted), 짧은선(dashed), 이중선 (double) 액자틀 종류의 테두리(groove, ridge, inset, outset) 등이 있는데요.나머지는 직접 입력해서 어떤 형태인지 확인해보시구요. 여기서는 실선(solid)으로 지정해주겠습니다.
■ border-style : solid; 값을 입력했습니다. 이제서야 선이 보이네요. 기본 색상인 검은색으로 표시가 되구요. 두께는 2px입니다. 그럼 마지막으로 색을 지정해볼게요.
■ border-color : red; 속성값을 입력해서 테두리의 색을 빨간색으로 지정했습니다. 이렇게 각각의 속성을 따로 사용할 때는 적어도 선의 두께와 종류를 선택해줘야 선이 보이게 되고, 그 후에 색을 지정하면 되는데요. 이것들을 한 번에 묶어서 지정하면 다음과 같이 입력할 수 있겠죠?
border : 2px solid red;
이렇게 입력해도 결과 값은 같습니다. 그럼 마지막으로 묶어서 표시해보고 마무리할게요.
■ 다시 한 번 말씀 드리자면 속성값의 순서는 바뀌어도 관계없습니다. 5픽셀 두께의 파란색 점선으로 지정을 했구요. 결과 값도 지정한 대로 출력이 되는 걸 확인할 수 있습니다. 혹시 이 글을 보고 계신다면 직접 두께, 선의 종류, 색을 바꿔가면서 border 속성값을 넣어서 확인해보세요. 수고하셨습니다.
