공부 기록일지📚

1. 미디어 쿼리란(media-query)? 뷰포트의 너비에 따라 웹 사이트트의 스타일 시트를 수정할 수 있다. (뷰포트 너비 외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다.) @media screen and (max-width:500px){ //스크린의 viewport 너비가 500px 이하일 경우 //적용시킬 스타일 시트 } 미디어 쿼리 예시 index.html 박스입니다 박스1 박스2 style.css * { box-sizing: border-box; } .box { height: 200px; background: blue; color: white; padding: 30px; } /* 600px이상일 때에는 파란색 이하일 때에는 빨간색 */ @media screen and (max-w..

Position 포지션(position)과 top / left / bottom / right 4가지 속성은 한 세트로 생각하면 좋다. top / left / bottom / right 4속성은 해당 방향 기준으로 요소의 좌표값을 변경한다. static(기본값) - 요소를 문서상 원래 있어야 하는 위치에 배치한다(기본 HTML요소 위치 상태라고 생각하면 됨). -> top/ left/ bottom/ right 적용 불가 relative - 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다. -> 4가지 속성 적용 가능, 방향 속성을 지정하지 않고 position: relative 만 해주면 static의 위치와 같다.(차이점은 원래 위치를 기준으로 새 위치를 4가지 속성을 통해 지정해줄 수 있다는 ..

단위 1-1. 절대 단위 🚕 px(픽셀) :대표적으로 픽셀(pixel, 화소)가 있으며 px로 단위로 작성하고 화면을 구성하는 가장 기본이 되는 단위이다. 모든 디지털화면은 수많은 작은 네모들로 구성되어 있으며 이 네모 한 칸을 1px로 부른다. 🚕 pt(포인트) :인쇄를 위한 단위, 1pt = 1/72 inch (인쇄를 위한 단위이기 때문에 웹에서는 잘 사용하지 않음) 1-2. 상대 단위(외부 요인에 영향을 받아서 상대적으로 값을 받는 것) 전제: 상대 단위는 기준이 되는 요소가 있어야 한다. 🚕 %(퍼센트) :부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용한다. 🚕 em :스타일 지정 요소의 font-size 속성 값에 비례하여 결정한다. 퍼센트와 다른 점은 스타일이 지정된 당사자 요소..

🚗 background-image :요소의 배경 이미지를 한 개, 혹은 여러 개 지정한다. background-image의 속성값을 여러개 지정할 경우, 가장 상단에 있는 코드가 이미지의 최상단으로 올라오며 코드가 아래있다면 백그라운드 쪽으로 붙는다. 나중에 선언된 코드가 배경으로 깔린다고 생각하면 된다. 그라데이션도 지정도 가능하다. linear-gradient(방향, 시작 색상, 종료 색상) 방향같은 경우는 생략이 가능한데, 기본값은 아래에서 위로 그라데이션이 형성된다. 그라데이션은 linear-gradient 외에도 radial-gradient(원형 그라데이션) , conic-gradient(콘형 그라데이션) 가 있다. .color-container { background-image: url('이미..

기본적으로 CSS는 부모 요소의 속성은 자식 요소에게 상속됩니다. 하지만, css 속성을 적용하다보면 어떤 상속되지 않는 경우도 있는데 이는 CSS 속성 중에서도 "상속이 되는 속성"이 있고 "상속되지 않는 속성"이 따로 있기 때문입니다. 대표적인 상속되는 속성 & 상속되지 않는 속성 상속되는 속성 상속되지 않는 속성 color padding font-family margin font-size 등등 border 등등 부모 요소의 속성값 말고 다른 값을 적용하고 싶다면 css 코드를 부모 요소의 코드보다 아래에 적어주면 됩니다. -> cascading이라는 룰이 존재하여 css 적용의 우선순위를 결정해주기 때문입니다. 간단히 말하면 가장 최근에(위에서부터 아래로 쓴다고 했을 때, 맨 아래 존재하는 코드)작..

선택자(selector) 1.전체 선택자 * { property: value } 2.그룹 선택자 수의 제한이 없다. 아래 예시에서는 두 클래스에게 같은 속성을 부여한다는 소리 .class1, .class2 { property: value } 3.가상 클래스 선택자 : 실제로 html요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다. 선택자:가상 클래스 { property: value } 3-1.가상 클래스 선택자 예시🚗 :first-child (형제 요소 중 첫번째만 선택) e.g. p:first-child 라고 지정해서 css 를 먹였는데 적용이 안되는 경우 -> 형제요소 중 첫번째 p태그를 지칭하는 것으로 만일 1번째 형제 요소가 p태그가 아니라 다른 태그라면 css가 당연히 적..

package.json 과 package-lock.json package.json은 뭔가요? - 기본적으로 package.json은 문서입니다. 개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서 -> 프로젝트의 개발만을 위한 목적인지, 패키지를 배포하기 위한 목적인지에 따라 용도가 갈릴 수 있다. 자신의 프로젝트가 의존하는 패키지의 리스트 자신의 프로젝트의 버전을 명시 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. 확장자로 알 수 있듯, json파일로 속성-값의 쌍으로 이루어져 있으며 npm에서는 이 속성을 field라고 표현합니다. "name"과 "version"은 반드시 있어야 하는 fields 이며 이 필드가 누락되면 ..

png, jpeg 등의 파일 외 svg파일을 사용하면 이미지가 깨지지않고 용량이 적으며 출력이 빠르다. 또한, 수정과 애니메이션이 가능하다는 장점이 있다. 0. 가장 베이직한 방법 기본적으로는 img의 src로 svg를 넣어줄 수 있다. import Reservation from 'assets/icon-24-reservation.svg' 1. svg 파일을 react component처럼 사용하는 방법 svg 파일 주소를 복사한다. src 폴더(보통 src > assets > images)에 svg 확장자명의 파일(e.g. MySvg.svg)을 만들어 추가한다. something.svg 파일에 복사한 주소를 붙여넣는다. svg 파일을 component로 불러온다. (이때 { ReactComponent a..