13. 변형함수와 애니메이션의 속성을 사용한 문제

13. 변형함수와 애니메이션의 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. perspective 속성으로 깊이값 200px을 지정한다.2. 변형함수 rotateY( ) 함수로 y축을 기준으로 360도 회전하도록 한다.3. 키프레임은 시작지점, 중간지점, 끝지점 세 군데를 지정한다.  결과 화면A. 해설1. perspective 속성으로 깊이값 200px을 지정한다.--> 키프레임 안에 perspective 속성으로 지정한다.2. 변형함수 rotateY( ) 함수로 y축을 기준으로 360도 회전하도록 한다.--> 키프레임 안에 rotateY(0deg), rotateY(-180deg), rotateY(-360d..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 7. 14.
• textsms

12. 트랜지션의 속성을 사용한 문제

12. 트랜지션의 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 트랜지션 진행시간은 0.5초로 지정한다.2. 트랜지션 대상은 all로 지정한다.3. 트랜지션 함수는 ease-in으로 지정한다.  메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 결과 화면A. 해설1. 트랜지션 진행시간은 0.5초로 지정한다.--> .top-menu li a:link 스타일에 transition-duration 속성으로 지정한다.2. 트랜지션 대상은 all로 지정한다.--> 기본값이 all이라 따로 지정하지 않아도 되지만, transition-property 속성으로 지정한다.3. 트랜지션 함수는 ease-in으로 지정..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 7. 14.
• textsms

11. 구조 가상 클래스와 가상 클래스를 사용한 문제

11. 구조 가상 클래스와 가상 클래스를 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.2. 메뉴6의 테두리를 없애고 나면 메뉴 전체 너비가 길어진다. 메뉴 전체 너비를 610px에서 605px로 줄인다.3. 메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색을 #555로, 글자색은 #fff로 바뀐다.4. 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경색은 #b30000로, 글자색은 #fff로 바꾼다.  메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 결과 화면A. 해설1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.--> 구조 가상 클래스 ..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 7. 4.
• textsms

10. 구조 가상 클래스를 사용한 문제

10. 구조 가상 클래스를 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 구조 가상 클래스를 사용하여 첫 번째 이미지의 스타일을 테두리 색상은 빨강(#f00)으로, 두께는 2px로 지정한다.  결과 화면A. 해설1. 구조 가상 클래스를 사용하여 첫 번째 이미지의 스타일을 테두리 색상은 빨강(#f00)으로, 두께는 2px로 지정한다.--> img 요소중 가장 첫 번째 이미지를 선택해야 하므로 A:first-of-type 클래스를 사용하여 지정한다.         출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 7. 4.
• textsms

09. 배경 이미지 속성을 사용한 문제 II

09. 배경 이미지 속성을 사용한 문제 II다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 문서 전체의 배경색을 #02233b로 지정한다.2. #container 의 배경색은 흰색으로 지정한다.3. #container 의 배경 이미지는 images\mic.png로 지정하는데, 배경 이미지는 반복하지 않고 오른쪽 아래에 고정한다.4. 태그를 사용한 제목의 배경색을 #004344로 지정하고, 글자색은 흰색으로 바꾼다.  대학언론사 수습기자 모집 신입생 여러분을 기다립니다 모집분야 아나운서(0명) : 학내 소식을 라디오 방송으로 보도 오프닝쇼프로듀서(0명) : 라디오 방송 기획,..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 27.
• textsms

08. 배경 이미지 속성을 사용한 문제 I

08. 배경 이미지 속성을 사용한 문제 I다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 배경색은 회색이다.2. 배경이미지는 웹 브라우저의 아래에서 가로로 가득 차게 반복, 고정되어 있다.  웹 디자인 트렌드를 따라잡는 비법 대공개! 그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. 결과 화면A. 해설1. 배경색은 회색이다.--> body 스타일에 color 속성으로 글씨를 흰색으로 바꾼다.2. 배경이미지는 웹 브라우저의 아래에서 ..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 27.
• textsms

07. 레이아웃 속성을 사용한 문제

07. 레이아웃 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(마우스 포인터를 올렸을 때 글자색과 배경색이 바뀌는 CSS소스는 미리 작성되어 있습니다.) 1. ul 요소의 불릿을 없앤다.2. 목록의 각 항목인 li 요소는 왼쪽으로 플로팅한다.3. 링크 요소인 a는 display 속성을 block으로 지정하고, 패딩을 10px, 20px로 지정한다. 배경색은 회색(#CCC)으로 지정한다.  메뉴1 메뉴2 메뉴3 메뉴4 결과 화면 A. 해설1. ul 요소의 불릿을 없앤다.--> ul 태그에 list-style 속성으로 지정한다.2. 목록의 각 항목인 li 요소는 왼쪽으로 플로팅한다..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 16.
• textsms

06. 레이아웃 속성과 여백 속성을 사용한 문제

06. 레이아웃 속성과 여백 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. article 요소를 왼쪽으로 플로팅한다.2. article 요소의 너비는 350px, 높이는 200px, 마진과 패딩은 각각 10px로 한다.3. article 요소 주변에 1px짜리 회색(#ccc) 실선을 그린다.4. footer 요소에서 왼쪽 플로팅을 해제한다.  강아지 용품 준비하기 강아지 집 강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다. 강아지 먹이..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 13.
• textsms