-

[SCSS] SCSS Map

MapSCSS 데이터 타입 중 하나로 키(key)와 값(value) 쌍으로 이루어진 데이터 구조자바스크립트의 객체({key: value})와 비슷한 개념반복문과 결합하면 반복적인 CSS 생성에 매우 편리리스트와 달리 값을 키로 접근할 수 있고 데이터 접근이 명확하고 실무에서 재사용성이 높음기본 문법키와 값은 콜론(:)으로 구분각 쌍은 쉼표(,)로 구분$map-name : 맵 변수 이름key : 문자열처럼 쓰지만, 따옴표 없어도 됨value : 숫자, 색상, 문자열 등 SCSS에서 가능한 값괄호 ()로 묶고, 각 쌍은 쉼표 ,로 구분/* [문법] */$map: ( 키1: 값1, 키2: 값2, 키3: 값3);$colors: ( primary: #3498db, secondary: #2ecc71, d..

gap정의 : Grid나 Flexbox 컨테이너 안에서 자식 요소들 사이의 간격을 지정하는 CSS 속성행(Row)과 열(Column) 사이 간격을 동시에 또는 개별적으로 조절할 수 있음gap의 외곽 여백은 padding이 담당flex의 gap과 grid의 gap 모두 IE에서 미지원실무에서 반응형 작업 시 모바일은 세로 간격만 넓히고, 가로 간격은 줄이는 패턴이 많음.일부 CSS 프레임워크(예: Bootstrap 4 이하)나 컴포넌트 라이브러리에서는 margin 기반 spacing 유틸리티를 많이 씀.gap을 쓰면 해당 spacing과 중복되거나 불필요한 여백이 생길 수 있으니, 스타일 가이드 정리 필요.gap: 20px; /* 행과 열 모두 20px */gap: 10px 30px; ..

backgroundbackground-image요소의 배경으로 사용할 이미지 URL을 지정기본값: none (배경 이미지 없음)background-repeat배경 이미지를 반복할지 여부와 방향을 설정기본값: repeat (가로, 세로 모두 반복)속성값설명repeat가로, 세로 모두 반복- 이미지를 원래 크기로 반복, 여분 공간이 남으면 그냥 빈 공간 남음 (간격 없음)repeat-x가로 방향으로만 반복repeat-y세로 방향으로만 반복no-repeat반복하지 않음round- 이미지 크기 조절해서 반복 (간격 없이 꽉 채움) - 이미지 크기 : 원래 크기와 달라질 수 있음 (늘어나거나 줄어듦) - 이미지 사이 간격 : 없음- 이미지 반복 개수 : 반복 횟수 맞춤 - 여분 공간 처리 : 이미지 크기를 반복 ..

object-fit정의 : 이미지, 비디오 등 박스(container) 안에 들어가는 콘텐츠의 크기 조절 및 배치 방식을 정의하는 속성주로 , , 같은 요소에 적용해서, 콘텐츠가 컨테이너 크기에 맞게 어떻게 맞춰질지 결정사용 상황반응형 이미지, 비디오 등에서 비율 유지하며 크기 맞출 때.썸네일이나 카드 내 이미지가 깨지지 않고 보기 좋게 보이도록 할 때.배경처럼 이미지가 영역을 꽉 채우게 하거나, 잘리지 않고 모두 보이도록 조절할 때.참고 사항object-fit은 block 요소에는 적용되지 않고, replaced 요소(img, video 등)에 적용됨배경 이미지처럼 background-size 속성과 비슷한 역할을 함 (하지만 object-fit은 요소 자체의 크기 조절)IE는 지원하지 않으니 필요..

Grid 행(row)과 열(column)을 동시에 다루는 2차원 레이아웃 시스템 콘텐츠를 행과 열에 배치할 수 있으며 float나 flexbox보다 레이아웃 구조를 직관적이고 정밀하게 만들 수 있음특징부모 요소(그리드 컨테이너) 안에서 자식 요소(그리드 아이템)의 위치와 크기를 행·열 기준으로 지정 가능격자(grid) 형태의 셀(cell) 기반 배치수평·수직 정렬 모두 자유로움레이아웃을 HTML 구조 변경 없이도 CSS만으로 재배치 가능Grid vs Flex항목GridFlex레이아웃 방향2차원 (행 + 열 동시 제어)1차원 (행 또는 열 중 하나만 제어)주 사용 목적- 전체 페이지- 대규모 레이아웃 설계- 작은 단위의 UI 정렬- 한 줄 배치배치 기준부모에서 행·열 구조를 먼저 정의 후 배치자식 요소 콘..

CSS 상속 CSS 상속 속성colorletter-spacingvisibilityline-heightfont 속성letter-spacinglist-style 관련 속성text-aligntext-decorationtext-shadow inherit어떤 요소의 속성값이 지정되어 있는 상태에서, 부모의 값을 상속받고자 할 때 사용상속 적용이 해당되는 css 속성에 한함initial요소의 기본 속성 초기값 사용display:initial은 display:inline으로 설정되므로, display:block 명시 필요unset상속된 값이 있을 경우 inherit와 같이 사용, 없는 경우 initial과 같이 사용상속 적용이 해당되는 css 속성에 한함.container { color:red}.container>d..

Flex항목을 행이나 열로 배열하는 레이아웃 방법float나 position을 사용하지 않고도 유연한 반응형 레이아웃 구조를 쉽게 디자인할 수 있음flex의 기본 조건flex는 항상 부모 요소(flex container)와 자식 요소(flex items)로 구성됨부모요소에 기본적으로 display: flex가 설정되어야 함flex의 특징flex를 무시하려면 자식요소에 postion:absolute를 활용flex container와 flex item에 정의하는 속성으로 나누어 짐자식요소는 행으로 배치된다(축으로 정렬)Flex container 모든 요소는 부모 요소에 disply:flex/inline-flex 설정을 기본으로 함flex container 속성은 전체적인 정렬이나 흐름에 관련된 속성 설정 :..

text-decoration글자를 꾸며주는 속성원하는 색이나, px로 선 굵기 조정 가능선 모양속성설명wavy물결선dotted점선dashed파선 선 위치속성설명underline아래overline위line-through중간Lorem.Lorem 2Lorem 3s

font-sizefont-size 속성 단위 : px, %, em, rem, pt%, em, rem : 부모 요소의 크기에 비레해서 나타남단위설명예%- 부모요소 크기 * (% / 100)- 120% : 부모크기의 1.2배- 90% : 부모크기의 0.9배em- 부모요소 크기 * em- 1em : 부모요소 크기 * 1- 2em : 부모요소 크기 * 2rem- 가장 상위 부모, html의상대적 크기를 가짐, 요소 중첩에 영향을 받지 않음- html 기본 크기 * 글자 크기- html {font-size:14px} 인경우 1.2rem : 14 * 1.2rem pt- 웹사이트를 종이로 인쇄할 경우 결과물의 글자 크기를 결정- 1인치/72, 프린트할 컨텐츠에 사용- 인쇄하는 상황에서 사용되는 글자 단위로, 일반..

CSS 적용 방법인라인 스타일 (inline style) 방식HTML 문서의 태그가 있는 라인 마다 style 속성으로 CSS 코드를 작성공통 속성을 부여하지 못하며, css 코드 분리가 되지 못해 유지보수 적합하지 않음임베디드(Embedded) 방식, 내부 스타일 시트 (internal style sheet) 방식 태그 안에 태그를 두고 CSS 코드를 작성코드 양이 많지 않거나, 해당 페이지에만 적용되는 스타일을 적용할 때 유용링킹 스타일 시트 (linking style sheet) 방식HTML과 CSS를 분리하여 link로 연결하여 사용가장 널리 사용