Developer

CSS 포지셔닝 : CSS에 웹 문서 요소를 적절히 배치하는 것 box-sizing : 박스 모델 너비 값의 기준을 지정함 box-sizing: content-box | border-box content-box - width 속성값을 콘텐츠 영역 너비 값으로 사용 기본값 border-box - width 속성 값을 콘텐츠 영역에 테두리 까지 포함한 박스모델 전체 너비값으로 사용 CSS를 이용해 여러 박스 모델을 화면상에 배치하려면 박스 모델의 너비 값을 정확히 계산해야 함 width 값을 계산하기 어렵다면 box-sizing:border-box;로 지정해 박스 모델 너비를 알기 쉽게 바꾸어 놓는 것도 좋은 방법 ex. box-sizing 속성 - 박스 모델 너비 값의 기준을 지정함 box-sizing =..

웹의 영역 요소 : 블록 레벨 요소, 인라인 레벨 요소, 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 요소의 너비가 100% 예) , 등 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 예) , 등 박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 개발자 도구 창에서 박스 모델 확인 가능 width, height : 실제 콘텐츠 영역의 크기를 지정. width : 크기 | 백분율 | auto height : 크기 | 백분율 | auto 실제 콘텐츠 너비 계산 모던 브라우저에서 박스 모델의 전체 너비 = width ..