개발 블로그

Box Type display 속성에 box type 값을 넣어준다. 그 값에는 ① block : 영역을 다 차지한다. 일명 길막. block에 따로 width를 설정하지 않은 경우, 부모 content box의 100%를 차지 따로 width를 설정한 경우, margin으로 자동으로 채워버림 부모에 따로 height를 설정하지 않은 경우, 자식 요소의 height들의 합을 부모 height로 가진다. width, height, padding, border, margin을 모두 사용가능 ② Inline : 컨텐츠만큼만 크기를 가지고 옆으로 흐름 box model의 속성 중, width, height, padding-top, padding-bottom, border-top, border-bottom, ma..

CSS에서 box-sizing은 content를 기본값으로 가진다. width, height에 각각 400px을 설정했다면 저 빨간 줄, 즉 border가 아니라 content 자체에 길이가 적용된다는 것이다. 여기에 padding과 border를 더 설정했을 경우, border까지의 크기는 내가 설정한 400px보다 더 큰 박스가 만들어 진다. 이러한 불편함을 없애기 위해, *{ box-sizing: border-box; } 위와 같이 작성하여 모든 요소가 border-box를 기준으로 작용하도록 설정한다.

HTML의 모든 요소는 상자 형태를 가진다. 원의 형태로 보여도 개발자 도구로 확인하면 상자 형태임을 알 수 있다. content(내용) : 실제로 정보를 담고 있는 부분 padding(패딩) : border의 안쪽 여백 border : 경계선, 컨텐츠를 감싸는 테두리 margin : border 밖 여백, 요소와 요소 사이의 간격 box model과 관련된 프로퍼티 width/height : 컨텐츠 박스의 가로/세로 길이 border : 굵기 / 스타일 / 색상 순으로 작성, 위에만 주기, 아래만 주기와 같이 개별적으로 적용가능 border-radius : 테두리를 둥글게 만듦, border-top-left-radius와 같이 특정 모서리만 적용할 수도 있음 *속기형 : value는 시계방향으로 적용 ..