박스 모델

내용이 박스 밖으로 벗어났을 때 처리 방법 - overflow

overflow overflow 속성은 white-space: norwap; 으로 지정해 줄바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있습니다 이렇게 박스의 크기 밖으로 넘치는 내용을 어떻게 처리할지 정하는 속성이 입니다.

배경의 투명도 배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다. 간단한 예제는 다음과 같습니다.

CSS 박스모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킵니다. 이 박스 모델들이 모여 웹 문서를 이루죠. 또한 그 안에는 마진과 패딩, 테두리 등 여러 겹의 박스가 들어 있습니다. 이 개념은 CSS에서 자주 사용 되므로 잘 기억해 두어…

이번에는 박스 모델의 여백인 마진과 패딩을 조절해보겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹 문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용합니다.

포토 앨범 등에서 사진 주변에 그림자를 추가하면 멋진 효과를 만들 수 있습니다. 이런 그리자 효과도 box-shadow 속성을 사용하면 포토샵 같은 프로그램을 사용하지 않고도 나타낼 수 있습니다. 그림자는 이미지 뿐만 아니라 div 전체 등 지정…

웹 문서에서 여러 요소를 배치하려면 각 요소의 너비를 계산해야 합니다. CSS의 width 속성은 콘텐츠 영역(content area)의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 합니다. 이럴 때 …

테두리(border)는 텍스트 단락 뿐만아니라 그림이나 표, 사진, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다. 하나씩 살펴 보면서 박스 …