월드스토리의 코딩 나라

반응형1. 동일한 웹페이지를 보여주나 디바이스의 크기에 따라 레이아웃을 다르게 보여줌2. 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임 적응형사용자가 모바일 환경인지, PC 환경인지에 따라 다른 웹 페이지를 보여줌.  Viewport 반응형 웹을 디자인하기 위하여 기준으로 삼는 지표를 의미함기기마다 화면 사이즈가 다르기에 기기에 맞춰서 디자인하기 위한 크기 요소디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공함 @media(미디어 쿼리)   용어 정리의미코드 상의 예시미디어 유형All(전부)/print(인쇄)/Screen(전부)screen크기 규칙min(최소 뷰포트 넓이)max(최대 뷰포트 넓이)지정 기준을 결정min-width, min-heightBreakp..

transform 특정 상황에서만 태그의 상태를 바꾸고 싶을 때 사용하는 CSS 2D 변환 함수CSS 용어용어의 의미 translate(x,y) x축(옆)으로 x만큼, y축(아래)으로 y만큼 이동 translateX(x), translateY(y) 특정 축으로 변수 만큼 이동 scaleX(x), scaleY(y) 특정 축으로 변수 만큼 키움 scale(x,y) x축(width)으로 얼마, y축(height)만큼 크기를 키움 skew(x,y)x축으로 얼마, y축으로 얼마 만큼 기울임skewX, skewY특정 축으로 얼마만큼 기울임matrix(n, n, n, n, n,n)2차원 변환효과rolate(degree)태그를  degree만큼 시계 방향으로 회전3D 변환 함수CSS 용어용어의 의미tran..

요소의 배치 CSS 용어용어의 의미상태position: relative;요소 자신을 기준으로 배치position: absolute;위치 상 부모 요소를 기준으로 배치(부모 요소는 relative인 요소, 둘다 static이라면 메인 페이지를 반영)display 속성이 block으로 변경됨position: fixed;뷰포트를 기준으로 배치display 속성이 block으로 변경됨z-index요소의 배치 순서를 결정auto : default(부모 요소와 동일한 쌓임)숫자 : 숫자가 높을 수록 위에 쌓임 배경 이미지 CSS 용어의미사용법background-color태그의 색상을 지정함default : transparent(투명함)색상값을 넣으면 된다.linear-gradient() : 여러개의 색깔을 그라이데..