-
CSS - 레이아웃프론트엔드/CSS 2020. 8. 24. 00:21
웹페이지 구성시 CSS를 활용하면 더욱 다양한 레이아웃을 구성할 수 있다.
box-sizing
<body> <style> p{ width: 500px; box-sizing: content-box; box-sizing: border-box; } </style> <p> 첫번째 박스입니다. </p> <p> 두번째 박스입니다. </p> <p> 세번째 박스입니다. </p> </body>웹 문서에서 여러 요소 배치시 요소의 너비를 계산해야 한다.
하지만 'width' 속성을 이용할 경우 'content'영역의 너비만 적용된다.
'box-sizing'을 이용하면 'content+padding+border'합쳐서 한 번에 너비를 지정할 수 있다.
속성값을 'content-box'로 주면 콘텐츠 영역만 너비 값으로 사용한다.
속성값을 'border-box'로 주면 콘텐츠 영역+패딩영역+테투리까지 너비 값으로 사용한다.
float 속성
<body> <style> #box{ text-align: center; width: 500px; height: 200px; border: 5px solid orange; font-size: 30px; } p{ font-size: 50px; } </style> <p id="box"> 박스 입니다. </p> <p> 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. </p> </body>
보통 박스나 이미지와 본문을 같이 사용할 경우 위와 같이 두 컨텐츠가 잘 어울리지 않는다.
<body> <style> #box{ text-align: center; width: 500px; height: 200px; border: 5px solid orange; font-size: 30px; float: left; float: right; } p{ font-size: 50px; } </style> <p id="box"> 박스 입니다. </p> <p> 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. </p> </body>
하지만 'float' 속성을 부여한 뒤 속성값으로 'left'나 'right'를 주면 해당 속성이 부여된 태그는 왼쪽이나 오른쪽으로 위치가 변경되고, 다른 요소들은 그 태그를 주변을 자연스럽게 감싸게 된다.
'프론트엔드 > CSS' 카테고리의 다른 글
CSS - visibility, z-index (0) 2020.08.24 CSS - position (0) 2020.08.24 CSS - 박스모델 (0) 2020.08.23 CSS - 목록 스타일 (0) 2020.08.23 CSS - 텍스트 관련 (0) 2020.08.23