Box Model을 얘기하기 전에 display속성을 집고 넘어가자

Display

프로퍼티값 키워드	설명
block	너비로써 현재 영역의 100%를 차지하여 세로로 배치되는 성질
inline	너비로는 content의 영역만을 차지, width와 height를 선언하지 못해
inline-block	inline요소를 마치 block처럼 width와 height를 줄 수 있도록. 대신 얘는 vertical-align속성을 추가해줘
none	해당 요소를 화면에 표시하지 않아, 그리지도 않음(아예 없는 취급)

그렇다면 display: none;과 비슷한 visible: hidden;은 뭘까?

visible: hidden은 자리를 차지한체 보여지지만 않는것 👉 자리를 맡아놓는것
opacity: 0은?? 마찬가지로 보이지만 않는것

그러면 안보이게 하고싶으면??

.blind {
	position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;

width와 height를 0으로 주면 display: none;과 같은 효과이기때문에 시멘틱한 작업을 위해서 남겨둬야 한다

Box Model

모든 HTML요소는 Box형태(사각형)의 영역을 가지고 있다.

이 박스는 Margin, Border, Padding, Content로 구성되어있는데 나는 MVP(V는 Border..)라고 외웠따!

이전에 HTML은 사람이라고 했었는데 Margin이 사람과 사람과의 거리, Border가 피부, Padding이 지방과 근육, Content가 뼈라고 보면 좋을것같다.

이렇게 구분한 이유는 Margin과 Padding은 기본적으로 투명하며 Margin의 경우는 색을 지정할 수 없다.
반면 Border는 피부처럼..색을..설정할 수 있다..

width와 height 속성

block요소들은 높이와 너비를 지정할 수 있다. 그치만 이 width와 height는 기본적으로 content의 너비와 높이를 지정하게 되어있어 MVP값들을 추가해주면 기대했던 크기를 얻을 수 없다

따라서 너비와 크기를 요소 전체 크기에 맞추기를 원한다면 box-sizing: border-box; 속성을 추가해주면 된다.
button은 default로 box-sizing이 적용되어있다.

또한 width와 height로 값을 설정하면 컨텐츠 영역을 넘어갈 수 있는데 이럴경우 overflow: hidden; 속성을 추가하면 된다

border-radius 속성

기본적으로 Box형태를 갖고 있는 block요소의 Border를 둥글게 표현할 수 있다.
px값으로 계산하여 원하는만큼 줄 수 있고, 원을 만들려면 50%를 넣어주면 된다.

타원으로 선언하는법, 등등 관련 내용은 여기서 확인 가능하다.