일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 함수형프로그래밍
- QueryClient
- createPortal
- DOM
- transition
- BFC
- useQueryClient
- ㅡ
- Carousel
- ignore padding
- ?? #null병합연산자
- debouncing
- twoarrow
- 서초구보건소 #무료CPR교육
- 화살표2개
- 부모패딩
- 부모요소의 패딩 무시
- react
- vite
- 리액트
- alias설정
- 문제해결
- 제어컴포넌트
- parent padding
- es6
- accordian
- tailwindCSS
- CustomHook
- 조건부스타일
- BlockFormattingContext
- Today
- Total
목록개발 공부 (172)
프론트엔드 첫걸음
[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ See the Pen flip by JEONG (@cona) on CodePen. 이미지를 감싸는 div태그 transform-style : preserve-3d; /*3D로 보여줌*/ 이미지 backface-visibility :hidden; /*뒷면(text)을 보여줄때는 앞면이 보이지않도록 함*/ z-index :1 ; /*이미지 앞면을 보여줄때는 뒷면이 보이지않도록 이미지를 z-index 우선순위 줌*/
이미지는 글자랑 비슷한 취급을 받아서 글자의 baseline 위에 이미지가 채워짐 display: block (또는 vertical-align : bottom) 또는 부모요소에 font-size :0 해도 된다. https://stackoverflow.com/questions/7774814/remove-white-space-below-image
1. 그리드 기본개념 예시 grid-template-columns 는 4개, grid-template-rows 는 3개 만들어놔서 12개의 그리드가 생겼다. HTML에 테두리가 있는 div가 6개 있어서 6개의 네모칸만 보이는 상태이다. (px 대신 fr 단위를 쓰면 좋다. 전체 n분의 1 범위를 의미한다) 크롬 개발자도구로 확인하면 12개의 칸이 만들어진 것을 확인할 수 있다. 2. 격자무늬로 만들어진 grid에 범위 지정하는 방법 grid column lines & row lines 사용 See the Pen Untitled by JEONG (@cona) on CodePen. grid-column : 1 / 5 (그리드 세로 line을 1~5 까지 차지) grid-row : 2 / 4 (그리드 가로 ..
position:absolute|fixed 속성이 부여되면 flex item에서 빠지게 된다. align-items: flex-start 를 사용해도 된다. https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container
CSS transform 속성으로 요소에 회전(rotate), 좌표이동(translate), 크기조절(scale) 등의 효과 줄 수 있다. translate 대신 margin 등의 레이아웃을 바꿔도 동작하지만 animation효과 위해 layout바꾸는 것은 성능을 저하시킨다. 브라우저가 그림그리는 순서 1. Render Tree만들기(parsing 및 style) 2. Layout잡기 3. Paint 4. composite 처리(transform , opacity 등) margin 변경 하면 2번부터 다시 해야하지만, transform 변경하면 4번부터 다시 하면 됨.따라서 바뀐 layout 부터 렌더링하는것보다 바뀐 transform만 렌더링하는것이 빠르게 동작함 또한 transform 처리는 다른 ..
죄송합니다 이 브라우저는 해당 비디오를 지원하지 않습니다. 소개영상 source 파일형식을 여러개 준비하면 상단의 source부터 재생시킨다. 안되면 차례로 밑에 있는 source를 재생시키므로, 브라우저 간 호환성을 확보할 수 있다. 맨 밑에 알림 메시지를 넣으면 비디오가 재생되지 않을때 메시지도 안내할 수 있다. 용량이 적은 source를 상단에 올려서 용량이 적은 video를 우선 재생하게 할 수 있다. width - 비디오의 출력 너비 (px) height - 비디오의 출력 높이 (px) control - 재생바 autoplay muted - 자동재생 + 뮤트 , 자동재생 하려면 muted 와 같이 넣어야한다. preload - 페이지 로드시 비디오 파일의 로딩 정도 auto(페이지 로드시 비디오..
1. $변수명 2. @mixin 변수명($파라미터) + @include 변수명(내가설정한값) $변수명 및 @mixin 예시 $defaultFontSize : 25px; $defaultFontColor : rgb(41, 41, 41); @mixin flexLeftAlign($direction) { display: flex; flex-direction: $direction; justify-content: center; align-items: flex-start; } .box { margin: 12px; li { @include listBorderStyle(100px); padding: 20px; font-size: $defaultFontSize +5px; color: $defaultFontColor; @in..
각 컴포넌트를 감싸는 div 태그에 공통적으로 적용되는 css를 가진 Card라는 래퍼컴포넌트를 만들어서 div를 대체할 수 있다. 래퍼컴포넌트 적용 전 return ( ); Card.css .card { border-radius: 12px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); } 해당 css는 Card가 대체할 것 이므로 Card가 외부에서 받는 클래스로 적용되는 css를 수정한다. (expenses.css에서 위 스타일링을 제거) Card.jsx import React from 'react'; import '../UI/Card.css'; const Card = (props) => { const classes = 'card ' + props.className; ..
1. vs code 확장프로그램에 live sass compiler 검색 -> 설치 (3버전 말고 5버전으로..) 2. vs code 하단에 Watch Sass 클릭하면 scss파일로 저장한것들은 자동으로 css파일로 변환된다. 3. html 파일에 변환된 css파일을 link로 걸어주면 된다. 확장자가 map 인 파일은 크롬개발자도구 디버깅을 위한 파일이다. 코드는 .scss 파일에 짜고, html 파일에는 css파일을 연결시킨다. (브라우저는 scss파일 인식할수 없으니까..) SASS는 변수를 설정할수있고, 변수간 연산이 가능하다. (CSS에도 var, calc로 할수 있지만 변수명앞에 '--' 를 쓴다거나 var이나 calc를 입력해야하는 번거로움이 있다.) nesting , @extend=> c..
shadow DOM의 존재를 알았으니 button을 선택자로 고를 수 있고, 스타일링 할 수도 있다. pseudo 속성에 있는 "-webkit-file-upload-button" 을 pseudo 속성을 나타내는 :: 뒤에 붙여서 아래와 같이 사용할 수 있다. -webkit- 수식어는 크로스 브라우징을 위한 접두어이다. 각각 브라우저마다 shadow DOM 접두어가 다르다. 크로스 브라우징을 위해서 아래 접두어에 맞게 스타일링을 추가해준다. -webkit- : 크롬, 오페라, 사파리, Edge 브라우저 -moz- : 파이어폭스 브라우저 -ms- : 익스플로러 -o- : 오페라 브라우저 보통은 파일업로드 버튼은 input 태그는 display:none 하고 label태그에 대신 스타일을 준다.