[정리] 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

[정리] 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

[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리

[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리연결 선택자종류형식설명하위 선택자상위요소 하위요소상위요소에 포함된 모든 하위요소를 선택자식 선택자부모요소 > 자식요소부모요소에 포함된 자식요소만 선택인접 형제 선택자요소1 + 요소2요소1 이후 맨 먼저 오는 형제요소 선택형제 선택자요소1 ~ 요소2요소1과 형제인 모든 요소 선택속성 선택자종류선택요소예시[속성]해당 속성이 있는 요소[required][속성 = 값]지정한 속성값이 있는 요소[target = _blank][속성 ~= 값]지정한 속성값이 포함된 요소 (단어별)[class ~= button][속성 != 값]지정한 속성값이 포함된 요소 (하이픈 포함, 단어별)[title != us][속성 ^= 값]지정한 속성값으로 시작하..

• format_list_bulleted CSS
• · 2022. 7. 4.
• textsms