[CSS] 속성 - border

웹 UI 개발 코칭스터디 1기/미니 프로젝트

개념강의 |  5. 단위, 배경, 박스모델 - 6) 속성 - border

 

CSS의 속성 중 border 속성은 테두리를 그려주는 속성입니다.

아래의 형태를 갖는 테두리를 만드기 위해서는 style속성을 어떻게 작성해야 할까요?

 

빈칸에 들어갈 수 있는 알맞은 코드를 작성해주세요. 조건은 아래와 같습니다.

1) 테두리의 굵기는 20px 입니다.

2) 테두리의 색상은 검정색입니다.

3) 두 줄의 검정색 테두리를 갖습니다.

 

<div style="border: 20px double black;"> css border 속성 실습 </div>

 

 

---

6번)

border 축약형 관련 문제입니다.

border 축약형은 아래와 같은 구조를 가집니다.

border: [-width] [-style] [-color];

 

[-width]: 테두리의 굵기를 결정합니다.

[-style]: 테두리의 스타일을 결정합니다.

[-color]: 테두리의 색상을 결정합니다.

 

border는 각각의 속성으로 따로 선언 가능하며, 축약 선언도 가능합니다.

 

보통 초기 border 설정은 축약형을 사용하며, 특정 속성 재선언이 필요할때 단일 속성으로 사용합니다.