# media query
React Media Query란?
미디어 쿼리는 CSS문법 중 하나이며 , 반응형 디자인을 사용할 수 있도록 도와준다.미디어 쿼리는 다음의 문법을 가지고 있다.시작은 at-rule 이라고 불리는 @media 키워드로 시작을 해야하며, 괄호로 쌓인 feature은 0개 이상이여야 한다.미디어 피쳐는 괄호
media query in [Sass/SCSS]
먼저 각 환경에 대한 breakpoint를 변수로 선언한 파일을 생성해줍니다.\_variable.scss파일명 앞에 \_를 붙인 이유는 파일단위로 구분하여 컴파일이 되지않기 때문입니다.\_mixin.scssmain.scss다음과 같이 미디어 쿼리를 적용할 수 있습니다.
Bootstrap / Grid
Bootstrap 사용한 복붙식 개발getbootstrap.com 에 방문하여 마음에 드는 UI 요소를 골라서 HTML 파일에 복붙하면 웹개발이 끝!하지만 제공되는 UI 들의 디자인까지 그대로 쓰라는 건 아니고 거의 뼈대디자인 밖에 없기 때문에 CSS 파일과 class
반응형 레이아웃
반응형 웹을 만들 때 head 태그에 들어가야할 내용이것이 들어가있어야 모바일에서도 예쁜 레이아웃을 만들 수 있다.모던 웹에서 사용하는 단위정리typography 디자인할 때 글자사이즈를 px 단위로 기억하기 귀찮고 힘들 때 폰트사이즈로 rem을 가끔 사용할 수 있음1

리액트 최애 짝꿍 🩷styled-components🩷 (with. keyframes and media query)
함수에 인수를 전달하는 또 다른 방식사용하기 쉽고 작업을 효율적으로 진행하기에 좋음기본적으로 설치되어 있는 패키지가 아님(<span style='background-color: \~\~~npm install styled-componentsconst App = ()
CSS Grid 230720
~오늘은 11일차~격자 (바둑판과 같은) 형태로 요소들을 배치① gap : 간격을 정의하는 속성, gap: (row-gap) (column-gap);으로도 가능② grid-template-columns / grid-template-rows : 각각 열, 행의 크기 및

0717
radio는 중복 불가, checkbox는 중복 가능모든 선택 툴은 하나의 데이터(<td>)로 표현하나의 데이터(<td>)에 들어가는 선택지는 name 속성이 모두 동일해야 함file 타입은 이미지 파일, color 타입은 원하는 색을 선택하는 선택 툴rad

@media 정리
사용자에게 적합한 레이아웃을 제공하기 위해서 media query를 사용합니다.미디어 쿼리는 단말기의 유형이나 해상도에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.장치의 일반적인 범주를 나타냅니다.not이나 only 논리 연산자를 사용할 때를 제외하면 선택사
Project: Web design Agency
html CSS Result https://brrkak.github.io/Web-design-Agency-/ object-fit >- CSS object-fit 속성은 `나 ` 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다. object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 ...
media query responsive : 미디어쿼리 반응형 설계
모질라 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries
[CSS in Depth] 2. Working with relative units
2.1. The power of relative values CSS는 웹페이지에 동적바인딩(late-binding) 스타일을 부여한다. > 동적바인딩(late-binding) 바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는
CSS media query
Media Query 디바이스 기기, 종류에 따라 다양한 화면을 조건에 맞게 표현할 수 있게 해주는 기술. CSS2에서 처음 소개되었고 CSS3에서 확장된 버전으로 사용됨 CSS2 & CSS3 media query 차이점 CSS2에서는 디바이스 기기를 기준으로 적용했