개발새발

1. 멀티미디어 1)img 이미지를 삽입 빈태그 속성 = 값 - src (필수) 이미지 url : 경로 - alt (필수) 이미지의 대체텍스트 - width 이미지의 가로 너비 - height 이미지의 세로 너비 => width or height 하나만 설정하면 비율을 그대로 유지한 채 크기가 조정된다/ px를 쓰지 않아도 된다 => 크기는 css로도 조절할 수 있다 - srcset : 브라우저에게 제시할(사용할) 이미지 url과 원본 크기의 목록 정의 값: w,x 이미지를 지원하기 위해 미디어쿼리라고 부르는 css media rule (@media)에서 background-image 속성을 많이 사용 반응형 이미지를 처리하기 위해 뷰포트의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야 한다 h..

1. 인라인 텍스트 1)A :다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 다른 url로 연결할 수 있는 하이퍼링크 설정 [anchor, 외부로 내보내기] 속성 href : 링크 url설정 (사용자가 a 태그를 통해 넘어갈 페이지에 대한 경로) but 생략 가능 rel : 관계를 설정해준다 값: license, prev, next(이전, 다음 페이지) target : 링크 url의 표시(브라우저 탭) 위치 값: _self(현재 창에 새로운 탭을 띄우겠다, 기본값) , _blank(다른 페이지에 새로운 탭을 띄우고 싶으면 _blank를 해야 한다) 이외 속성 download: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미(페이지를 넘어가는 용도가 아닌 다운로드를 받도록 하는 신..

1. body: 문서의 구조 1) : 헤더를 만들 때 쓰는 태그 소개나 탐색을 돕는 것의 그룹 상단에 있는 바 : 로고, 메뉴, 로그인, 검색바 등 후손이 될 수 없다. => header, address, footer안에 header를 넣을 수 없다 속성: 전역 속성만 포함(header에만 쓰는 속성은 없다) 호환성: IE9 ver.이후부터 모두 지원 2) 가장 가까운 구획화 콘텐트, 구획화 루트의 푸터 페이지 가장 하단에 있는 작성자 구획, 주소 등 데이터 ex. 회사 이름, help, privacy 등 후손이 될 수 없음 속성 : 전역 속성만 포함 호환성: IE9 ver. 이후부터 모두 지원 블록요소 => header, footer는 기계가 읽기 좋게 만들어준다 => semantic tag: html..

1. 블록 레벨과 인라인 요소 1)블록 요소 (1)div, h1, p (2)특성: 사용 가능한 최대 가로 너비를 사용한다 => 가로 사이즈를 정하지 않아도 100%로 나온다/ 단, 높이는 지정해야 나온다 => 나오는 여백은 body태그의 margin, padding에 있는 것(초기화하면 된다) (3)크기를 지정할 수 있다 : 가로, 세로 지정 가능 (4) width: 100%, height: 0; 로 시작 (둘다 auto로 들어가있지만 구현이 100%,0으로) 2)인라인 요소 (1)span, img (2)특성: 필요한 만큼의 너비만 사용한다 => 태그 안에 포함된 내용만큼만 너비가 생긴다 (3)크기를 지정할 수 없다 : 무조건 내용의 크기만큼만 있다 (4) width:0, height:0으로 시작(둘다 ..

목표: 기본 자료구조/ 알고리즘 익히기 - 알고리즘 풀이를 위해 기본적으로 알고 있어야 하는 자료구조와 알고리즘 정리 - 짧은 시간 안에 효과적으로 익힐 수 있도록 구성 작은 원리를 적용하는 방법을 익히고 연습을 통해 익숙해져야 한다. 구구단 정도는 프로그래밍을 할 수 있어야 한다. https://www.fun-coding.org/python-question3-answer.html 파이썬 기초 (문제풀이): 파이썬 반복문과 리스트 - 잔재미코딩 기존 유투브 영상은 설명없이 키보드로 코드를 작성하는 모습만 보여드려서 보기가 불편하여, 정답 코드로 대체합니다. 본 컨텐츠는 저작권법의 보호를 받으며, 무단 복제, 가공, 외부 오픈이 www.fun-coding.org #31. 반복문 for을 이용해서 10까지 ..

https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com #17. order, align-self 쓰기 order: 5 align-self: flex-end => yellow 둘만 가장 오른쪽으로 놓으려고 하니까 yellow로 둘을 잡고 가장 큰 order를 넣으면 된다 (order는 숫자가 가장 작은 숫자부터 가장 큰 숫자로 오름차순 : 순차적일 필요 없다) => 그러면 나머지들은 자동으로 order가 yellow 둘보다 낮아지므로 가장 왼쪽으로 붙게 된다 #20. flex-flow 쓰기 flow는 flex-direction, flex-wrap을 동시에 쓸 수 있다. 사이에 space를 한번..

이 글은 아래 글을 인용합니다. 원글이 그림도 더 친절하고 설명도 잘 되어 있으니 링크 타고 보시는 것을 추천합니다 출처: https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 아이템에 적용하는 속성들 1. 유연한 박스의 기본 영역 flex-basis flex-basis는 Flex 아이템의 기본 크기(즉 최소크기) 를 설정합니다 최소크기보다 큰 item은 그대로, 작은 item은 최소크기만큼 큰다 (flex-direction이 r..

이 글은 아래 출처의 글을 인용합니다. 원글이 그림도 설명도 더 친절하니 아래 링크를 타고 보시는 것을 추천합니다. 출처: https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 1. Flex란? Flex는 레이아웃 배치 전용 기능으로 고안도됨 그래서 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리 2. [Flex 레이아웃을 만들기 위한 기본적인 HTML 구조] helloflex abc hellof..

import React, { useEffect, useState } from "react"; // KUCC 리액트 세션: 7.무한스크롤(클래스 컴포넌트 ver.)(https://infpidealistdeveloper.tistory.com/54)의 코드를 함수형 컴포넌트로 다시 짠 코드입니다. const Allitem = () => { const [state, setState] = useState({ productList: [], //상품의 배열 items: 10, //요청하는 상품의 끝 인덱스 preItems: 0, //요청하는 상품의 첫 인덱스 }); // state의 초기값 설정 useEffect(() => { //생명주기에서 componentDidMount, componentDidUpdate(mou..

출처: https://velog.io/@hyounglee/TIL-56 TIL 56 | React로 무한스크롤 구현 참고 자료 : React에서 Infinite Scroll 구현하기무한스크롤은 화면의 맨 아래까지 스크롤을 하면 새로운 컴포넌트가 랜더되는 형태이다. 페이스북, 인스타그램 등 다양한 사이트가 이러한 무한 스크 velog.io 무한스크롤: 화면의 맨 아래까지 스크롤을 하면 새로운 컴포넌트가 랜더되는 형태이다. ex. 페이스북, 인스타그램 등 => 불필요하게 수많은 데이터를 긁어오기보다는, 한번에 10-20개 정도의 포스트만 가져와서 스크롤 될 때마다 업데이트 되는 형식이다. => 물론 백엔드에서 정보를 받아와야 구현이 가능하지만 이분은 mock.json을 사용하셨다 [방법 #1. Class Co..