기존에는 div나 image의 비율을 고정하려면 직접 계산해서 width, height 값을 지정하거나 calc()를 사용했다.하지만 원하는 비율을 쉽게 고정할 수 있는 방법이 있다. aspect-ratio사용법.box { width: 100px; /* 요소 가로길이 지정 */ aspect-ratio: 16 / 9; /* 가로:세로 비율 지정 */}만약 하나의 값만 지정할 경우, 높이를 1의 비율로 간주한다.div 뿐만 아니라 이미지, 테이블 등 모든 엘리먼트에 종횡비 적용이 가능하다.width, height 중 하나의 값을 반드시 지정해야하며, 그게 기준이 된다.위의 예로 width 값을 지정했기 때문에 16 / 9는 가로(16) : 세로(9) 비율이 된다.만약 width 대신 height : 1..
💡 디바이스 크기가 줄어들고 늘어남에 따라 - 자연스럽게 웹사이트의 스타일이 변화되면 반응형 - 뚝뚝 끊겨서 독립적인 스타일이 적용되면 적응형 미디어쿼리 @media 여러 디바이스에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 스타일을 변경하기 위한 조건 min-width : 브라우저의 최소 가로 폭 max-width : 브라우저의 최대 가로 폭 ex) 브라우저의 가로폭이 320px ~ 800px이 되었을 경우 아래 CSS 속성으로 대체한다. @media screen and (min-width: 320px) and (max-width: 800px) { h1 {...} h1:hover {...} } 미디어쿼리 사용 시 주의사항 1. meta 코드 작성 다음 코드를 반드시 html의..
HTML HTML : Hyper Text Markup Language 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 눈에 보이는 정보 : 텍스트, 이미지 등 네비게이션, 로그인, 베너 등 영역을 나누는 역할 시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고, 새로운 언어가 생기기도 함 HTML 태그 구성 요소 태그명 : HTML이 갖고 있는 고유의 기능 형태로 입력 닫힌 태그가 없는 태그도 몇 있음 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물 속성 : 태그가 가지는 추가 정보 속성 값 : 어떤 역할을 수행할지 구체적인 명령 HTML 문서 기본 구조 html5라는 신조어. 문서를 선언하는 태그 html 문서의 시작과 끝을 의미 웹사이트의 간단한 요약 정보를 담는 영..
