성2

고정 크기 단위 px, pt, in, cm, mm (기본 px: 16px) 가변 크기 단위 em, %, rem, vw, vh em 부모가 가진 font-size의 n배 (부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값 rem 중첩 무시 hello world hello world hello world hello world % 상대적인 크기 지정 부모의 크기 & (자식의 %값/100) = 자식이 가지게 될 px 값 %의 처음 크기는 30px 입니다. %의 크기는 30 * 0.5 = 15px 입니다. p의 크기는 30 * 1.1 = 33px 입니다.

정보를 입력하는 태그(아이디, 비밀번호 등) ▶ 정보를 만들어서 보낸다 ✅ get: 데이터 조회 요청, 호출 ✅ post: 데이터 생성, 변경, 삭제 요청 서버가 받는 방식은 get이든 post든 똑같다 패스워드 등 개인정보가 담긴 것은 post 방식으로 사용 굳이 따지자면 post도 아니긴하다고 한다 대용량일 때 post를 사용한다 로그인 아이디, 비밀번호를 타이핑하면 url이 변하는 것을 확인할 수 있다 ▶ 이게 get 방식! name이 key 값이며, 입력한 문자는 value 값 🔽 query=string ┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ href │ ├..

emmet: 자동완성 기능으로, html 작성 속도를 크게 향상시켜준다 emmet 기초 (작성 후 tab을 누르면 자동 완성) h1 h1{hello world} h1+p h1{hello}10 h1#one h1.one table>(tr>(td4))3 lorem lorem*3 lorem3 lorem5 img img:z a[a="value1" b="value2" c=1] a a[href="www.naver.com"] h1.one.two#three $: 변수 h$*6{hello world} = hellow world hellow world hellow world hellow world hellow world hellow world *tab을 누르면 다음 코드로 바로 넘어갈 수 있다 (처음부터 tab을 눌러야 계..

html 파일과 jpg 파일이 같은 폴더에 있을 때 다른 폴더에 있을 때 사이즈 조절 ⭐ 보통 사이즈를 조절할 때 width나 height 중 하나만 사용한다 ✅ webp: 이미지 용량을 적게 사용하는 이미지 포맷(google에서 제작) 한 페이지에서 다른 페이지를 보여주고 싶을 때 사용 ex. 유튜브 영상 > 우클릭 > 소스코드 복사 *주요 사이트들은 iframe을 막아놨는데, 이는 보안상의 이유다. *control autoplay loop controls="controls", autoplay="autoplay", loop="loop" 라고 명시해주지 않아도 된다. 압축하지 않은 일반 비디오 스트리밍은 용량이 크다 ▶ 유튜브에 올린 다음에 iframe으로 가져오는 것을 추천 비메오를 사용하면 로그인한 ..

1. LINK 웹사이트에서 페이지를 연결하고 이동할 때는 태그를 사용한다. 하지만 Next.js에서는 Link컴포넌트가 태그를 래핑하여 사용한다 import Link from "next/link"; 👈 export default function NavBar() { return ( 👈 Home About ) } Q. a태그 써도 되던데? : 페이지가 계속 새로고침된다. Link는 새로고침 안되니까 그냥 Link써라..! Q. Link 컴포넌트 안에 a태그가 없어도 잘 동작하던데, 그렇다면 a태그가 없어도 되는거 아닌가? : Link는 여러 props를 허용(href는 필수)하는데, 이동에 관한 props만 있다(?). 이러한 이유로 스타일·클래스 등을 주기 위해서는, a태그가 필요하다. Home 👈 Q. ..

pages 폴더에 있는 파일명에 따라 라우트가 결정된다 - index.js는 시작 페이지를 뜻한다 👉 http://localhost:3000/ (http://localhost:3000/index와는 전혀 다름) - about.js 생성 👉 http://localhost:3000/about 파일명에 따라 라우트가 결정되기 때문에, 컴포넌트 명은 무엇이든 가능하다 중요한 점은 export default가 되어야 한다는 점이다 Ref. https://nomadcoders.co/

Node.js 설치되어 있는지 확인(버전 10.13 이상) : https://nodejs.org/en/ Next.js 프로젝트 초기화 (자동 설정) npx create-next-app@latest + typescript를 사용하고 싶다면? npx create-next-app@latest --typescript (수동 설정) : 수동 설정을 하게 되면 package.json과 module을 따로 설치해줘야 하기 때문에 그냥 자동 설정으로 하자^!^ npm install next react react-dom 또는 yarn add next react react-dom 설치가 완료되면 해당 폴더 안으로 들어가 npm run dev 또는 yarn dev 로 실행시켜주자 👇 cmd(ctrl) + url 또는 크롬 ..

서버 사이드 렌더링(SSR)을 쉽게 구현할 수 있게 도와주는 아주 강력한 React 프레임 워크 👉 React도 SSR이 가능하지만, 생각보다 복잡하다 👉 정확하게는 SSR과 CSR의 장점을 조합해 동작한다 1. SSR(Server Side Rendering) 사용 목적 검색 엔진 최적화와 빠른 페이지 렌더링에 있다 1-1. SEO(Search Engine Optimization) 검색 엔진 최적화란, 구글·네이버 등의 검색 엔진에 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 하는 기법이다. 클라이언트 사이드 렌더링(CSR)의 경우, 자바스크립트가 로드 되지 않았을 때 아무런 정보를 담지 않는다. 검색 엔진 봇들은 HTML로 데이터를 크롤링하는데, CSR방식은 아무런 정보가 없기 때문에 봇들이 ..

선택자 : 특정 태그를 선택, 해당 태그의 속성을 변경하는 목적으로 사용 div { tag 선택자: 특정 태그를 선택하여 적용; } * { * 선택자: 문서 전체 선택, 초기 세팅 값을 잡을 때 많이 사용; } input[type=text] { 속성 선택자: tag의 속성을 선택하여 적용; } id와 class: html에서 지정 > css에서 속성 설정 #wrap { id: # } .content { class: . } #wrap.content { tag, id, class 혼합 가능 } 후손 및 자손 선택자 👈 👈 div li { 후손 선택 } div > h1 { 자손 선택 } 동위 선택자(+, ~) : 동등한 위치를 판단하여 css 속성 설정 h1~div { h1과 동등한 위치의 태그 중 div란 ..

배경 이미지 background-image: url('이미지 경로'); background-size: 100%; background-repeat:no-repeat; 👈 default는 repeat background-attachment:fixed; 👈 div 값을 무시하고 브라우저 처음부터 이미지 시작 display 속성 display: block; 👈 일반적으로 설정하지 않아도 div를 갖게되는 기본값 display: inline; 👈 개행 불가. 임의로 크기 조절 불가능(최소값만 가진다). margin을 줘도 상하는 고정 display: inline-block; 👈 inline의 성질을 가지고 있지만, 임의로 크기 조절 가능 ✔ display: none; 👈 화면에서 사라진다. 속성 값도 날아간다 v..