[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 41회차 미션

미션 완료까지 D-9

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 41일차입니다!

오늘은 13번째 커리큘럼에서 content-box의 사이즈 외에 전체 사이즈를 고려해야 하는 요소에 대하여 공부했어요.

실무나 개인 프로젝트에서 종종 요소에 border 속성을 추가하면 내 의도와 다른 사이즈가 되곤 하였는데,

box-sizing: border-box로 크기를 조정해줘야 한다는 것에 대하여 학습했습니다.

 

 

오늘은 13번째 커리큘럼의 05. padding / 06. border / 07. box-sizing 을 공부했습니다.

---

<Today I Learned>

<padding>

🔶 요소의 '내부(안) 여백'을 지정

🔶 속성값: 단위, %

🔶 사용법

  ➡ 위 오른 아래 왼 (반시계 방향) ➡ padding: 10px 20px 30px 40px

  ➡ 위 [오른 왼] 아래 ➡ padding: 10px 20px 30px

  ➡ [위 아래] [오른 왼] ➡ padding: 10px 20px

  ➡ [위 아래 오른 왼] ➡ padding: 10px

🔶 개별 속성 가짐 (top, bottom, left, right)

 

⭐추가된 padding 값만큼 요소의 크기 증가

  ➡ 직접 계산: padding이 추가된 값만큼 width, height 값을 직접 계산 (전체 크기가 예상한 것보다 커지지 않도록)

  ➡ 자동 계산: box-sizing: border-box사용

 

<border>

🔶 요소의 테두리선 지정

⭐추가된 border의 두께 값만큼 요소의 크기 증가

  ➡ 직접 계산: padding이 추가된 값만큼 width, height 값을 직접 계산 (전체 크기가 예상한 것보다 커지지 않도록)

  ➡ 자동 계산: box-sizing: border-box사용

 

<border-width>

🔶 선의 두께(너비)를 지정

🔶 기본값="medium"

🔶 사용법은 margin, padding 과 동일

🔷 값: medium, thin, thick, 단위 (단위로 나타내는 게 미세 조정에 유리하기 때문에 추천됨)

 

<border-style>

🔶 선의 종류를 지정

🔶 기본값="none"

🔶 사용법은 margin, padding 과 동일

🔷 값 종류 및 예시 ⬇

 

See the Pen poEvgJa by QQyukim (@qqyukim) on CodePen.

 

<border-color>

🔶 선의 종류를 지정

🔶 기본값="black"

🔶 속성: 색상, transparent (투명한 선, 요소의 배경색이 보임)

 

<기타 속성>

🔶 border-(  A  )-(  B  ) 형식

  ➡ A : top, bottom, left, right

  ➡ B : width, style, color

 

<box-sizing>

🔶 속성 기본값: content-box ➡ 너비(width, height)만으로 요소의 크기를 계산

🔶 자동 계산을 위한 속성값: border-box ➡ 너비의 안쪽 여백(padding)과 테두리선(border)를 영역에 포함하여 요소의 크기를 계산

🔶 거의 안 쓰는 속성값: padding-box ➡ 브라우저 호환성 때문에 사용하는 것 추천 ❌

---

강의 링크: https://bit.ly/3m0t8GM