개발자_승딱 개발자_승딱

박스모델 > content-box 와 border-box의 차이 position > static relative absolute fixed sticky 활용성에 대한 이해 z-index > 이게 개념은 간단한데 부모자식 그런 경우에 따라 적용되는 차이가 있더라 flex > 주축 보조축 개념 , 적용사항 익숨해지면됨 filter: blur 처음봄 grid > 세로로 여러개로 쪼개서 사용하더라고 ? 나는 그냥 복잡한 레이아웃 부분 잡는 용도로만 생각하고 있었는데 이게 박스형태 반응형 작업할때 좋다 이정도 였는데 이해도랑 활용하는 부분에 대해서 많이 부족한듯 grid 부모에 display: grid 주고 이게또 columns 이랑 row 가 좀 헤깔리더라고 나는 행 열행열행열 행이 row지 가로길게 열이 co..

rem : root element (최상위)의 fontsize 를 기준으로한다. em : 해당 element 의 fontsize를 기준으로한다. rem사용 : 반응형으로 제작하는 경우 rem 과 미디어쿼리를 사용하여 크기에 따라 루트엘리먼트의 폰트를 조작하여 전체적인 사이즈에 영향을 주도록 할수있다. em사용 : 요소의 폰트크기는 해당요소의 padding 이나 margin 과 상호작용 해야 하는 요소 임으로 이러한 상관관계가 보여져야 하는 경우 em단위 를 사용 할수 있다. 줄바꾸기 : word-wrap 속성을 이용하여 글자의 길이가 width 를 벗어났을때 어떻게 할것인지 정할수 있고, word-break 속성을 이용하여 글자단위로 줄바꾸기가 실행이 될지 단어단위로 이루워질지 정할수 있다.

두개다 있는거 잡을때 .center.red 붙여서 사용 자손은 한칸 띄어서 자식은 > 붙여서 하는거 까먹음

input type="text" 에 css 를 적용해놓고 싶은데 이게 autoComplete 기능을 켜놓으면 브라우저별로 css를 덮어씌워 버리게 된다 그러면 autoComplete 시에도 커스텀된 css 를 이용하고 자 할때는 어떻게 해야 하는가 하는 내용이다. 브라우저에서 수도클래스 형태로 css 가 되어 있는데 그부분을 변경 시켜주면된다. input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: all 5000s } // 모든변화를 5000초 지연시킴으로서 이전의 css유지 된는 거처럼 보이게 해준다. chrome 에서는 이런식으..

미디어쿼리 효과적적용(scss) @mixin example { @media screen and (max-width: 768px) { @content } } @include example(){ font-size : 여기에 적으면 위에 미디어 쿼리 적용됨 content 자리에 들어간다고 생각하면됨 } 여기에 @if 문 까지 쓰면 아주 편리함 그라데이션+ 배경 linear-gradient(to right, rgb(90, 121, 90) 0%, green 100%) background-blend-mode: multiply; 백그라운드 이미지 사이즈 조정 background-size: 100% 110vh; ( contain , cover) 그외 html { font-size: 62.5%; } em: 부모컴포넌트 ..

scss 를 이용하면 if 문을 사용할 수있다. 사용법은 자바스크립트문법과 거의 같고 @ 만 붙여주면 된다. 위예시와 같이 mixin 을 중복해서 사용할수도 있다. virtualdom ,묻는말답하기,리액트,쿠키,어떤개발자,프로젝트구체적으로 나뭐했는지 ,내장단점,

변수설정 위와 같이 사스에서는 재사용되는 값들을 변수에 담아서 사용할수 있다. $기호 와 함께 사용하면 된다 직관적이다. mixin 이러한 값들 말고 속성들이 중복되어서 사용되는 경우들이 있다. 그러한 경우에는 mixin 이라는 기능을 사용할수 있다. 코드를보자 패딩과 마진이 둘다 사용되고 있다 하지만 각각 값은다른상황이다. mixin 기능을 사용해서 다시 작성해보자 @기호와 함께 mixin 기능을 사용 한다고 명시해준다. 그다음에 이름을 정해서 하나써주고 인자들을 넣어줌으로써 그안에서 함수처럼 사용할수 있게된다 사용할때는 @include 키워드와 함께 정해준 이름과 변수를 이용해 사용할수 있게된다. 추가적으로 mixin 설정시 변수에 $padding:10px 이런식으로 기본값을 설정해줄수도 있어 변수가..

사스에는 중첩이라는 개념이 있다. 프로젝트때 css 하면서 제대로 css 를 써본건 처음이였는데 이름을 잘지어놧다고 생각을 했는데도 찾다가 집중력 소진되는 때가 아주 많았다. 그리고 html 은 구조가 있고 그 구조를 에 맞게 select 할수 있어서 이용하는데는 어려움은 없지만 그거를 사용하는데에는 조금 귀찮은? 특히 팀원 코드를 나중에 내가 코딩할때는 찾기 빡세다 뒤로갈수록 추가되기도하고 많아지니까 근데 이번에 scss 공부하다가 보니까 scss 에서는 구조적으로 css 를 꾸릴수 있고 그거를 nesting 이라고 한다고 하더라 예시들을 살펴보자 일단요약부터 해보면 1.구조를 중첩해서 사용할수있다. 좌측은 scss 파일이고 오른쪽은 컴파일된 css 파일이다. 해당 scss 블락안에서 구조를 중첩해서 ..