- [ Frontend/CSS ][CSS] CSS letter-spacing 속성 [6/6 study]2024-06-06 16:20:59CSS letter-spacing 속성 ❗️letter-spacing 속성이란?letter-spacing 속성은 텍스트의 문자와 문자 사이 간격을 지정하는 속성입니다! ❗️사용 예시letter-spacing: normal;letter-spacing: 2px;letter-spacing: -2px;letter-spacing: 0.5em;letter-spacing: -0.2rem; ❗️참고자료https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing letter-spacing - CSS: Cascading Style Sheets | MDNThe letter-spacing CSS property sets the horizontal spacing beh..
- [ Frontend/CSS ][CSS] aspect-ratio에 대해 알아보자! [6/6 study]2024-06-06 16:13:32aspect-ratio에 대해 알아보자! ❗️aspect-ratio란?- aspect ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다. ❗️사용법❗️1. width/height 지정할 때!- /를 이용하여 width/height 비율을 지정할 수 있습니다 예시.box { width: 100px; aspect-ratio: 2 / 1; /* 100px, 50px */} 해석width를 100px;aspect-ratio: 2/1; 2대1 비율이므로 width는 100px이고 height는 50px이다! ❗️2. 한 개의 값만 지정할 때!- 앞에 width/height를 지정할때와 비슷하다- 하나의 값만 지정하면 height를 1로 간주한다 ❗️3. auto, / 두개 동시에 사용할..
- [ Frontend/CSS ][CSS] CSS 미디어 쿼리 문법 [5/7 study]2024-05-07 23:21:49CSS 미디어 쿼리 문법 only | not의 위치에는 말 그대로 only 키워드 또는 not 키워드가 들어가게 되는데 only 키워드는 뒤의 조건 만 , not 키워드는 뒤의 조건을 제외한 조건을 뜻 합니다. 미디어 쿼리를 지원하지 않는 브라우저는 only 키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only 키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할 경우 적어주는 것이 좋습니다. ❗️미디어 타입의 종류 ( 많지만 자주 쓰이는 것만 적어 봤습니다.)- all : 모든 미디어 타입- print : 인쇄 용도- screen : 컴퓨터 스크린 ❗️미디어 쿼리문의 속성과 속성 값 - width: 웹페이지의 가로 길이를 판단합니다.- height: 웹페이지의 세..
- [ Frontend/CSS ][CSS] CSS의 Cascading [4/29 study]2024-04-29 23:10:10CSS의 Cascading Cascading이란?최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다. 규칙선택자마다 명시도 점수가 있고 명시도를 고려한 우선 적용되는 순서는 아래와 같습니다. - !important (명시도와 무관하지만, 명시도에 직접 영향을 미침, 다른 선언보다 우선함) - 인라인 스타일 정의 (인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다고 생각할 수 있음)- 명시도 - 아이디 선택자 - 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 - 태그 선택자, 가상(psuedo)..
- [ Frontend/CSS ][CSS] Position 5가지 속성 값 정리 [3/16 Study]2024-03-16 14:21:22[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 속성은..
- [ Frontend/CSS ][CSS] 캐스케이딩 (Cascading) 이란? [3/10 Study]2024-03-10 18:31:55Cascading 소개 : 스타일 규칙 및 선언이 어떻게 적용되는지에 대한 규칙 및 우선 순위가 결정되어야 합니다. 이를 캐스케이딩 이라고 하는데, 다양한 스타일 규칙이 충돌하는 상황에서 어떤 스타일이 최종적으로 적용되는지 결정합니다.CSS의 정식 명칭은 Cascading Style Sheets 라는 이름에서 볼 수 있듯이 Cascading은 CSS의 핵심이라고 할 수 있습니다.캐스케이딩은 다음의 3가지에 의해 결정됩니다.중요도(Importance) - !important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높습니다.명시도(Specificity) - 구체적인(특정한) 선택자가 높은 우선순위를 갖습니다. 예를 들어, ID 선택자가 클래스 선택자보다 높은 우선순위를 갖습니다.소스 순서(So..