프론트엔드 첫걸음

죄송합니다 이 브라우저는 해당 비디오를 지원하지 않습니다. 소개영상 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태그에 대신 스타일을 준다.

그림자 DOM 확인하기 1. 그림자 DOM 표시 설정 그러면 크롬 개발자도구에서 input 요소 내부의 shadow dom 을 확인할 수 있다. type:file인 input 태그는 type:button인 input 태그 + span 태그 가 합쳐진 형태다. 이 숨겨진 돔을 찾아서 "파일선택" 버튼에 스타일을 입힐 수 있다. 나만몰랐냐구

:: Pseudo-element 의 사용 :hover, :focus, :active 등 Pseudo-class 는 해당 요소가 '다른 상태일때' 다른 스타일을 적용할 때 사용 ::first-letter, ::first-line ,::after,::before등 Pseudo-element는 해당 요소의 '일부분' 에 다른 스타일을 적용할 때 사용 변하는 데이터가 들어있는 요소에서 첫 번째 글자만 스타일링 해야하는 경우, 자바스크립트를 사용하지 않아도 된다. 예 ) clear : both 박스 float:left 적용한 박스 아래에 clear: both라고 적힌 빈 div 박스를 만들어 줄 때 (다른 기능없이 clear:both 기능만 하는 div박스를 html로 만드는 대신) pseudo-element로 ..

최초로 깃 레파지토리를 만들면 아래와 같은 설명을 볼 수 있다. 여기서 -u 라는 설정은 무엇일까? -u 는 로컬브랜치와 원격 브랜치를 연결하는 upstream 의 -u 이다. 처음으로 로컬브랜치를 원격브랜치에 푸시할 때 로컬브랜치와 원격 브랜치를 연결하려고 -u 옵션을 사용한다. 예를 들어 새 브랜치 tmpbranch 를 로컬에서 만들고, git push origin tmpbranch 로 깃허브에 새 tmpbranch 브랜치를 만든다. 그 다음에 변경사항을 커밋한 다음 git push 하면 아래와 같은 에러메시지가 뜬다. 업스트립이 설정안되어 있다는 뜻이다. 그러니까 로컬의 tmpbranch와 원격의 tmpbranch가 연결이 안되어있다는 의미이다. 한번 git push -u origin tmpbran..

변경사항을 원격에 반영 , push 할 때 브랜치를 선택하여 push할 수 있다. git push [원격명] [branch명] 로컬의 브랜치를 깃허브의 브랜치로 push 한다. git push origin master 는 로컬의 마스터브랜치를 깃허브의 마스터 브랜치에 push한다는 뜻이다. 깃 레파지토리를 만들어서 최초로 git add origin master [원격url] 하는 명령은 원격 url을 지정하면서 동시에 깃허브에 master 브랜치를 생성하는 명령이다. (존재하지 않는 브랜치에 push하면 원격저장소에 브랜치가 생성되면서 push된다.) git push [원격명] [로컬 branch명]:[원격 branch명] 브랜치 명 하나만 쓰면 해당 이름의 로컬브랜치에서 원격브랜치로 push하는데, 로..

remote 깃에게 알려줄 목적지 url git remote -v 현재 저장소에 있는 원격(목적지 url)을 나열해서 보여준다. git remote add origin [url 주소] 원격이 없는 경우 새로운 깃 리파지토리를 만들어서 내 로컬저장소에 원격을 지정하는데, 이 원격(목적 url)의 이름은 origin으로 한다. "깃 , 여기있는 url을 origin이라는 이름으로 원격저장소로 정할게" origin이란 이름은 master(or main) 처럼 관행적인 이름이고, 바꿀 수 있다. git remote rename [기존원격명] [바꾸고싶은 원격명]