안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML+ CSS29 HTML+CSS (기초) transition 이용하기 2 (마우스 커서 올렸을 시- 크기, 각도 변화 효과) 마우스 커서를 올렸을 때, 크기도 변하고기울긱 등도 변경할 수 있다. 예제를 적용할 이미지 두개를 가져온다. 크기와 배경색을 적용한다. ( 사자는 그림이 커서 적용해도 안보였다.) 마우스 커서를 올렸을시 크기가 width +100px height +50px 크게 하였다. 한번에 확 바뀌는 크기를 서서히 커지게 적용하자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 div.aa img{ background: darkred; width: 200px; height: 100px; transition: width 3s, height 3s, background 3s, transform 3s; } div.aa img:.. 2019. 12. 9. HTML+CSS (기초) transition 속성 이용하기 ( 마우스 커서 올렸을 시 커지는 효과) 마우스 커서를 올리면 한번에 커지지 않고, 점점 커진다. 우선 네모 박스를 만들어 보자. 이제 마우스 커서를 올렸을때, 반응하는 hover를 주고 가로 사이즈를 100px더 커지게 하자. 위 사진은 올리면 바로 크기가 width 200px이 된다. 이것을 서서히 커지게 만들어 보자. 애니메이션 효과를 준 것처럼 서서히 커진다. (예제에선 3초) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 div{ width: 100px; height: 50px; border: 1px solid black; background: burlywood; /* 변경될 속성에 transition(전환) 효과 적용 */ transition: width 3s; } div:hover{.. 2019. 12. 9. HTML+CSS (기초) transform 속성 이용하기 (위치,기울기 등 변환) 우선 네모를 4개 만들어서 적용해보자. 위 네모(box 2,3,4)에 transform을 다른 값을 적용하겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 div{ width: 50px; height: 50px; background: yellowgreen; border: 1px solid black; text-align: center; } div#box2{ background: darkblue; transform: translate(100px, 0px); } div#box3{ background: darkcyan; transform: scale(1.2,1.2); } div#box4{ ba.. 2019. 12. 9. HTML+CSS (기초) opacity, visibility 속성 이용하기( 투명도, 화면 표시) 이번 예제는 마우스를 올렸을때 투명도로 효과를 주는 방법이다. 우선 임의로 이미지를 가져온다. 이제 기본적으로 투명도를 주고, 마우스 커서를 올렸을 때 투명도를 원래 값으로 주자. 그럼 뭔가 선택할때 효과가 난다. 그리고 visibility 속성도 알아보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 img{opacity: 0.4;} img:hover{opacity: 1.0;} Opacity 속성 2019. 12. 9. HTML+CSS (기초) display 속성 이용하기 ( float와 같은 배치, 편리) 우선 최종 화면과 같이 영역을 나눈다. 최종 화면과 같이 내용을 채우자. 이제 스타일로 배경색과 배치를 하자. (display: table-cell은 float와 같이 옆으로 배치도 된다. ) 맨 아래 부분의 배경색도 적용하자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 Document body{ margin: 0px; } header{ background-color.. 2019. 12. 9. HTML+CSS (기초) float, clear 속성 (옆으로 배치하기 위해 float 사용) 홈페이지를 만들때, 4개 구역으로 구분해서 틀을 잡고 작업을 한다. 우선 배치에 대한 float 간단한 예제를 해보자. 배경색과 크기를 준다. 하지만 우리가 최종화면처럼 배치가 저절로 되지 않는다. float 속성을 줘서, 옆으로 배치해보자. - float를 주면 보여주는 위치와 요소가 자리 잡는 위치를 잘 생각해야한다. 아래 사진처럼 그러면 파란 네모도 빨간 네모와 간은 선상 옆에 놓기 위해 파란 네모도 float 속성을 준다. 옆으로 배치 되지만.. 맨 아래 네모가 빨간색 네모 뒤로 올라가버렸다... float로 띄운 경우 그 영향을 받지 않으려면 clear 속성을 사용하자. (float와 clear는 한 쌍으로 사용한다고 보면 된다.) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15.. 2019. 12. 9. HTML+CSS (기초) overflow 속성 사용 ( 테두리 넘친 내용에게 적용) 우선 예를 위해 div에 p요소들을 만들자. 구분이 잘 되기 위해 크기 및 배경색을 주었다. 그리고 p를 감싸고 있는 div에 테두리를 그렸다. (테두리의 크기를 주지 않는다면, 내용을 감쌀 정도의 크기로 됨.) 만약에 테두리에 고정 크기가 있다면? 감싸고 있는 div에 크기를 주자. 위 사진과 같이 테두리 밖으로 내용이 표시된다... 이때 사용되는 것이 overflow이다. 이미지도 추가해보겠다. 이미지를 감싸고 있는 div에도 테두리(고정 크기)를 그어보자. 위 사진과 같이 역시 테두리를 넘어서 그려진다. overflow:auto를 주면 크기에 알맞게 들어가고 스크롤이 자동으로 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25.. 2019. 12. 9. HTML+CSS (기초) min, max 속성 사이즈 조절 min-width 속성을 주기 위해 임의의 긴 글을 써보자. 브라우저 창 크기에 따라서 자동 줄바꿈이 된다. 그러나 min 최소 크기를 주면, 그 크기까지는 자동 줄바꿈이 안된다. 아래 결과 사진을 보면 줄바꿈 대신 스크롤이 생기는 것을 알 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Document p{ min-width: 800px; /* 원래 브라우저 만큼 사이즈가 변경되지만 800보다 작아지면 스크롤됨*/ min-height: 200px; background: yellowgreen; } Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius harum quos corp.. 2019. 12. 9. HTML+CSS (기초) index 속성 이용하기. 원래는 제일 아래 박스가 위에 있었다.. 보이는 순서를 변결할 수 있다. 우선 위 사진과 같이 네모 박스를 만들어보자. 구분을 위해 크기와 색을 지정한다. 어느 것이 위에 있는지 알기 위해 위치를 달리한다. 위 사진을 보면 맨 마지막에 놓인 것이 제일 위에 있다. 보여지는 순서를 바꾸기 위해 index속성을 사용해보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 z-index #box1{ position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; background-color: cornflowerblue; z-inde.. 2019. 12. 9. 이전 1 2 3 4 다음
