fullstack-study

[ CSS3 ] BEM(Block–Element–Modifier)

BEM이란? BEM은 CSS 클래스 네이밍 규칙으로, UI를 독립적인 블록 단위로 분리하고 구조와 상태를 명확히 표현하는 것 유지보수성 ↑스타일 충돌 ↓컴포넌트 재사용성 ↑대규모 프로젝트에 특히 유리 클래스 이름만 봐도 구조와 상태가 보이게 만드는 규칙 구조: Block__Element상태/변형: --ModifierCSS를 설계 관점에서 작성하게 만들어줌 https://getbem.com/naming/ BEM — NamingModifier names may consist of lowecase Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes: .blo..

GridCSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 레이아웃 시스템입니다.기존의 float, flexbox 등이 1차원(가로 또는 세로) 정렬에 초점을 뒀다면,CSS Grid는 가로(Row)와 세로(Column)를 동시에 다룰 수 있어 복잡한 레이아웃을 보다 쉽게 구현할 수 있습니다. 특징 설명2차원 레이아웃행과 열 모두를 기반으로 배치 가능레이아웃 정의부모 요소에서 전체 레이아웃 정의 후 자식 요소 배치간결한 문법반복, 영역 지정 등 다양한 기능 제공반응형 디자인미디어 쿼리와 함께 유연한 디자인 가능 mdm바로가기w3shools바로가기 1. Container 속성Grid 컨테이너는 부모 요소에 적용되며, 그 내부의 레이아웃을 정의합니다.속성설명displayGrid 레이..

적응형 / 반응형  적응형 (Adaptive):적응형 디자인 또는 시스템은 사용자의 행동이나 환경의 변화에 맞춰 자동으로 조정됩니다.이는 일반적으로 더 넓은 범위의 상황에 대응하기 위해 설계됩니다. 사용자의 프로필, 환경 조건, 또는 기타 맥락적 요소에 따라 변화합니다.PC / MOBILE / TABLET 별도로 작업반응형 (Responsive):반응형 디자인은 주로 디스플레이나 레이아웃이 다양한 디바이스 크기와 형태에 맞춰 자동으로 조정되는 것을 의미합니다.주로 웹 디자인이나 앱 디자인에서 사용되며, 사용자가 어떤 디바이스를 사용하든 일관된 경험을 제공합니다.예를 들어, 반응형 웹사이트는 데스크톱, 태블릿, 스마트폰 등 다양한 디바이스에서 적절하게 표시될 수 있도록 레이아웃이 조정됩니다.따라서, 적응형..

# clip-path, outline, calc, object-fit, mask, svg 속성설명참고clip-path요소의 클리핑 범위를 지정mdn Clip-Path Generator참고outline mdncalcCSS 속성의 값으로 계산식을 지정mdnobject-fit나 요소와 같은 대체 요소의 콘텐츠 크기를 조절mdnobject-position 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다mdnmask 이미지를 마스킹하거나 클리핑하여 요소를 숨김mdnsvg벡터 기반 그래픽mdn@impoertcss 처리mdn스타일 바로가기 1. clip-path 형식clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-b..

# Sass ( SCSS ) 작성법 SCSS와 Sass는 둘 다 CSS의 전처리기로, CSS를 더 쉽게 작성하고 관리할 수 있도록 도와줍니다. 문법: Sass (Syntactically Awesome Style Sheets): 들여쓰기를 사용하여 CSS와 다르게 보이게 만들어줍니다. 중괄호 {}와 세미콜론 ;을 사용하지 않습니다.SCSS (Sassy CSS): CSS와 유사한 문법을 가지고 있습니다. 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 거의 동일한 구조를 가지고 있습니다.호환성:SCSS는 CSS와 거의 동일한 문법을 사용하기 때문에 기존 CSS 파일을 쉽게 가져와서 수정할 수 있습니다.Sass 는 기존 CSS 파일과 호환성이 떨어질 수 있습니다. 기존 CSS를 Sass 로 변환하기 위해서는..

filter이미지 필터 효과mdngradient그라디언트mdnobject-fit나 요소 크기mdnmix-blend-mode mdnbackdrop-filter요소 뒤 영역에 흐림이나 색상 시프트 등mdn # gradientmdn바로가기선형 그라디언트linear gradient : directionbackground: linear-gradient(진행방향, 색상지정점 1, 색상지정점 2,...)background: linear-gradient(방향, 시작색상, 종료색상)value: to top , to left , to right , to bottom, to right bottombacktgorund: linear-gradient(to right bottom, pink, yellow ) linear gra..

속성설명mdntransform변형바로가기transition효과바로가기animation애니메이션바로가기@keyframes애니메이션바로가기 transform메소드설명단위translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.px, %, em 등translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다.px, %, em 등translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다.px, %, em 등scale(x,y)요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.0과 양수scaleX(n)요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.0과 양수scaleY(n)요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.0과 양수skew(x-angle,y-..

# position position 속성 - position 속성의 속성값: static, fixed, relative, absolute - 텍스트 이미지 표 등의 요소를 웹 문서에 배치할 때 사용 속성값의 특징을 확인하는 조건 - 부모 자식 간에 발생하는 마진 병합 현상 유무 - top, right, bottom, left 속성 적용 유무 - 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주는지 유무 구분 속성 설명 정적 위치 설정 position:static 각종 요소를 웹 문서의 흐름에 따라 배치 상대 위치 설정 position:reletive 웹문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치 절대 위치 설정 position:absolute 전체 페이지..

# flexflexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다.flex-box바로가기flex 연습 사이트바로가기 Flexbox 레이아웃은 flex item의 복수의 자식 요소와 이들을 포함하는 flex-container 부모 요소로 구성 주 축(main-axis) : 기준축 / 교차 축(cross-axis) : 교차축 # Flex Container속성설명displayFlex Container를 정의flex-flowflex-direction와 flex-wrap의 단축 속성flex-directionFlex Items의 주축를 설정flex-w..

선택자 , 스크롤, root , pointer-events ,coding Convention# 가상 클래스타입설명:link방문하지 않은 링크에 스타일을 적용합니다.:visited방문한 링크에 스타일을 적용합니다.:active요소가 활성화 상태(예: 클릭된 상태)일 때 스타일을 적용합니다.:hover마우스가 요소 위에 올라갔을 때 스타일을 적용합니다.:focus요소가 포커스를 받았을 때(예: 키보드로 선택) 스타일을 적용합니다.이 가상 클래스들을 사용하면 링크나 버튼 등의 사용자 인터페이스 요소에 동적인 스타일을 쉽게 # 구조적 가상 클래스 선택자속성설명mdn:first-child형제요소 중 첫번째바로가기:last-child형제요소 중 마지막바로가기:nth-child형제요소 중 ?번째, 홀수, 짝수바로가기..