CSS) vmin, vmax
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 넓이..
CSS) vw, vh
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 출력
CSS) em, rem
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)으로 ..
CSS) px, %
1. px 절대적으로 고정하는데 사용하는 단위 css body * { border: 2px solid; } .container { width: 600px; } .parent { width:300px; } .child { width: 150px; } html Container Parent Child1 Child2 출력 2. % 부모단위의 영향을 받아서 %가 적용된다. css body * { border: 2px solid; } .container { width: 600px; } .parent { width:50%; } .child { width: 50%; } html Container Parent Child1 Child2 출력
CSS) 선택자(selector)
선택자 4가지 - 기본 선택자(Basic Selector) 1. 전체 선택자(Universal Selector) (요소 내부의) 모든 요소를 선택 * 별표시를 선택 css * { color: red; } * : 전체를 선택 html 사과 딸기 오렌지 당근 토마토 오렌지 출력 2. 태그 선택자(Type Selector) 태그이름이 (div, span, h, p ...)인 요소 선택 css li { color: red; } li 앞뒤에 아무런 기호가 없으면 '태그 선택자' 이다. li 태그만 선택 html 사과 딸기 오렌지 당근 토마토 오렌지 출력 3. 클래스 선택자(Class Selector) HTML class 속성의 값이 .className 인 요소 선택 '.' 이 찍혀있으면 'class속성'을 말하는..
1. css 외부참조 (가능하면 이 방식을 추천) html Hello link 태그 내의 rel="관계를 명시" href="파일 위치" css /* common.css */ div { color: red; font-size: 20px; font-weight: bold; } 2. @import 방식 Css @import를 이용하여 외부문서로 css를 불러와 적용하는 방식 html Hello css /* common1.css */ @import url("./common2.css"); 아래의 common2.css파일을 import한다. css에서 다른 css를 @import가 가능하다. css /* common2.css */ div { color: red; font-size: 20px; font-weight:..
