[html/css] Box Layout : border

먼저 레이아웃을 요약하면 다음과 같다.

 

 

1. border란?

- padding처럼 content를 감싸지만 색을 다르게 설정할 수 있다.

- 주로 테두리 디자인을 위해 사용된다.

- border관련 기능이 아주 많은데, 내가 자주 쓰는 기능만 설명하겠다.

 

2. border의 주요 기능

css	결과
border-style : 테두리의 기본 형태를 설정한다. - border의 형태를 나타내는 설정이 있어야  border가 보이기 시작한다. 없으면 안보인다. (기본값 : 없음) - 왼쪽의 solid 스타일 외에도 solid 외에도 여러 가지 형태가 있는데 아래에서 추가로 설명하기로 한다. - border-style: solid dashed dotted hidden 등으로 각각 다르게 설정할 수 있다. -
border-color : 테두리의 색상을 설정한다. - 이 설정이 없다면 기본값은 검정색이다. - border-color: red yellow green blue 등으로 각각 다르게 설정할 수 있다. - border-방향-color등의 설정도 있는데, 해당 부분만 다른 색으로 설정할 수 있다.
border-width : 테두리의 두께를 설정한다. - 이 설정이 없다면 테두리의 기본값은 2px정도 되는 것 같다. (불확실함) - border-방향-width 등의 설정도 있는데, 해당 부분만 다른 두께로 바꿀 수 있다. - border-width: 10px 30px 50px 70px 등으로 각각 다르게 설정할 수 있다.
border-radius : 꼭짓점의 완곡한 정도를 설정한다. - 단위가 여러가지지만 %로 설정할 때 50%까지 설정하면 원도 만들 수 있다. - 부가 설정 중 top-right, bottom-left 등 여러가지가 있는데 그 부분만 바뀌도록 설정할 수 있다. - border-radius: 10% 20% 30% 40% 등으로 다르게 설정할 수 있다. (각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래)

 

3. border의 주요 형태들은 아래와 같다.