fullstack-study

Grid  mdm바로가기      1. Container 속성Grid 컨테이너는 부모 요소에 적용되며, 그 내부의 레이아웃을 정의합니다.속성설명displayGrid 레이아웃 활성화 (grid 또는 inline-grid 설정).grid-template-columns열의 크기와 개수를 정의.grid-template-rows행의 크기와 개수를 정의.grid-template-areasGrid의 영역 이름을 정의.grid-templategrid-template-rows, grid-template-columns, grid-template-areas를 한 번에 설정.gap (또는 grid-gap)열과 행 간의 간격 설정.row-gap행 간의 간격 설정.column-gap열 간의 간격 설정.justify-items모든..

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

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

filter 이미지 필터 효과 mdn gradient 그라디언트 mdn object-fit 나 요소 크기 mdn mix-blend-mode mdn # gradient mdn바로가기 선형 그라디언트 linear gradient : direction background: linear-gradient(진행방향, 색상지정점 1, 색상지정점 2,...) background: linear-gradient(방향, 시작색상, 종료색상) value: to top , to left , to right , to bottom, to right bottom backtgorund: linear-gradient(to right bottom, pink, yellow ) linear gradient : angle background:..

속성설명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 전체 페이지..

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

# 선택자속성설명mdn:first-child형제요소 중 첫번째바로가기:last-child형제요소 중 마지막바로가기:nth-child형제요소 중 ?번째, 홀수, 짝수바로가기:nth-last-child마지막부터 요소를 선택하는 데 사용바로가기:first-of-type같은 요소중 첫번째바로가기:last-of-type같은 요소중 마지막바로가기:nth-of-type같은요소 중 ?번째, 홀수 , 짝수바로가기:root문서의 root 요소를 선택함바로가기::first-letter첫글자만바로가기::first-line첫 라인만바로가기::before요소 내용 맨앞바로가기::after요소 내용 맨뒤바로가기::selection선택한 부분바로가기:not()부정 선택자바로가기:hover마우스를 올렸을때바로가기 # 스크롤  ::-w..

상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경 1. 상속2. 단위3. webfonts4. color5. 둥근 사각형6. 그림자7. float 8. 배경 # 상속부모가 가진 css 속성이 자식에게 영향을 미치는 것  ** 상속되지 않는 것 위치, 여백, 크기, 배경, 패딩, 마진등 상속 관련 프러퍼티font-famly, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, text-align, text-indent, text-transform, word-spacing, list-style, list-style-image, list-style-position, list-style-type 단 a..

border , font , text , display 1. border 2. font 3. text 4. display * border : 테두리 속성 설명 mdn border 테두리 바로가기 border-color 바로가기 border-style 바로가기 border-width 바로가기 border-top, border-bottom, border-right, border-left 바로가기 * font : 크기, 두께, 서체, 스타일 속성 설명 mdn font-size 크기 바로가기 font-style 스타일 바로가기 font-weight 두께 바로가기 font-family 서체 바로가기 font 속기 바로가기 * text 속성 설명 mdn text-align 정렬 바로가기 text-indent 들여쓰..