팡팡

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 태그를 이용하여 문자열을 하나 만들어보겠다. 아무 효과를 주지 않..

html과 css를 이용하여 3D 애니메이션을 만들어 보겠습니다. 저는 repl.it 개발도구를 이용하였습니다. 군대에서 이만한 게 없단 말이야 goormide 도 있지만.. 이건 너무 어렵고.. playcode.io는 별로 정감이 안감.... 우선 첫 번째로 원하는 이미지 몇 개를 골라서 repl.it 목록에 추가해줍니다. 상업적으로 이용할 생각 없습니다.. 만약 저작권 문제가 된다면 바로 내리겠습니다.... 저는 최근 다섯번째계절로 컴백한 오 마이걸의 아린으로 이미지를 넣으려고 합니다. 사진은 https://www.pinterest.co.kr/ 에서 가져왔습니다. html 코드만 아래처럼 해주었습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2..