CSS3 실습 7-8 Animation 만들기(transform)[Direction:] Ÿ 다음 CSS의 transform 속성을 사용하여 그림과 같이 변환 효과를 내는 HTML 문서를 작성하시오. ü Box#1의 기준 위치(50x50) ü Box#2는 translate(100px, 0px) ü Box#3는 scale(1.2, 1.2) ü Box#4는 rotate(30deg) Box#1 Box#2 Box#3 Box#4 CSS3 실습 7-7 Animation 만들기(transition)[Direction:] Ÿ 다음 그림과 같이 ‘꽝!’ 글자의 크기를 5초에 걸쳐 서서히 변화가 진행되도록 전환 Ÿ 마우스가 글자 위에 올라오면 현재 크기에서 500% 크기로 전환 진행 font-size에 대한 전환 꽝!글자에 마우스를 올려보세요. CSS3 실습 7-6 Animation 만들기[Direction:] Ÿ 다음 그림과 같이 ‘꽝!’ 글자의 크기를 3초에 걸쳐 500%에서 100%로 서서히 축소되는 애니메이션을 작성하라. 단, 애니메이션은 무한 반복한다. 꽝! CSS3 실습 7-5 보호된 글입니다. CSS3 실습 7-4 float 속성 활용[Direction:] Ÿ float속성을 사용하여 배치 니가 나의 모든 걸 뺏어갔어도 모두가 내 꿈에 바리케이드를 쳐도 내가 나의 기름 더 불을 붙여줘 빛이 나는 My Way 빛이 나는 My Way 니가 나의 모든 걸 뺏어갔어도 모두가 내 꿈에 바리케이드를 쳐도 내가 나의 기름 더 불을 붙여줘 빛이 나는 My Way 빛이 나는 My Way 난생처음 섰던 무대엔 낯선 얼굴 쟤 누군데? 마이크 잡은 후엔 함 더 묻대 쟤 누구래? 끝내고 내려오는 기분이 .. CSS3 실습 7-3 고정 배치(fixed)[Direction:] Ÿ block #2 와 block #5는 고정 배치 Ÿ block #2는 top(0px), right(0px); block #5는 top(160px), left(100px) block#1 block#2 Best of Best! 최근 본 상품 리스트입니다. block#3 block#4 block#5 이 상품은 반드시 사야 합니다. block#6 block#7 block#8 block#9 block#10 block#11 CSS3 실습 7-2 상대 배치(relative)[Direction:] Ÿ 에서 와 같이 상대 배치시킴 Ÿ 각 숫자(텍스트) 중앙정렬과 흰색임; display는 인라인 박스이면서 블록박스 Ÿ 너비와 높이는 각 50px; border는 3px, 직선 그리고 색은 deepskyblue Ÿ 6개의 중 h와 k 글자를 가진 2개의 에 마우스를 올리면 20px씩 상대 배치시킴 Ÿ 즉, h와 k 블록에 마우스를 올린 경우(:hover), 상대 배치에 따라 위치가 변함 코드 상대 배치, relative T h a n k s 코드 상대 배치, relative .. CSS3 실습 7-1 display 프로퍼티로 박스 유형 설정[Direction:] Ÿ 과 같이 블록요소인 를 와 같이 인라인 요소로 변경하여 배치 Ÿ border는 1px 직선; 색은 red Ÿ padding은 0.5em Ÿ 링크는 dummy 링크 사용 (예, href=“#”) 홈으로 회사 소개 제품 소개 질문과 대답 연락처 CSS3 실습 6-3 이미지 테두리 만들기 2[Direction:] 다음 그림처럼 이미지 테두리를 만들고 에지 이미지를 배치하는 3가지(round, repeat, stretch) 형태를 이용하여 꾸며 보시오. (단, 에지 이미지를 배치하는 3가지는 id 셀렉터를 사용 하시오.) 이미지 테두리 만들기 다음은 원본 이미지입니다. 20X20 크기의 회색 테두리를 가진 P태그 round 스타일 이미지 테두리 repeat 스타일 이미지 테두리 stretch round 스타일 이미지 테두리 CSS3 실습 6-2 이미지 테두리 만들기 1[Direction:] 다음 그림처럼 이미지 테두리를 이용하여 꾸며 보시오. (단, 테두리의 두께는 15px, padding은 5px로 하여 테두리와 이미지 사이에 공간이 있게 하시오) 이미지 테두리 만들기 CSS3 실습 6-1 웹페이지 모양 꾸미기[Direction:] 다음 그림처럼 조건에 따라 CSS3로 웹페이지 모양을 꾸며 보시오. Ÿ 과 : 의 배경은 aliceblue 색 Ÿ 과 : 의 텍스트는 휴먼 편지체 글자크기 1em, 들여쓰기 1em Ÿ : “스마트폰”은 brown 글자색, 텍스트 정렬 center Ÿ : 설문지 소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다. 학년 1학년 2학년 3학년 4학년 성별 남 여 .. 이전 1 다음
