개발캡슐

목록 태그(Lists) 목록 태그(Lists) - 다양한 유형의 목록을 사용해서 특성에 따라 정보를 그룹화해서 사용자에게 방향을 제시하는 태그. 목록 태그의 종류 - ul , ol, li, dl 4가지가 존재해. 1. ul - unordered-list(비정렬 목록, 정렬되지 않은 목록) 의 약자 - ol과 반대로 순서가 중요하지 않은(또는 없는) 목록에 사용해. - 일반적인 메뉴, 카테고리, 비슷한 구조의 반복 등에 사용하면 돼. - 자식으로 반드시 li만 가질 수 있어. Corn Tomatoes Beans Onions Garlic 2. ol - ordered-list(정렬된 목록)의 약자야. - 순서가 중요한 목록은 ol태그로 감싸서 나타내야 해. - 자식으로 반드시 li만 가질 수 있어. Cook ..

useRef useRef - 리액트에선 render() 메서드에 의해 만들어지는 DOM에 접근하는 방식 으로 HTML 의 DOM노드와 React Element에 접근할 수 있도록 ref를 제공해. - javascript에서 특정 Dom을 선택하는 역할이 getElementById, querySelector 등이 있다면, 리액트에선 useRef를 사용해서 특정 Dom에 접근해. - 특정 DOM에 접근할 때 사용하고, - 외부 라이브러리 사용할때 유용해. useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르킬 수 있게 되지. useRef가 필요한 상황들 - ref로 값을..

Semantic HTML 시맨틱 HTML(Semantic HTML) - Semantic HTML은 웹 페이지의 콘텐츠를 의미론적으로 정의하는 HTML 마크업 방식이야. - 웹 페이지의 구조를 이해하기 쉽고 검색 엔진 최적화(SEO)에도 도움이 되는 장점이 있어. - 예를 들어, - 웹 페이지에서 특정 부분이 제목인지, 메인 콘텐츠인지, 사이드바인지 등을 명시적으로 정의하지 않고 div 태그만을 사용하는 경우, 이걸 이해하려는 사람이나 검색 엔진은 페이지의 내용을 이해하는 데 불편함을 겪을 수 있어. 시멘틱 HTML의 사용시 장점 Semantic HTML을 사용하여 적절한 태그를 사용하면, - 페이지 내용의 구조를 명확히 할 수 있어. - 이해하기 쉽고 검색 엔진이 페이지를 쉽게 인덱싱할 수 있어. 예를 ..

1-1강. 배울 것들 - 웹의 동작개념, HTML, CSS(부트스트랩, 폰트, 주석, 파일분리 등) 1_웹의 동작 개념 ㄴㅇㅂ 해킹하면서 동작 원리에 대해 알아버좌 ㄴㅇㅂ에 들어가서 1) "뉴스홈"버튼 마우스 오른쪽 버튼 클릭 2)"검사"버튼 클릭 3) 검사창 뜸 4) 해당 글자에 대한 부분의 태그가 지칭되어 있음. 5) 해당 글자 "뉴스홈" 위치 두둥. 그리고 5) 해당 글자 "뉴스홈"을 더블 클릭해서 쓰고싶은 거 쓰고 변경하고나면 5)뉴스홈 글자가 변경한 글자로 바뀜. 그러면 1)해당 글자 자리에 글자도 바뀜! 첫번째 힌트, 전세계 사용하는 유저의 사전 글자를 바꾼게 아니야! 내 것만 바뀐 거 두번째 힌트, 여기서 인터넷을 꺼도 페이지는 그대로 있어. 세번째 힌트, 대신 뭘 누르면 그 때 페이지가 없..