CSS

SCSS는 css의 업데이트 버전으로, css로 작업하는데서 표준이 되었다. css를 섹시하게 만들어 준다.css의 레이아웃을 마스터하게 될 것이다.layout positioning하는 데에 도움이 될 것이다.Gird는 많은 property를 가지고 있어서 흥미롭다.배

왜 이 사이에 공백이 생길까?이걸 고쳐보자margin을 일일히 바꾸면서 세번재 블록이 아래 줄로 넘어가는걸 막으려고 하다보면.... 너무 구리게 작업하는 것이다. 심지어 스크린 사이즈에 따라서 이 블록들은 다르게 배치된다,따라서 flex-box를 활용해서 이 것을 쉽게

flex container 의 flex-direction기본값은 row 이다.horizontal이제 수평으로 된 이 item을 어떻게 바꿔줄 수 있을까?바로 position 속성을 바꿔주는 것이다. justify-content를 활용 !justifi-content:ce

flex-direction : row 인 경우main axis = horizontal axis 따라서 수평축 위치를 조정하고 싶을때 justify-content 사용 따라서 수직축 위치를 조정하고 싶을때 align item 사용flex-direction :

하나의 child 에 값을 적용 가능하다..아, 그리고 이렇게 조정하고 싶다면 부모요소에 height를 적용해주어야 한다.align-self는 align-item 처럼 행동한다.(하나의 element에만 설정해도 적용된다, 하지만 오직 cross-axis에서이다.) a

flex-wrap 의 기본값은 nowrap 이다. >> 기본적으로 item 들이 같은 줄에 있도록 하는 것.근데flex-wrap : wrap 은 child의 크기를 유지하라고 말하는 것이다.그래서 width 와 height 를 유지한다.flex-direction : r

flex-grow 와 flex-shrink 는 child 에게 줄 수 있는 property 이다.먼저 flex-shrink 는 기본적으로 element의 행동을 정의한다.flexbox가 옆으로 너무 쥐어짜질때..? 즉 양 옆을 너무 줄일때 item들이 어떻게 될지..ㅇ

flex-basis 는 child 에서 적용되는 property이다.flex-basis 는 element에게 초기 size를 주는 것이다. 즉 grow 와 shrink(늘어나고 줄어나는) 전에 flex-basis를 적용하는 것이다. 거의 width와 같지만, flex-

css 연습하는 개구리..

flex-box 는 box 들을 옆으로 두거나 가운데로 옮기거나 나누는 등은 쉬운데 grid 형태를 만드는 것은 어렵다.grid 형태를 만들고 싶어서 사용하는 것이 grid 이다.4번과 5번 사이에 이러한 공백이 flex 에서 만들어 지는 문제이다..

먼저 grid 를 설정한다.이때 grid-template-columns : 200px 200px 200px 200px 이짓을 쉽게하기 위해서grid-template-columns : repear(4, 200px); 라고 쓰면 훨씬 편하다.grid-template-are

헤더가 어디서 시작하고 어디서 끝나는지 정할 수 있다.멋지고 유용하다.어디서부터 시작하고 끝나는지 안다면..grid-column-startgrid-column-end와grid-row-startgrid-row-end를 이용해서 배치해보자.이 전처럼 areas로 설정해주지

우리는 line 에 이름을 붙일 수 있다.repeat(4, 100px) 대신 각각 이름을 붙인다. grid-template-columns: first-line100px second-line100px third-line100px fourth-line100px ; 또

fr이란 fraction(부분) 이다. pixel과 같은 느낌..fraction은 사용 가능한 공간을 말한다.즉 저것은 공간을 가질만큼 갖고 4번 반복한다.fr을 사용해라 !!fr은 기본적으로 사용 가능한 공간을 말한다.fr은 가능한 많은 공간을 차지한다. grid같은

div는 content를 갖고 있다. 이제 배워볼 것이다.justify-items의 기본값은 stretch 이다.자식들을 늘려서 부모(자신)을 채우게 했다.start로 바꿔도 column과 row는 동일하다.align-items도 똑같다.하지만 이 자식요소는 너비와 높

grid를 정렬하는 방법이다.일단 horizontal 적인 것만 봤다.line이 분리되어 이있는 것을 볼 수 있다.fr을 지정하고 align-content를 stretch 로 하면 수직적으로 꽉 차게 된다. place-content 는 사각형 "모든 것 함께"을 수평,

align-self 는 개별적으로 적용이 가능하다." place-self "는 justify-self 와 align-self의 컴비네이션이다..item\*20>{$}20개가 나온다.지정한 row에 비해 많은 data를 가져온 상태이다만약 50개까지 가져왔다면?눌리게 된

element가 얼마나 크게 작게 될 수 있는지 설정한다.화면을 줄이면 공간때문에 1 fr이 굉장히 줄어든다.만약 줄어들더라도 제한을 주고 싶다면 이때 쓸 것이 minmax이다.그리고 너무 줄였다면 이때 스크롤이 생겨, element자체의 크기를 줄이지 않게 된다.얘네

특정한 수치를 적어주기 보다 column을 만들어주는 역할을 한다. 우리가 가진 width만큼 empty한 공간에 자동으로 해당 (empty)row룰 채워준다. column이 있는 만큼 가능한 많이 ! 이것이 auto-fill이다.auto-fit은 남은 공간에 elem

min-content는 만약 box를 만든다면 작아질 수 있을 만큼 작아지는 것이고 max-content는 box를 필요한 만큼 크게 만드는 것이다.max-content를 지정해보자이 column의 크기가 필요한 만큼 커졌다.min-content가능한 작아지는 것이다.

scss란 ? CSS Preprocessor 이다.sass와 같다고 보면 된다. stylus나 less라는 사이트에서 컴파일 하여 사용 가능하다.SCSS는 css를 프로그래밍 언어처럼 만들어준다.대디수 업계에서 많은 사람들이 scss를 많이 이용한다.

variables Nsting

재사용을 도와준다.프로그래밍 같다그리고 나중에는 개선 가능하다.a링크와 함께 작동하도록 한다.함수를 만드는 느낌... if else를 할 수 있다..

말 그대로 다른 코드를 확장하거나, 중복해서 사용하기 싫을 때 사용..extends 는 %를 이용한다.그리고 재사용 할 것이다.이것은 스타일 분리가 가능하고, 추가하는 것이 가능하다.많은것을 공유하지만 다른다.공통적인 것만 함께 두고 다른 것들은 나중에 따로 추가하는

Gererate 잘 되었다..iphone면 @media quary를 만들 것이다.너비 높이를 정한다.. 이때 variable을 써보자 많은 mixsins들은 검색을 통해 찾을 수 있다. 공식문서도..!

모든 콘텐츠는 고유한 영역이 있습니다.박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있습니다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다. 그리

박스의 height 속성에 콘텐츠가 차지하는 공간보다 작은 값을 지정 해야 한다. 박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나온다.팁overflow 속성을 이용하면 좋다.문제점: id가 container 인 박스의 width 속성에 30

: 전체 셀렉터는 문서의 모든 요소를 선택태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택. 복수로도 선택가능ID 셀렉터는 class 셀렉터는 .class로 입력하여 선택. 같은 class를 가진 모든 요소를 선택.attribute 셀렉터는 같은 속성을 가진 요소를

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이

다음은 축 정렬 방향입니다,flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것

팁: 그리드 명확하게 보기 크롬 개발자 도구에도 이 기능이 생겼습니다!파이어폭스 개발자도구의 “검사기” 탭을 열고, 아래 버튼이나 체크박스를 클릭하면 됩니다.그럼 이렇게 나옵니다기본구조는 위와 같고, 컨테이너와 아이템만 있으면 됩니다.부모 요소인 div.containe

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있습니다

자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM과의 의사소통도 원활해져 협업 효율도 높아집니다. 다음은 자주 쓰이는 UI 디자인 패턴의 예시입니다.모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻합니

좋은 UX를 만들려면 무엇을 고려해야 할까요? 피터 모빌(Peter Morville)의 벌집 모형은 이 질문에 대한 답을 줍니다. 이 모형에서 제시한 UX의 7가지 요소를 알아봅시다.유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만듭니다.와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨이 나눕니다.손으로

Component-Driven Development(CDD) 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 하여 재사용성을 높이는 개발 방법 구조적인 CSS 작성 방법의 발전

CSS 코드를 다룰 때 다음과 같은 불편함을 느껴보신 적 있는가?class, id 이름을 짓느라 고민한 적이 있다.CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다.CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있다.스타일 속성이 겹쳐서 내가 원하는 결과

Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했다. Component Explorer에는 많은 UI 개발 도구가 다양하게 있는데 그중 하나가

React를 공부하면서, React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 하지만, 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생한다. 이럴 때 사용할 수 있는 것이 바로 useRef 라는 Hook 함수이다.eact로 모든 개발 요구 사항

반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 즉, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜줍니다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다.키프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 한다.해당 방법으로 회

HTML의 <canvas> 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등 사용하기에 따라 무궁무진한 콘텐츠를 만들어낼 수 있다.일단은 캔버스 태그를 작성하는 것

스크롤을 다루기 위해서는 관련된 가상 요소에 스타일을 적용하면 됩니다.여러 가지 가상요소가 있지만, 주로 아래 3가지 요소만 스타일을 적용해 주면 충분합니다. (chrome 기준)::-webkit-scrollbar 스크롤바 전체::-webkit-scrollbar-thu

Swiper 는 내부 CSS 가 있기 때문에global.css 파일을 루트에 생생해서 기존 Navigation 및 Pagination 을 커스텀 했다.방법은 간단하게 설명 가능하다.개발자 도구를 활용해 현재 먹고 있는 Class Name 을 확인한다.확인한 class

Swiper 가 움직일 때마다 이벤트를 부여하고 싶다.공식문서를 참고하면 된다.onSlideChange={() => console.log('slide change')}onSwiper={(swiper) => console.log(swiper)}아래와 같이 이벤트를 작성해

대충 정리하면 간단하게 구조가 이러했다.근데 여기서 배열입니다 에 새로운 값이 수정되었을때pagination 이 사라지는 오류가 생겼다.하루 내내 고민하다가 ChatGPT 에게 쳐봤더니바로 해결,,이래서 ChatGPT쓰는구나.. 대박

NO : 클래스 이름을 동적으로 구성하지 말 것YES : 완전한 클래스 이름을 사용 할 것문제는 이렇게 되면 상위 컴포넌트에서 props 받아서 동적으로 클래스를 생성하는 데에어려움이 있으며, 공식문서에서도 이렇게 하지 말라고 명시하고 있음.NO : 클래스 네임을 동적