css 반응형 공부

반응형 공부 1편 부모태그가 width: 100% 일 때 자식태그의 비율을 늘었다가 줄었다가 유지해달라고할 때 쓰이는 반응형 반응형은 %(퍼센트)으로 움직이지 않고 브라우저가 px를 계산해서 움직이게 되는 것이다. 자식태그의 px가 %(퍼센트)가 궁금하면 부모태그

반응형 공부 2편 자식태그의 마진(margin)사이즈 %(퍼센트)로 나누는 방법 자식태그한테 margin-left: 16px를 주고 %(퍼센트)으로 나누고 싶다면 부모태그의 width값 사이즈로 나눠야한다. 자식태그의 마진(margin)이니까 즉, 여백이니까 부모태

브라우저의 꽉 찬 화면 만드는 설명 반응형 %(퍼센트)으로 브라우저의 꽉 찬 화면을 만들고 싶다면? 부모태그가 높이값이 없어서 그렇다. 부모한테 높이값 줬는데 안된다. 그 이유는 부모태그의 조상태그가 body태그가 높이값이 없어서 그렇다. 그럼 body태그한테 높이값

반응형 웹 구현할 때 width 사이즈 콘텐츠만큼 주는게 아니라 넓이를 넉넉하게 px값으로 줘야 브라우저 창 크기조절할 때 콘텐츠가 밑으로 떨어지지 않는다.

반응형은 미디어 쿼리 반응형으로 작업시 미디어 쿼리를 빼놓을 수가 없습니다. 미디어 쿼리의 코드를 알아보겠습니다. 코드는 min-width max-width 2가지가 있습니다. 코드 코드 설명 해상도 768px ~ 1023px를 나타냅니다.

자식 콘텐츠의 width 사이즈 알아내기 부모 콘텐츠의 width 사이즈 - margin 여백 사이즈 = 값(1) 값(1) ÷ 콘텐츠의 갯수 = 자식 콘텐츠의 사이즈가 나옵니다.

자식한테 width: 25%; padding: 0 12px; box-sizing: border-box; 부모한테 width: 100%; width: calc(100% + 24px); margin-left: -12px;