공부하자

미디어쿼리(Media Query) : 디바이스에 상관없이 최적화 된 페이지를 제공할 수 있도록 도와주는 기술 미디어 쿼리를 선언 후 css 작성 기본문법 : @media only screen and (속성값 A) and (속성값 B) @media all : 모든 장치 @media print : 인쇄 결과물 및 출력 미리보기 화면 @media screen : 화면 @media speech : 음성 합성 장치 min 과 max : 화면의 최소값과 최대값을 정해주는 속성 min-width:375px : 화면의 최소 넓이가 375일 때, 즉 375px 이상의 화면에 적용하라 max-width:1024px : 화면의 최대 넓이가 1024px일 때, 즉 1024px 이하의 화면에 적용하라 @media screen ..

반응형 웹(Responsive Web) : 스마트 폰 발달에 따라 발달한 것으로 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지. 반응형 웹과 적응형 웹 ? 반응형 웹은 하나의 페이지를 디스플레이 종류에 따라 크기가 자동으로 최적화 적응형 웹은 디스플레이의 사이즈에 따라 웹 페이지가 존재한다. 크게 PC, 탭, 모바일로 나뉘어 제작된다. 모바일 해상도를 확인 할 수 있는 사이트 screensiz.es/iphone-xs Vendor object iPhone XS | Viewport Sizes and Pixel Densities for Popular Devices Vendor detail view type Apple iPhone 8 Plus iOS 5.5 13.9 1080 192..

1. transition : 속성의 변화에 단순한 애니메이션 적용. 단독 사용은 불가, hover, click 등 사용자 반응에 의해 이벤트가 실행될때 주는 효과 속성별로 시간을 따로 줄 수 있다. transition : property duration timing-function delay; (효과, 지속시간, 효과의 변화 유형, 지연시간) .box {width:50px;height:50px;background:#f00;transition:all 1s;} .box:hover {width:100px;height:100px;background:#ff0;margin-left:20px;} or .box {transition:width 0.5s, height 2s, background-color 1s;} www..

1. float:left / float:right 제일 기본적인 방법. block 속성의 박스를 inline 속성으로 바꿔 좌우 배치하는 방법 .container {width:100%} .aside {width:200px;height:500px;background:#f00;float:left;} .section {width:calc(100%-200px);height:500px;background:#f0f;float:right} 2. display:table / display:table-cell 부모와 자식의 구조를 table 형식으로 바꿔주는 css 로 table 태그의 단점인 모바일 기기에 호환되지 않는 점을 보완한 방법 .container {display:table;width:100%;} .conta..

요소의 넓이와 높이의 단위값 중 px는 고정값으 표현, em,%,vw,vh 는 유동적인 값이다. 유동값은 각자 기준이 되는 값이 다른데 em : 부모의 영향을 받아 유동적으로 변하는 폰트 단위 % : 부모 요소를 기준으로 부모 요소가 전체 사이즈의 90%라는 값을 갖고 있을 때 자식 요소는 부모가 가진 90%를 100%로 인식해 그 값을 기준으로 갖게 된다. vw와 vh : viewrport 를 기준으로 즉 사용자의 화면을 기준으로 값을 갖게 된다. 부모 요소가 viewport 기준 90%의 값을 갖고 있어도 자식 요소는 부모 요소의 영향을 받지 않고 viewport 기준으로 값을 갖게 된다. vw와 vh는 IE9부터 지원 webclub.tistory.com/356 CSS의 7가지 단위 - rem, vh..