Programmers

1) box-sizing 요소의 크기 계산 기준을 지정 속성 값 값 의미 기본값 content-box 너비(width, height)만으로 요소의 크기를 계산 content-box border-box 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 사용법 html css .box { width: 200px; height: 200px; background: orange; padding: 40px; border: 10px solid red; } ※ 개발자도구를 통해 영역을 확인해보면 200x200인 default(content-box)를 고정하고 padding을 더하기 때문에 당연히 크기가 커진다. border-box속성을 추가하면 외부 ..

1) border 요소의 '테두리 선'을 지정 속성 값 값 의미 기본값 border-width 선의 두께(너비) medium border-style 선의 종류 none border-color 선의 색상 black 사용법 border: 두께 종류 색상; .box { border: 1px solid red; } 2) border-width 선의 두께(너비)를 지정 속성 값 값 의미 기본값 medium 중간 두께 medium thin 얇은 두께 thick 두꺼운 두께 단위 px, em, cm 등 단위로 지정 ※ 단위로 지정하는 것을 추천 사용법 border-width: 위 우 아래 좌; border-width: 위 [좌,우] 아래; border-width: [위, 아래] [좌, 우]; border-width:..

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. 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 출력

1. em 폰트사이즈에 영향을 받는다. 자신에게 폰트사이즈가 없다면 부모의 폰트사이즈에 영향을 받는다. css body * { border: 2px solid; } .container { width: 60em; font-size: 10px; } .parent { width:30em; font-size: 2em; } .child { width: 15em; font-size: 2em; } constainer의 width는 60em * 10px(font-size)로 600px이 된다. parent는 width가 30em * 2em(부모의 10px * 2em = 20px)으로 600px이 된다. child는 width가 15em * 2em((부모의 10px * 2em = 20px) * 2em = 40px)으로 ..