[기본 개념] 6 | (6.1) 반응형 웹, 미디어 쿼리

[기본 개념] 6 | (6.1) 반응형 웹, 미디어 쿼리1> 반응형 웹2> 미디어 쿼리3 그리드 레이아웃4 플렉스 박스 레이아웃5 CSS 그리드 레이아웃 사용1 반응형 웹반응형 웹 디자인과 뷰포트  반응형 웹 디자인이란 스마트폰이나 태블릿, TV 등 브라우저 환경에 따라 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시방법을 바꾸는 것이다.  반응형 웹 디자인에서의 기본에는 뷰포트가 있는데 이것을 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소할 수 있다. 뷰포트 지정하기 기본형name="viewport" content="속성1=값1", "속성값2=값2", . . .">  뷰포트는 태그를 이용해 태그 사이에 작성한다.  content 속성을 이용해 뷰포트 속성과 속성값을 지정하면 된다. 종..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 15.
• textsms

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

[정리] 5 | 변형함수, 트랜지션과 애니메이션 속성 정리

[정리] 5 | 변형함수, 트랜지션과 애니메이션 속성 정리변형함수종류설명transform : translate(tx, ty)지정한 크기만큼 x축과 y축으로 이동transform : translate(tx, ty, tz)지정한 크기만큼 x축, y축, z축으로 이동transform : translateX(tx)지정한 크기만큼 x축으로 이동transform : translateY(ty)지정한 크기만큼 y축으로 이동transform : translateZ(tz)지정한 크기만큼 z축으로 이동transform : scale(sx, sy)지정한 크기만큼 x축, y축으로 확대, 축소transform : scale(sx, sy, sz)지정한 크기만큼 x축, y축, z축으로 확대, 축소transform : scaleX(s..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 14.
• textsms

[기본 개념] 5 | (5.2) 트랜지션, 애니메이션

[기본 개념] 5 | (5.2) 트랜지션, 애니메이션1 변형2> 트렌지션3> 애니메이션2 트렌지션트렌지션과 속성  트랜지션은 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 말한다.  종류설명transition-property트랜지션의 대상을 지정transition-duration트랜지션을 실행할 시간 지정transition-timing-funcion트랜지션의 실행 형태를 지정transition-delay트랜지션의 지연 시간 지정transition위 속성을 한꺼번에 지정 트랜지션의 대상을 지정하는 transition-property 속성 기본형transition-property : all | none |  all all 값을 사용하거나 transition-property 를 생략할 경우 요소의 모든 속..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 13.
• textsms

[기본 개념] 5 | (5.1) 변형

[기본 개념] 5 | (5.1) 변형1> 변형2 트렌지션3 애니메이션1 변형transform과 변형함수 기본형transform : 함수  변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 한다. 2차원 변형함수종류설명translate(tx, ty)지정한 크기만큼 x축, y축으로 이동translateX(tx)지정한 크기만큼 x축으로 이동translateY(ty)지정한 크기만큼 y축으로 이동scale(sx, sy)지정한 크기만큼 x축과 y축으로 확대, 축소scaleX(sx)지정한 크기만큼 x축으로 확대, 축소scaleY(sy)지정한 크기만큼 y축으로 확대, 축소rotate(각도)지정한 각도만큼 회전skew(ax, ay)지정한 각도만큼 x축과 y축으로 왜곡skewX(ax)지정한 각도만큼..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 11.
• 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