박스나 이미지에 테두리 만드는 방법 - border

테두리는 텍스트 단락 뿐만아니라 그림이나 표, 사진, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있습니다. 테두리와 관련된 송성에는 테두리 두께,테두리 스타일, 테두리 색상 등이 있습니다.
1 min read

테두리(border)는 텍스트 단락 뿐만아니라 그림이나 표, 사진, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다.

하나씩 살펴 보면서 박스 모델의 테두리를 꾸며 보겠습니다.

border

  • border는 테두리를 만드는 속성입니다.
  • 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다.

 

기본형

border : border-width | border-style | border-color
  • border-width : 선의 두께를 정합니다.
  • border-style : 선의 모양을 정합니다.
  • border-color : 선의 색을 정합니다.

 

border-width

border-width 속성에는 다음의 값을 넣을 수 있습니다.

medium | thick | thin | length

1px나 5px처럼 크기를 직접 입력 할 수도 있습니다.

 

border-style

border-style 속성에는 다음의 값을 넣을 수 있습니다.

dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid

속성 값에 따라 어떤 테두리가 나타나는지 확인하려면 여기를 참고해주세요.

 

예제

 

기타 CSS 참조

You may like these posts

  • 테두리 스타일을 지정하는 border-style 속성은 기본 값이 none 이기 때문에 테두리 스타일을 지정하지 않으면 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다. 따라서 테두리를 그리기 위해서는 테두리 스타일을 지정해야 합니다. border-style border-style 속성은 …
  • background-attachment background-attachment 속성으로 배경 이미지 고정, 스크롤 여부를 지정합니다.   기본형 background-attachment : scroll | fixed | local scroll : 내용을 스크롤하면 배경 이미지는 스크…
  • 배경을 넣고 싶은 요소들마다 속성을 입력하면 배경을 넣을 수 있지만 박스 모델 관점에서 배경 적용 범위를 조절할 수도 있습니다. 즉, 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있습니다. …
  • CSS에서 각 요소는 수평이나 수직으로 이동할 뿐만 아니라 한 요소 위에 다른 요소를 쌓을 수도 있습니다. 요소 위에 요소를 쌓는 순서를 지정하는 것이 z-index 속성입니다. z-index 요소들의 수직 위치는 z-index 속성으로 정할 수 있습니다.   예제 1 세 개의 &…
  • 배경 색을 지정하려면 배경을 넣고 싶은 요소의 속성에 background-color 속성을 넣으면 됩니다. 16진수나 rgb 값 또는 색상 이름을 사용해 지정합니다. background-color background-color로 배경의 색을 정합니다.   기본형 background-c…
  • background-postion 속성을 이용해 배경 이미지를 배치할 때 기준이 필요합니다. 배경 이미지를 배치할 기준은 background-origin 속성으로 지정합니다. background-origin background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. &nbs…

Post a Comment