패스트캠퍼스 챌린지 5일차

[5일차 강의명]

 

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

Ch 8. CSS 속성

 

Ch 8. CSS 속성

 

주제

 

• CSS 속성
• 박스 모델

 

주요 내용

 

단위

 

margin => 요소의 크기가 늘어나지 않음.

padding, border => 요소의 크기가 늘어남.

 

border-radius: 10px; // 반지름 10px인 원만큼 모서리를 깎아냄.

 

box-sizing: content-box; // 요소의 내용(content)으로 크기 계산

box-sizing: border-box; // 요소의 내용 + padding + border로 크기 계산 => 결과적으로 내용의 크기는 작아짐.

box-sizing: border-box;

 

display

• block: 상자 요소 => 크기를 지정할 수 있다.
• inline: 글자 요소
• inline-block: 상자+글자 요소
• flex: 1차원 레이아웃
• grid: 2차원 레이아웃
• none: 보여짐 특성 없음, 화면에서 사라짐

display: block;

 

새롭게 알게 된 내용

 

• 블럭 태그의 width 속성은 최대한 늘어나려 하기 때문에 따로 설정하지 않아도 블럭이 보이지만(부모 너비 만큼 꽉 차게), height 속성은 최대한 줄어드려 하기 때문에 설정하지 않으면 블럭이 눈에 보이지 않는다. => 개발 프로젝트를 할 때 이 점을 정확히 알지 않아 width와 height를 여러 방법으로 수정해보며 진행했다.

 

---

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

 

#패스트캠퍼스

#패캠챌린지

#직장인인강

#직장인자기계발

#패스트캠퍼스후기

#한_번에_끝내는_프론트엔드_개발_초격차_패키지_Online

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]