코딩 공부

비전공자를 위한 HTML/CSS-border

뉴 데이 2022. 5. 4. 12:26

border 관련 속성

  • border-width

기본 값 : medium 선의 굵기를 지정하는 속성입니다. border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다.

border-width: [top] [right] [bottom] [left];

 

< 속성 값 >

키워드 thin, medium, thick
단위 px, em, rem ... ( % , 정수 단위 사용불가 )

 

  • border-style 기본 값 :  none 선의 모양을 지정하는 속성입니다. border-top-style, border-bottom-style, border-right-style, border-left-style을 이용하여 상하좌우 선의 모양을 다르게 표현할 수 있습니다.
border-style: [top] [right] [bottom] [left];

또한, 위처럼 축약하여 공백을 이용해 각 방향에 대한 스타일을 지정할 수도 있습니다.

 

< 속성 값 >

none border를 표시 하지 않습니다.
solid border를 실선 모양으로 나타냅니다.
double border를 이중 실선 모양으로 나타냅니다.
dotted border를 점선 모양으로 나타냅니다.

그 밖에도 dashed, double, groove, ridge, inset, outset 등의 다양한 스타일이 있습니다.

  • border- color 기본 값 : currentColor 선의 색상을 지정하는 속성입니다. border-top-color, border-bottom-color, border-right-color, border-left-color를 이용하여 상하좌우 선의 색상을 다르게 표현할 수 있습니다.
border-color: [top] [right] [bottom] [left];

또한, 위처럼 축약하여 공백을 이용해 각 방향의 색상을 지정할 수도 있습니다. 색상은 일반적인 CSS 색상 값 사용 방식과 같습니다. 

 

  • border 축약
border: [-width] [-style] [-color];

위와 같이 공백으로 구분해 축약하여 사용할 수 있고, 정의되지 않은 속성값에 대해서는 기본값이 적용됩니다.

 

 

코드실습

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>border</title>
  <style>
    div {
      border-width: 10px;
      border-style: solid;
      border-color: #000;


      /* 축약형 */
      border: 10px solid #000;
    }
  </style>
</head>
<body>
    <div> css border 속성 실습 </div>
</body>
</html>

 

생각해보기

 

 

참고자료

 

CSS Borders

https://www.w3schools.com

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.