Home
CSS
문단 꾸미기

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

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

overflow

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

 

기본형

overflow : visible | hidden | scroll | auto
  • visible : 박스를 넘어가도 보여줍니다.
  • hidden : 박스를 넘어간 부분은 보이지 않습니다.
  • scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
  • auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다.

 

예제

 

기타 CSS 참조

문단 꾸미기로 돌아가기

You may like these posts

  • 박스 형태 정의하는 방법 - 박스 모델 (Box Model)
    CSS 박스모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킵니다. 이 박스 모델들이 모여 웹 문서를 이루죠. 또한 그 안에는 마진과 패딩, 테두리 등 여러 겹의 박스가 들어 있습니다. 이 개념은 CSS에서 자주 사용 되므로 잘 기억해 두어야 합니다. Box Model HTML 요소는…
  • 박스나 이미지에 그림자 효과 주는 방법 - box-shadow
    포토 앨범 등에서 사진 주변에 그림자를 추가하면 멋진 효과를 만들 수 있습니다. 이런 그리자 효과도 box-shadow 속성을 사용하면 포토샵 같은 프로그램을 사용하지 않고도 나타낼 수 있습니다. 그림자는 이미지 뿐만 아니라 div 전체 등 지정하는 것에 따라 넣을 수 있는데 이때 box-shad…
  • 박스나 이미지에 테두리 만드는 방법 - border
    테두리(border)는 텍스트 단락 뿐만아니라 그림이나 표, 사진, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다. 하나씩 살펴 보면서 박스 모델의 테두리를 꾸며 보겠습니다. border …
  • 배경 이미지 투명하게 만드는 방법
    배경의 투명도 배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다. 간단한 예제는 다음과 같습니다. div { padding: 40px; background-image: url( "//bit.ly/3l02sot" ); } p { font-family: "Arial Black", sans-se…
  • 안쪽 여백, 바깥쪽 여백 - padding, margin
    이번에는 박스 모델의 여백인 마진과 패딩을 조절해보겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹 문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용합니다. margin 속성 - 요소 주변 여백 설정하기 마진(margin)은 현재 요소 주변의 여백입니다. 따라서 마진을 …
  • 박스나 이미지 크기의 기준 정하는 방법 - box-sizing
    웹 문서에서 여러 요소를 배치하려면 각 요소의 너비를 계산해야 합니다. CSS의 width 속성은 콘텐츠 영역(content area)의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 합니다. 이럴 때 box-sizing 속성을 사용하면 콘텐츠 영역의 너비에…

Post a Comment