[CSS] 박스 모델(Box-Model)
👀 박스 모델 HTML의 요소는 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box 가 생기고 그 박스에 style을 주어 문서를 꾸밀 수 있게 되는 것이다. 브라우저는 박스 모델의 크기와 속성, 위치에 따라 렌더링(html로 입력받아 해석해서 표준 출력 장치로 출력하는 행위)을 실행한다. Content: 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 속성을 갖는다. padding: 테두리(border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 속성 값은 패딩 영역의 두께를 의미하며 기본 색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다. border: 테두리 영역으로 borde..
[CSS] position (포지션) 속성
position은 문서 상에 요소를 배치하는 방식이다. top, right, bottom, left 속성이 요소를 배치할 위치를 결정한다. position 개념을 이해하기 전에 알아야할 특징은 position 속성은 상속되지 않는다는 것이다. 즉, 부모 요소의 position 값을 상속받지 않는다는 것이다. -문법 position : static / relative / absolute / fixed static - 기본 값 - 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해줄 수 없다. - 요소들이 html에 작성된 순서 브라우저 화면에 표시가 되며 따라서 top, bottom, right, left의 속성값은 무시됨 relative - 원래 있던 위치를 기준으로 좌표 지정. - 즉, ..