[정리] 6 | 미디어 쿼리와 플렉스 박스 레이아웃의 속성, CSS 그리드 레이아웃의 속성과 함수 정리

[정리] 6 | 미디어 쿼리와 플렉스 박스 레이아웃의 속성, CSS 그리드 레이아웃의 속성과 함수 정리미디어 쿼리의 속성종류설명width, height웹 페이지의 가로 너비, 세로 높이min-width, min-height웹 페이지의 최소 너비, 최소 높이max-width, max-height웹 페이지의 최대 너비, 최대 높이device-width, device-height단말기의 가로 너비, 세로 높이min-device-width, min-device-height단말기의 최소 너비, 최소 높이max-device-width, max-decive-height단말기의 최대 너비, 최대 높이orientation: portrait단말기의 세로 모드orientation: landscape단말기의 가로 모드플렉스 ..

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

[기본 개념] 6 | (6.3) CSS 그리드 레이아웃 사용

[기본 개념] 6 | (6.3) CSS 그리드 레이아웃 사용1 반응형 웹2 미디어 쿼리3 그리드 레이아웃4 플렉스 박스 레이아웃5> CSS 그리드 레이아웃 사용5 CSS 그리드 레이아웃 사용CSS 그리드 레이아웃  CSS 그리드 레이아웃은 가로와 세로를 모두 사용한다. 따라서 플렉스 항목은 1차원이고, CSS 그리드 레이아웃은 2차원이라고 말한다.  칼럼←       칼럼 간격       →칼럼←       칼럼 간격       →칼럼줄               1                               2                               3               ↑줄 간격↓     줄               4                             ..

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

[기본 개념] 6 | (6.2) 그리드, 플렉스 박스 레이아웃

[기본 개념] 6 | (6.2) 그리드, 플렉스 박스 레이아웃1 반응형 웹2 미디어 쿼리3> 그리드 레이아웃4> 플렉스 박스 레이아웃5 CSS 그리드 레이아웃 사용3 그리드 레이아웃그리드 레이아웃  반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 하는데 그 기준이 되는 레이아웃을 그리드 레이아웃이라고 한다. 그리드 레이아웃을 3가지 특징 1 시각적으로 안정된 디자인 책이나 신문 등 여러 시각 매체에서는 한 화면을 여러 개의 칼럼으로 구성하여 밑으로 늘어뜨리는 그리드 레이아웃을 사용한다.  2 업데이트가 편한 웹 디자인 구성 사이트 구조를 미리 먼저 만들어 놓고 나중에 내용을 채워 넣을 수 있다. 따라서 내용을 업데이트하기도 쉽다. 3 요소를 자유롭게 배치 한 줄에 여러 ..

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

[기본 개념] 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