border-radius는 요소의 모서리를 둥글게 깎는 요소이다.
만약 10px로 설정하면, 모서리 부분에 반지름이 10px인 정원을 배치하고 둥근 부분만큼 모서리를 깎아낸다. 값은 왼쪽 위 모서리부터 시계방향으로 4개를 적용시킬 수 있다. (ex. border-radius: 0 10px 0 0)
box-sizing은 요소의 크기 계산 기준을 지정하는 속성이다. 요소의 내용으로 크기를 계산하는 content-box, 요소의 내용+padding+border로 크기를 계산하는 border-box 두 가지 값이 있으며 기본값은 content-box이다.
음.. 그러니까 가로너비를 100px로 지정하고 padding 20px border 4px 이렇게 지정하면 100에 48px만큼 크기가 커지게 된다. content-box이면 요소의 크기는 148이 되고, border-box이면 가로너비를 52px로 지정해 요소의 크기를 100px으로 유지해 준다. 즉 border-box는 요소가 커지는 특성을 가진 padding이나 border를 입력했을 때 요소가 커지지 않고 가로 세로 너비를 그대로 사용하게 해준다고 보면 된다.
overflow는 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성이다. 기본값은 visible이며 overflow-x, overflow-y와 같이 개별로 제어할 수 있다.
- visible : 넘친 내용을 그대로 보여줌
- hidden : 넘친 내용을 잘라냄
- scroll : 넘친 내용을 잘라냄, 스크롤바 생성
- auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
scroll은 요소가 넘치지 않더라도 무조건 스크롤을 생성하므로 많은 경우에 scroll 보다 auto를 사용한다.
display는 요소의 화면 출력 특성을 지정하는 속성이다.
- block : 상자 요소
- inline : 글자 요소
- inline-block : 글자 + 상자 요소
- flex : 플렉스 박스 (1차원 레이아웃)
- grid : 그리드 (2차원 레이아웃)
- none : 보여짐 특성 없음, 화면에서 사라짐
- 기타 : table, table-row, table-cell 등...
oapcity는 요소의 투명도를 결정한다. 기본값은 불투명인 1이고, 0-1 사이의 소수점 숫자로 값을 결정할 수 있다. 소수점 단위에서 0은 생략하고 .5와 같이 적어줘도 된다.
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
패스트캠퍼스 챌린지 14일차 - Part1. Ch8 (0) | 2021.11.14 |
---|---|
패스트캠퍼스 챌린지 13일차 - Part1. Ch8 (0) | 2021.11.13 |
패스트캠퍼스 챌린지 11일차 - Part1. Ch8 (0) | 2021.11.11 |
패스트캠퍼스 챌린지 10일차 - Part1. Ch8 (0) | 2021.11.10 |
패스트캠퍼스 챌린지 9일차 - Part1. Ch7 (0) | 2021.11.09 |