[HTML/CSS] CSS의 Border속성
[HTML/CSS] CSS의 Border속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
|
|
|
|
Border는 테두리의 형태를 다루는 속성입니다. 테두리의 스타일, 두께, 색상, 곡률을 지정하며 각 변을 따로 지정 할 수도 있습니다. 테두리 스타일은 다음과 같은 효과를 부여합니다. * Dotted - 점선 테두리 * Dashed - 파선 테두리 * Solid - 실선 테두리 * Double - 이중선 테두리 * Groove - 3D 깊이 파인 테두리 * Ridge - 3D 볼록 나온 테두리 * Inset - 3D 눌린 버튼모양의 테두리 * Outset - 3D 버튼모양의 테두리 * Hidden - 숨겨진 테두리 * None - 테두리를 사용하지 않음 |
Border-Style
|
태그 |
속성 |
속성값 |
비고 |
|
style |
border-style |
테두리 스타일 |
위 이미지 참조 |
|
테두리 스타일을 지정합니다. |
Border-Width
|
태그 |
속성 |
속성값 |
비고 |
|
style |
border-width |
테두리 두께값 |
px, %, em 등 / thin, medium, thick |
|
테두리 두께를 지정합니다. 원하는 특정 크기나 미리 지정된 thin, medium, thick중에 선택하여 사용합니다. |
Border-Color
|
태그 |
속성 |
속성값 |
비고 |
|
style |
border-color |
색상코드 |
red, #FF0000 등의 색상코드 |
|
테두리 색상을 지정합니다. "Style, Width, Color"는 "Top, Right, Bottom, Left"를 사용하여 각 변 마다 따로 지정해 줄수 있습니다. 예) p {border-top-style: duble; border-left-color: red; border-bottom-width: 5px;} 각 변을 규칙에 따라 한줄로 작성 할 수도 있습니다. 예) p {border-width: 10px 20px 30px 40px;} 네가지 입력: top-right-bottom-left로 시계방향 순서입니다. 예) p {border-width: 10px 20px 40px;} 세가지 입력: top-left&right-bottom으로 좌우가 같습니다. 예) p {border-width: 10px 40px;} 두가지 입력: top&bottom-left&right로 상하가 같고 좌우가 같습니다. |
Border
|
코드 단축 및 여러가지 효과를 동시에 부여하도록 "Border"만 사용하여 한줄로 한번에 사용할수도 있습니다. 한번에 사용하려면 "style(필수), width, color"를 작성하며 속성마다 띄어쓰기로 구분합니다. 예) p {border: solid 5px red;} 마찬가지로 각 변을 단축하여 사용 가능합니다. 예) p {border-top: duble 10px blue;} |
Border-Radius
|
태그 |
속성 |
속성값 |
비고 |
|
style |
border-radius |
곡률값 |
px, %, em 등 |
|
테두리의 코너부분을 둥글게 라운딩 처리 합니다. 마찬가지로 각 코너를 따로 지정 할 수 있습니다. 예) p {border-top-left-radius: 10px;} 각 변을 규칙에 따라 한줄로 작성 할 수도 있습니다. 예) p{border-radius: 10px 20px 30px 40px;} 시계방향 순서로 동일한 규칙을 따릅니다. |
< 연습하기 >
