개발

상기 이미지의 굴곡도를 올려서 원형으로 만드는 옵션을 적용 해 볼 겁니다! 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 Document #pic{ width: 300px; height: 300px; } #wrapper{ margin: auto; width: 320px; height: 320px; text-align: center; } Colored by Color Scripter cs 전체 코드구요. border-radius: 10%; pic 스타일시트에 옵션을 적용 해 봅시다 모서리에 굴곡이 생기는 것을 볼 수 있죠 퍼센트로 50%를 주게 되면 완벽한 원형이 됩니다. 여기서 하나 느낄 수 있는 단점은.. 사이즈를 ..

상기 이미지처럼 회전하는 애니메이션 효과를 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 Document #ball{ animation-name: ball-rotate; animation-duration: 8s; animation-iteration-count: infinite; animation-delay:0ms; animation-timing-function: linear; } @keyframes ball-rotate{ from{transform: rotate(0deg);} to{transform: rotate(720deg);} } Colored by Color Scripter cs..

보편적으로 블로그에서 많이들 쓰는 상기 모양으로 레이아웃을 만들어 보겠습니다. HTML은 inline과 block 그리고 inline-block 총 세가지 속성으로 나뉘어집니다. inline 형식은 일반적인 줄글형식처럼 옆으로 쭉 써지는 방식이며 width, height등 사이즈를 조절할 수 없습니다. block 형식은 자동으로 전, 후 줄바꿈이 들어가 같은 줄에 다른 어떠한 컨텐츠도 용납하지 않습니다. inline-block 형식은 inline형식과 동일하게 줄글형식으로 사용이 가능하며 block 형식처럼 사이즈 조절이 가능합니다. 기본적으로 div 태그는 block형식을 취하고 있어 따로 속성을 주지 않을 시 이런식으로 이루어지게 됩니다. 이 모양으로 만들기위해 제일 외부에 wrapper 라는 클래스..

1. 기본구조 내용 표제 부분에 들어갈 말을 정의. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아짐 default H4 주석을 달거나 잠시 이미지를 보이지 않게 할때 사용 2. 문단 혹은 줄을 바꾸는 태그 공백 문단을 바꾸는 태그 줄바꿈과 동시에 줄을 띈 것같은 효과 문단을 바꾸는 태그 줄바꿈의 역할만 수행 여백이나 줄간격 등을 고정시켜 주는 역할 들여쓰기 전체 문장을 가운데로 정렬 - align : 정렬하기 (left/center/right) 3. 글자관련 태그 - size : 글자의 크기를 마음대로 조절. 숫자는 1~7까지며 7이 가장 큰 크기 (default : 3) , 굵은 글씨를 나타내 주는 태그 , , 이탤릭체의 글씨를 나타내 주는 태그 , , 타자기체의 글씨를 나타내 주는 태그 글..