CSS 미디어 쿼리 문법    only | not의 위치에는 말 그대로 only 키워드 또는 not 키워드가 들어가게 되는데  only 키워드는 뒤의 조건 만 , not 키워드는 뒤의 조건을 제외한 조건을 뜻 합니다. 미디어 쿼리를 지원하지 않는 브라우저는 only 키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only 키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할 경우 적어주는 것이 좋습니다. ❗️미디어 타입의 종류 ( 많지만 자주 쓰이는 것만 적어 봤습니다.)- all : 모든 미디어 타입- print : 인쇄 용도- screen : 컴퓨터 스크린 ❗️미디어 쿼리문의 속성과 속성 값 - width: 웹페이지의 가로 길이를 판단합니다.- height: 웹페이지의 세..

CSS의 Cascading    Cascading이란?최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다. 규칙선택자마다 명시도 점수가 있고 명시도를 고려한 우선 적용되는 순서는 아래와 같습니다. - !important (명시도와 무관하지만, 명시도에 직접 영향을 미침, 다른 선언보다 우선함) - 인라인 스타일 정의 (인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다고 생각할 수 있음)- 명시도     - 아이디 선택자      - 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자      - 태그 선택자, 가상(psuedo)..

CSS 배경(background) 속성정리   background 속성  https://developer.mozilla.org/ko/docs/Web/CSS/background background - CSS: Cascading Style Sheets | MDNCSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.developer.mozilla.org  background는 아래 다양한 속성을 가집니다.background-color배경 색background-image배경 이미지background-repeat배경 이미지 반복 여부background-position배경 이미지 위치background-size배경 이미지 크기background-ori..

display속성 block, inline, inline-block 정리  1. display: block;: block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다.블록 속성을 가지고 있는 태그는 기본적으로 너비 100% 속성을 가지고 있습니다.화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 된다.따라서 display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 완전히 차지합니다.예를 들어서 p, li, div, h1 등이 모두 block 요소에 해당하는 태그들입니다.  inline 요소와 다르게 margin, pedding, w..

[CSS] Position 속성   https://developer.mozilla.org/en-US/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDNThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.developer.mozilla.org    CSS position 속성 : CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.position 속성은..

Cascading 소개 : 스타일 규칙 및 선언이 어떻게 적용되는지에 대한 규칙 및 우선 순위가 결정되어야 합니다. 이를 캐스케이딩 이라고 하는데, 다양한 스타일 규칙이 충돌하는 상황에서 어떤 스타일이 최종적으로 적용되는지 결정합니다.CSS의 정식 명칭은 Cascading Style Sheets 라는 이름에서 볼 수 있듯이 Cascading은 CSS의 핵심이라고 할 수 있습니다.캐스케이딩은 다음의 3가지에 의해 결정됩니다.중요도(Importance) - !important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높습니다.명시도(Specificity) - 구체적인(특정한) 선택자가 높은 우선순위를 갖습니다. 예를 들어, ID 선택자가 클래스 선택자보다 높은 우선순위를 갖습니다.소스 순서(So..