패스트캠퍼스 챌린지 12일차 - Part1. Ch8

border-radius는 요소의 모서리를 둥글게 깎는 요소이다. 

왼쪽은 10px, 오른쪽은 20px 적용... 둥글둥글 귀엽당

만약 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와 같이 적어줘도 된다.

---

12일..차...

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa