Programmers

paddding 요소의 '내부(안) 여백'을 지정 ※ 크기 증가 추가된 padding 값만큼요소의 크기가 커지는 현상 예제) ▷ box-sizing: border-box; 여백이 안쪽으로 나타내게 하는 방법!

1. 마진 중복 예 1) 좌에서 우로 정렬하면 마직 중복 없음 html css .parent { } .child { width: 100px; height: 100px; background: tomato; float: left; margin: 20px } 실행결과 예 2) 위에서 아래로 정렬하면 마진 중복이 발생 html css .parent { } .child { width: 100px; height: 100px; background: tomato; margin: 20px } 실행결과 2. 마진 중복 계산법 html .parent { width: 300px; height: 200px; background: cyan; } .child { width: 100px; height: 100px; backgroun..

1. margin 요소의 '외부(바깥)여백'을 지정 음수 값을 사용할 수 있음 html css .parent { width: 400px; height: 200px; border: 4px solid red; margin: 20px; } .child { width: 100px; height: 100px; border: 4px solid; margin: 50%; } 실행화면 2. margin-top, margin-botton, margin-left, margin-right 개별속성 가능

1. max-width 2. min-width 3. max-height 4. min-height 예제)

1. @supports 브라우저의 css 지원여부를 체크 @supports (display: grid) { div { display: grid; } } 지원을 하지 않으면 아래의 display를 적용 @supports not (display: grid) { div { display: flex; } } 2. css scrollsnap #parents { scroll-snap-type: y mandatory;} .children { scroll-snap-align: center } https://codepen.io/serranoarevalo/pen/xxdYBxZ Scroll Span ... codepen.io 3. is sudoselector :is(header, nav, form) button { back..

1. width 가로 넓이 기본값 블록 요소(div) width: auto = width: 100%; 인라인 요소(span) width: auto = width: 0; 2. height 세로 넓이 기본값 블록 요소(div) height: auto = height: 0; 인라인 요소(span) height: auto = height: 0; - 인라인 요소는 가로 세로 값을 가질 수 없다. 하지만 text가 있으면 출력된다. 즉, 인라인요소는 텍스트에 특화되어 있다!

1. vmax vmax: viewport의 최대 넓이 가로와 세로 중 더 넓은 사이즈를 백분율로 계산 css .container { width: 50vmax; height: 200px; background: red; } html 출력 ▷ 가로 값이 세로보다 길기 때문에 가로 viewport 넓이의 50%를 가로 넓이로 표시 ▷ 세로 값이 가로보다 길기 때문에 세로 viewport 넓이의 50%를 가로 넓이로 표시 2. vmin vmin: viewport의 최소 넓이 가로와 세로 중 더 좁은 사이즈를 백분율로 계산 css .container { width: 50vmin; height: 200px; background: red; } html 출력 ▷ 세로 값이 가로보다 짧기 때문에 세로 viewport 넓이..

1. vw, vh 반응형으로 가로, 세로의 사이즈가 변할때 자동으로 적용이 된다. vw: viewport의 가로사이즈 화면 전체의 가로 크기 1vw는 전체 viewport의 가로사이즈의 1/100 vh: viewport의 세로 사이즈 화면 전체의 세로 크기 1vh는 전체 viewport의 세로사이즈의 1/100 css reset 환경 설정 후의 실행입니다. css .container { width: 50vw; height: 50vh; background: red; } html 출력