프론트엔드 첫걸음

[출처] https://ko.javascript.info/script-async-defer https://www.youtube.com/watch?v=tJieVCgGzhs&feature=youtu.be 브라우저가 그림그리는 순서는 다음과 같다. 1. Render Tree만들기(parsing 및 style) 2. Layout잡기 3. Paint 4. composite 처리(transform , opacity 등) 브라우저의 페이지를 렌더링할때 DOM (Document Object Model), CSSOM(CSS Object Model)을 만들어 렌더트리를 만드는 과정을 거치는데 , 이 때 태그로 외부 자바스크립트 소스를 참조하게 되면 DOM트리 만드는 것을 중단하고 해당 javascript 코드를 파싱한다...

[코딩애플 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..