CSS3 Media Query 미디어 쿼리 사용 Media Query 미디어 쿼리 사용 미디어 쿼리의 사용 반응형 웹을 만들기 위해 사용한다. 크롬의 개발자 도구(f12)로 확인할 수 있는 모바일 기기의 크기 등, 웹 사이트를 각 단말에 맞게 적용하기 위해 사용한다. 사용방법 1) css 내부 삽입 ()괄호 안에 넣은 조건이 될 때 웹이 유동적으로 변한다. @media (max-width:700px) { .container { margin: 0; padding 0; } }2) 링크 연결 연산자 and 여러 미디어 특징을 하나로 결합 , 개별적인 미디어 쿼리 not 전체 미디어 쿼리를 부정 only 미디어 쿼리를 지원하는 클라이언트만 미디어 쿼리를 해석하라는 명령어. 생략 가능. 기본값은 only로 주어지기 때문에 일반적으로 명시해 작성하지 않음. Me.. 2022. 6. 3. css flex 사용법 총정리 Flexbox Flexbox Flexbox는 뷰포트나 요소의 크기가 명확하지 않고, 지속적으로 변하더라도 자동적으로 요소를 배치, 정렬할 수 있도록 하는 CSS3의 레이아웃 방식이다. HTML Flexbox CSS body { font-family: 'Segoe UI'; } h1 { text-align: center; } #container { background-color: black; width: 90%; height: 500px; margin: 0 auto; /*center*/ border: 5px solid black; } #box div { width: 100px; height: 100px; } flex 상태를 만드는 것은 간단하다. 다른 요소를 포함하는 부모 요소(#container)에 dis.. 2022. 5. 23. scss 기본 문법 정리, css와의 차이점 scss는 중첩, 변수 선언, 연산자 등을 활용할 수 있다. CSS 코드와의 비교 css 코드 body { font: 100% Helvetica, sans-serif; color: #333; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } scss 코드 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } nav { ul { ma.. 2022. 5. 22. 이전 1 다음