overflow

1 개요
2 문법
3 예제

개요

overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다.

기본값 : visible
상속 : No
애니메이션 : No
버전 : CSS Level 2

문법

overflow: visible | hidden | scroll | auto | initial | inherit

visible : 박스를 넘어가도 보여줍니다.
hidden : 박스를 넘어간 부분은 보이지 않습니다.
scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .box {
        width: 150px;
        height: 150px;
        background-color: #cccccc;
        float: left;
        margin-right: 10px;}
      .vi {
        overflow: visible;
      }
      .hi {
        overflow: hidden;
      }
      .sc {
        overflow: scroll;
      }
      .au {
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="box vi">
      <h3>visible</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
    </div>
    <div class="box hi">
      <h3>hidden</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
    </div>
    <div class="box sc">
      <h3>scroll</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
    </div>
    <div class="box au">
      <h3>auto</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
    </div>
  </body>
</html>

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / quotes

quotes는 q 태그로 만든 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 속성입니다. 기본값 : 큰따옴표 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / tab-size

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 이 탭 크기를 조정하는 속성이 tab-size입니다.

CSS / Reference / background-clip

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / list-style-type

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

CSS / Reference / font-family

font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / backface-visibility

backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / box-shadow

box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow 속성을 사용합니다.

CSS / Reference / word-wrap

word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / border-style

border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style