개발자 도구 > 네트워크를 보면 데이터가 잘 받아지는지 알 수 있음
gird로 반응형구현 > 페이지를 줄일때 화면크기에 맞춰서 카드수가 바뀜
gird-template-colummns:repeat(auto-fill,minmax(300px,1ft)
> grid찾아보기
reset.css > 모든 브라우저에서 일관된 기본 스타일을 적용하는 역할을 합니다.
기본적으로 적용되어있는 브라우저 CSS를 초기화하는것
브라우저 CSS를 신경쓰지 않을 수 있게된다.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
reset.css공식문서에서 복붙해도 된다.
css는 순차적용되므로 자신의 css위에 붙이기
prettier > setting.json
1. prettier 설치
2. settings.json 파일 접근
> 2번째줄 2번째 아이콘
거기에 붙여넣기
// settings.json 에 아래 코드 삽입 시 html 파일에서도 프리티어 동작
"editor.formatOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
.prettierrc >> prettier이 있는데 이 파일을 만드는 이유는 .prettierrc를 우선해서
포맷팅을 해준다. 깃헙에 올려도 똑같이 포멧팅이 된다.
코드 포멧팅이 다를때의 충돌을 방지해줌
그래서 작업할때 .prettierrc 을 만드는게 좋다.
기본적인틀
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"bracketSpacing": true,
"trailingComma": "none"
}
변경하고 싶으면 공식문서 보면서 적용
https://prettier.io/docs/en/configuration.html
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
html을 읽는 엔진 > html 파서
html을 읽는 행위 > html 파싱
파싱하고 나면 DOMTree가 만들어짐
태그를 설정할땐 semantic하게 설정해야한다.
> 검색엔진이 더 쉽고 빠르게 알아채게 한다.
> 검색엔진에 노출이 더 잘된다,
> 다른 개발자가 예측하기 더 편해짐
onsumit 기능 찾기
함수를 호출해야 자바스크립트엔진이 읽기 시작
tip
vs코드에서 코드 읽다가 변수의 내용 찾을때 겹치는 변수나 가리키는것들 바로 찾아가기 쉬움
command누르고 궁금한 코드 누르면 바로 찾아가짐
함수나 배열등등 사용법도 command누르고 클릭하면 사용법들 나온다.
fetch를 실행한 결과 >> promise
async await 문법 찾아보기
await뒤에는 promise만 나올 수 있음
json parser로 json안에 담긴 것 확인하기 편함
https://jsonformatter.org/json-parser
JSON Parser Online to parse JSON
Secure JSON Parser is an online JSON Parser tool to Parse, Decode and Visualize JSON data in Tree view. JSON Parser online updated in 2022.
jsonformatter.org
구조분해 할당 문법
으로도 담을 수 있음 > 해보기
브라우저에서 개발자도구로 들어간후
태그 하나를 집어서 따로 보고 싶을때 그 코드를 클릭후
console창에서 $0치면
그 코드만 출력되어 나온다.
이러고
만약 그 태그에 DOM API로 작업을 했다면
$0.<작업한 DOMAPI> 치면
들어간 내용이 나온다
-혹시 아직 DOMAPI가 어디서 작동되는지 모르겠으면
vs코드로 쓰기전에 브라우저 콘솔창에
태그를 $0으로 지정해서 하나씩 적어보는것도 좋아보임
이벤트 핸들러 어트리뷰트 (Event Handler Attribute)
HTML 요소에 직접 이벤트 핸들러를 설정하는 방법을 의미합니다.이 방법은 HTML 요소에 이벤트가 발생했을 때 자바스크립트 코드를 실행하는 데 사용됩니다.예를 들어, 클릭 이벤트를 처리하는 경
momomooo.tistory.com
만약 h1> 제목에 이미지만 있으면
태그를 fiqure로 하는게 좀 더 의미있는 태그
snake_case 보단 camelCase로 변수 작성하기
폴더, 파일분리관리
style 폴더
src 폴더 > main, 구현할 내용 나누기
assets 폴더 > 동영상이나 이미지같은 리소트
자체 의미있는 태그 정리하기
https://momomooo.tistory.com/79
defer
defer는 이 경우, script.js 파일은 페이지가 파싱되는 동안 다운로드되지만 실행은 페이지 파싱이 완료된 직후에 이루어집니다.이는 자바스크립트 파일이 페이지의 다른 구성 요소에 의존하는
momomooo.tistory.com
html의 script링크 걸어둔 태그에 type="module" 넣는걸 권장
> 사용하면 다른 파일에서 같은 태그 사용 가능
> 파일하나만 HTML에 링크걸로 연결할 수 있음
> 기본적으로 "use strict" 가 적용된다.
> main 함수를 쓰고 싶으면 맨 앞에 export와 import쓰기
ex) export let getMovies = () => [1,2,3]; >>수출, 보내주는 파일
import {getMovies} from "./movie.js" >>수입, 받는 파일
자주 쓰는 css
:root {
/* 문서의 최상위 요소를 의미, html 과 사용할 경우 <html> 을 의미 */
}
* {
/* 전체 선택자. 모든 요소 선택 */
}
li {
/* 유형 선택자. 기입한 tagName 에 해당하는 모든 요소 선택 */
}
.movie-card {
/* 클래스 선택자. class="movie-card" */
}
#movie-id {
/* ID 선택자. id="movie-id" */
}
.movie-card img {
/* 자손 결합자(" "). class="movie-card"인 태그의 자손 중 img 태그들 선택 */
}
.movie-card:hover {
/* 의사(pseudo) 클래스. class="movie-card"인 요소가 hover 상태일 때 */
}
- display: flex
- 수평, 수직 정렬하는 용도로 자주 사용
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
https://angrytools.com/css-flex/
CSS Flex Layout
angrytools.com
- display: grid
- 격자 형태의 템플릿을 만들어 요소 정렬하는 용도로 자주 사용
Grid Garden
A game for learning CSS grid layout
cssgridgarden.com
https://angrytools.com/css-grid/
CSS Grid Layout Generator
CSS Grid allow us to create two dimensional layout on a web page and arrange child elements in specified row, column structure. Two primary parts of grid layout are: Grid container and Grid item Grid containerGrid ContainerGrid CellColumnsRowsGrid ItemGrid
angrytools.com
onclick을 다 주는것보다
이벤트핸들러를 이용하면 한번만 주면 되서 메모리면에서 좋다.
https://momomooo.tistory.com/manage/newpost/70?returnURL=https%3A%2F%2Fmomomooo.tistory.com%2F70&type=post
momomooo.tistory.com
from
form은 기본적으로 새로고침을 기본동작으로 가지고 있음
>> 이 새로고침은 하나의 서버에서 그 서버안에서 소스를 리소스 받으려면 유용함
이게 불필요 할때는 preventDefault()
textContent
searckKeyWord
string.includes
검사 > element에서 properties를 확인하면
properties리스트를 볼 수 있다.
document.을 이용해 넣은 값은 > 하나의 돔이고 자바스크립트 객체로 들어있기때문에
property에 card.style.display 이런식으로 접근이 가능하다.
이벤트핸들러가 어떻게 나오는지 보려면 함수안에 console.log("event : "event) 해서 보기
'스파르타 내배캠 _과제, 프로젝트, 특강' 카테고리의 다른 글
| 타입에러 해결 - string을 숫자로 변환하려는데 객체가 되어서 NaN되는 현상 (0) | 2024.07.12 |
|---|---|
| 웹개발 숙련 주차 과제 해설 강의 (0) | 2024.05.31 |
