{overflow:';}
정해진 영역에서
초과되는 데이터를
처리하는 방식
입력 값
ⓐ visible;
기본 형태로서
초과되는 데이터를
방관한다
<style>
div{ overflow:visible; width:100px; height:100px; border:2px solid red;}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
ⓑ hidden;
요소의 크기를 벗어나는
데이터는 가려짐
<style>
div{overflow:hidden; width:100px; height:100px; border:2px solid red;}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
.
auto;
데이터가 요소의 크기를
벗어나는 경우
내부에 자동적으로
스크롤을 생성해 준다
<style>
div{ overflow:auto; width:100px; height:100px; border:2px solid red;}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
*auto나 hidden의 경우
반드시 가로/세로 값이
있어야 적용된다.
{tabindex="0"}
tab 키로
포커스가 가능하게 해주며
포커스 된 컨텐츠는
키보드 컨트롤이 가능해진다.
입력 값은 0~32767까지 있지만
웹 접근성을 고려하여 사용해야 한다.
일반적으로 값은 0만 넣어준다.
728x90
'프로그래밍 > CSS' 카테고리의 다른 글
| CSS3 기초) border-radius 속성 정리 (0) | 2020.04.25 |
|---|---|
| 기초) 실무에서 많이 쓰이는 선택자 정리 (0) | 2020.04.24 |
| 기초) display 정리 (0) | 2020.04.24 |
| 기초) background 속성 및 투명도 RGBa 정리 (0) | 2020.04.24 |
| 기초) text style / background 속성 정리 (0) | 2020.04.23 |