overflow
-
<HTML/CSS> Animation 4 : 마우스를 올리면 배경이 바뀌면서 타이틀 나타내기컴퓨터 알아가기/HTML CSS 2022. 9. 21. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 기본 그레이색을 가지고 있는 2개의 섹션 영역에 마우스를 올리면 배경색과 타이틀이 나오는 Animation을 공부해 보고자 합니다. 개발자들이 테스트용으로 사격형 영역을 불러올때 place-hold.it을 사용합니다. 이곳에서는 태그를 이용하여 400 X 200 사이즈의 두개의 섹션을 가상으로 다음과 같이 만들어 보겠습니다. 상기 HTML을 브라우저로 보게되면 다음과 같습니다. 이제 이 그림위에 마우스를 올리면 검은색(투명도 80%)으로 바뀌면서 Animation 연습이라는 타이틀이 가운데 오도록 Animation 효과를 공부해 보고자 합니다. ① 위치잡기 타이틀이 가운데 온다는 이야기는 span요소가 가운데 위로..
-
CSS 기본(BOX) : Overflow (Scroll, Hidden, Display), Visibility (Hidden, Visible)컴퓨터 알아가기/HTML CSS 2021. 3. 24. 19:30
BOX형은 중요하다고 말씀 드렸습니다. 전체 HTML상에서 각자의 영역을 지정하고 그 영역안에서 움직인다고 보면 되는데 이러한 구획정리의 개념이 BOX형으로 이루어 진다고 보면됩니다. ▒ Overflow 다음과 같이 하나의 이미지 또는 내용이 있다고 가정합니다. contents, padding, border, margin을 이해하기 위해서 손으로 한번 그려보는 것을 권장합니다. 예에서 보면 각각의 크기가 다음과 같을 경우 Contents (blue): 가로 (300px), 세로 (200px) Padding (green): 좌 우 위 아래 각 10px Border (yellow): 좌 우 위 아래 각 2px Margin (orange): 좌 우 각 20px, 위 아래 각 10px 전체 이미지의 크기는 가로..