팡팡

Hover를 이용하여 칵테일 느낌이 나는 페이지를 만들어보겠습니다 공부한 영상에서는 display : grid로 처리해주었습니다. 하지만 아직 grid 개념이 많이 미숙하여 flex로 처리해주었습니다. grid 공부하겠습니다. 박스 위에 마우스 커서를 올리면 박스 번호가 올라오고 아래에 CLICK ME라는 버튼이 나오도록 해주었습니다. HTML 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 repl.it 01 Section One CSS Grid Layout is the most ..

오늘은 햄버거 버튼을 누르면 왼쪽에서 사이드바가 나오면서 햄버거 버튼도 동시에 움직이도록 하는 페이지를 만들어 보겠습니다. HTML 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 repl.it Age never to comeback Home About Address Contact etc css 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 5..

여러 사이트에서는 체크박스를 누르면 햄버거 버튼이 X로 변하면서 사이드바가 나오는 것을 볼 수 있습니다. 오늘은 이러한 기능을 가진 페이지를 만들어 보겠습니다. HTML 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 repl.it This is me Home About Group Age Contact In order to make ARIN Meetings the best they can be, we need the support of organizations like yours! We’re seekin..

오늘은 이와 같은 페이지를 만들어보겠습니다. 얼마 전에 유튜브로 sticky를 이용하여 홈페이지 화면을 만드는 영상을 보았습니다. 본영상을 바탕으로 최대한 비슷하게 구현해보겠습니다. wallpaper은 pixabay에 있는 사진을 이용하였습니다. HTML 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 76 77 78 79 80 81 82 83 84 85 86 87 88 ..

오늘은 버튼을 사용하여 홈페이지에 기본적으로 있는 메뉴 형식을 만들고 거기에 저번 시간에 공부했던 border-radius를 같이 사용해보겠다. HTML 코드 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 repl.it Arin Home About Group Contact Login OhMyGirl The Fifth Season :: SSFWL See More Arin OhMyGirl Member Arin OhMyGirl Member Arin ..

CSS3에서 새로 추가된 border-radius 속성(property)을 사용해보겠습니다. 다른 속성들과 마찬가지로 문법은 동일합니다. border-radius : [TOP][RIGHT][BOTTOM][LEFT]; 만약 어떠한 이미지가 있다면 아래과 같이 각 요소 부분을 둥글둥글하게 만들 수 있습니다. 예를 들어서 연예인 포토카드를 생각해봅시다. 포토카드 모서리 부분을 보면 각지지않고 약간 둥글둥글한 것을 볼 수 있습니다. 바로 실습해보겠습니다. 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 repl.it Arin OhMyGirl MemBer Arin OhMyGirl MemBer Arin OhMyGirl ..

오늘은 오마이걸의 아린 사진을 이용하여 CSS의 border 속성을 사용해보겠다. 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 repl.it Arin OhMyGirl Member Arin OhMyGirl Member Arin OhMyGirl Member 아린이 이미지 3장을 화면에 띄어보겠습니다. 기본 길이 값 : px , cm , in , em 등등 있다. 현재 html의 요소 만으로의 출력은 아래와 같다. 사진을 나란히 배치해보겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .test{ background-color: #222; text-align: c..

css에서 shadow 속성 사용하기 css에서 제공하는 그림자 효과에 대해서 알아보겠습니다. 단순하게 글을 만드는 것보다 그림자를 이용해서 글을 만든다면 좀 더 아름답겠죠??? text-shadow box-shadow text-shadow text-shadow의 기본 문법은 text-shadow: [그림자의x축값] [그림자의y축값] [blur값] [색상값] ; 이다 그림자가 시작할 x축과 y축의 상대 위치를 알려주고 그림자의 흐린 정도를 나타내는 blur 값을 명시해주어야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 test OhMyGirl cs wrapper라는 클래스를 만들어준 후 h1 태그를 이용하여 문자열을 하나 만들어보겠다. 아무 효과를 주지 않..