Development/css & scss4 [scss] 파일명에 _ (언더바) 붙이는 이유 scss 파일명앞에 _를 붙여서 사용하는 경우가 종종 있다. 언더바를 왜 사용하는 것일까?? 우선 scss가 css로 컴파일된다는 것을 알고 있어야 한다. global.scss 는 css 파일로 컴파일된다. 하지만 _footer.scss 와 같이 작성한 scss 파일은 css파일로 컴파일되지 않는다. 그래서 언더바가 붙은 scss 파일은 css 파일로 변환되게 할 하나의 scss 파일에 import해서 사용한다. 그래야 css 로 불필요하게 바뀌는 일이 생기지 않기 때문! 2022. 6. 28. 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 다음