hojncode 웹개발 공부하기.

Block은 옆에 다른 요소가 올 수 없는 종류를 뜻하고, Inline은 옆에 다른 요소가 올 수 있는 종류이다. Inline은 span, link, image 같은 종류가 있고, 그 외에는 거의 block으로 존재한다고 볼 수 있다.

문서를 보기만 해도 그 의미를 짐작할 수 있는 태그 작성법. 태그만 사용하지 말고 , 작성 의도에 맞는 태그로 사용하자. semantic tag? 문단 짧은 텍스트 박스 : 기본적으로 상하로 배치 시킨다. 코드를 개발자가 알아보기 쉽도록 semantic 태그로 작성하자 © html & css 공부하기

link태그는 파일을 연결해주고, a태그는 하이퍼링크로 페이지를 연결해준다.

top: a; right, left: b; bottom: c;

head 태그에는 invisible 정보들이 들어가며 : 메타데이터 ex) 인코딩정보, og:title, og:image, 등등... body 태그에는 visible한 콘텐츠 정보들이 들어간다 : 실제로 웹페이지에 보이는 콘텐츠들에 대한 정보들 -a 태그 사용 팁- naver target : 기본값은 self이고, _blank 입력 시 새 탭에서 링크가 열림 attributes : 태그 내부에 입력하는 값 들을 뜻함

top, bottom , left, right 를 축약해서 사용 가능하다. top: 20px; right: 50px; bottom: 20px; left: 50px; 를 inset : 20px 50px; 이렇게 사용할 수 있다.

HTML = Markup language , (markup = content) html은 browser에게 웹사이트에 어떤 content가 있는지를 알려준다. (title, link, image,paragraph,date...) CSS는 디자인과 스타일을 위한 언어. browse에게 content들이 어떻게 보여야 하는지를 알려준다. JavaScript는 웹사이트를 동적으로 만들어준다. (클릭시 이동, 클릭시 화면에 창 띄우기...) -JS만 프로그래밍 언어이다.

position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. block : 한 줄 모두 차지 (대표 element - , ) inline : 콘텐츠 크기 만큼만 차지 (대표 element - ) position : 다음 표의 값; static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stickey 스크롤 영역 기준으로 배치 Relative 요소를 일반적인 문서 흐름에 따라 배치한다. 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다. 원래 위치를 기준으로 ..

useEffect(()=> { (async()=> { const response = await fetch("https://api.coinpaprika.com/v1/coins"); // fetch를 통해 해당 주소의 api를 가져온다. const json = await response.json(); // 가져온 api를 json 형식으로 바꿔준다. setCoins(json.slice(0,10)); //setState 로 state에 값을 저장한다.(slice를 이용해 원하는 갯 수를 정할 수 있다.) setLoading(false); // api 가져오는 순간 동안 boolean 을 이용해서 로딩 문구를 띄워준다. })(); },[])

특정 시점에만 코드를 실행하기 위해 사용. - 코드가 component 의 시작할 때 실행될 지, 끝날 때 실행될 지, 아니면 특정 변화가 일어날 때 마다 실행 될지 정해 줄 수 있음. useEffect(() => { },[]) []는 의존성 배열로 ,비어있을 경우에는 component life 의 시작점에서만 실행하도록 한다.(한번만) #사용예시 useEffect(() => { (()=> console.log(1))(); },[])