HTML
미디어 쿼리와 뷰포트
미디어 쿼리란 ? 회면 해상도, 기기의 방향 등 다양한 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 css의 속성 미디어 쿼리 기본문법 기본 문법 : @media [only or not] [미디어 유형] [and or ,] (조건문){실행문} 1. [only or not] *생략 가능 only는 미디어쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드 not은 not 다음에 따라오는 키워드를 부정하는 키워드 2. 미디어 유형 all : 모든 장치 print : 인쇄장치 screen : 컴퓨터 화면 장치 or 스마트 기기 기타.. 3. [and or ,] *생략가능 and는 앞 뒤 조건이 모두 true 일 때 해석하라는 의미 , (콤마)는 앞 뒤 조건 중 하나만 true 일 때 해..
구글 맵 만들기
https://github.com/1997MJ 1997MJ - Overview노력하는 개발자 . 1997MJ has 8 repositories available. Follow their code on GitHub.github.com 배운 점 태그는 주로 아이콘을 불러올 때 사용한다. 태그는 과 비슷하지만 인라인 태그라는 점align-content vs align-items 차이align-contet : 여러줄로 요소들이 배치되었을 때 해당 줄에 대하여 적용align-items : 줄에 상관없이 적용
가변 그리드
가변 그리드 : px를 %로 바꿔주는 형식 가변 그리드 공식 (가변 크기로 만들 박스의 가로 너비 / 앞의 박스를 감싸고 있는 박스의 가로 너비) *100 가변 마진 & 가변 패딩 * 가변 그리드 공식을 똑같이 적용하면 된다. 가변 폰트 가변 폰트를 적용할 글자 크기 / 적용할 요소를 감싸고 있는 요소의 글자 크기 - 폰트 단위 em : 대문자 M의 너비를 표현한 것, 16px rem : 최상위 태그 기준 , 상속문제 발생 X vw : 웹 브라우저의 너비를 100으로 기준하여 크기를 결정 vh : 웹 브라우저의 높이를 100으로 기준하여 크기를 결정 vw/vh를 px로 변환 = (vw 단위를 적용할 글자 크기 * 브라우저의 너빗값) /100 vmin : 웹 브라우저의 너비와 높이중 짧은 쪽을 기준으로 크..
반응형 웹 기본 개념
반응형 웹 은 왜 사용 할까? 바로 모든 기기에서 최적화된 웹사이트를 사용할 수 있기 때문 ! 핵심 기술 가변 그리드 : 폭에 따라 유동적으로 줄이거나 늘릴 수 있도록 픽셀 px 대신 퍼센트 %로 웹을 제작하는 기술 미디어 쿼리 : 화면의 크기와 환경을 감지하여 웹사이트를 변경하는 기술 뷰 포트 : 화면을 제어하는 기술, 미디어 쿼리로 기기의 화면 크기 감지 시 필요한 기술 플렉서블 박스 : 가변적인 박스를 만드는 기술인 동시에 웹사이트의 구조설계를 위한 새로운 기술