padding
padding: 10px; /* 네 면 모두 적용 */
padding: 10px 5px; /* 세로방향, 가로방향 */
padding: 10px 5px 20px; /* top, 가로방향, bottom */
padding: 2px 3rem 0 auto; /* 위 | 오른쪽 | 아래 | 왼쪽 (위 기준으로 시계방향)*/
- 요소의 네 방향 안쪽 여백 영역을 설정합니다.
- 사용방법은 margin과 거의 동일하게 사용합니다.
- margin과는 다르게 collapsing이 발생하지 않습니다.
border
- 요소의 margin과 padding사이 영역, 요소의 테두리입니다.
border-style
> border의 스타일을 지정해줍니다.
> 여러 키워드가 존재하며, 가장 많이 쓰이는것은 solid (실선), dotted (점선), dashed ( 파선 )이 있습니다.
border-width
> border의 굵기를 지정해줍니다.
border-color
> border의 색상을 지정해줍니다.
border(shorthand)
/* 스타일 */
border: solid;
/* 너비 | 스타일 */
border: 2px dotted;
/* 스타일 | 색 */
border: outset #f33;
/* 너비 | 스타일 | 색 */
border: medium dashed green;
- 개별로 border의 속성을 입력해주어도 되지만, 대부분 border 단축속성을 사용하여 작성합니다.
- 순서 상관 없이 border-style, border-width, border-color로 지정할 속성을 입력해주면 됩니다.
> 하지만 가독성을 위해 통일성있게 순서를 정하는 것이 좋습니다.
border-radius
border-radius: 10px;
/* 완전한 원 또는 타원형 */
border-radius: 50%;
/* top | right | left | bottom */
border-radius: 50px 10px 20px 5px;
/* top and bottom | left and right */
border-radius : 50px 30px;
- border의 테두리를 둥글게 만들때 사용합니다.
- 입력값을 반지름으로 삼는 원모양이 됩니다.
> 전체 값의 절반만큼 설정하게 된다면 원모양이 됩니다.
'웹 프론트 엔드' 카테고리의 다른 글
CSS Flexbox (0) | 2024.03.15 |
---|---|
CSS transform (0) | 2024.03.15 |
CSS 박스모델 - margin (0) | 2024.03.14 |
CSS 박스모델 (0) | 2024.03.14 |
CSS background (0) | 2024.03.14 |